UI设计的10条规则

发布时间:2023-09-11 点击:385
ui设计的10条规则
在这篇文章中,我想分享一些我认为可以帮助你日常工作的方法,但这不是一样的。 事实上,我认为设计是为了跳出盒子来思考,但首先要了解规则,然后才能打破规则。
如果你不熟悉dp的概念,我想在这里解释一下:像素密度是每英寸像素值和ppi。 单位dp是单词density-indepixel的缩写,有时缩写为dip。
建议在设计界面时不要设计像素,而是要设计设备的像素密度,以确保设计元素能够很好地适应各种设备。
例如,如果我们设计一个大小为200x50dp的按钮元件,它将显示在200x50dp的160ppi屏幕上。 320ppi屏幕显示400x100px是原资源的两倍..
在某些屏幕中,每英寸像素比其他屏幕更多,但设计资源在像素密度较高的屏幕上并不低,因为它们的尺寸是原始屏幕的两倍。 渲染四次。 该机制确保所有设计资源在不同密度和设备之间具有相同的尺寸。
例如,iphonexsmax的屏幕尺寸为414×896,但这不是像素尺寸,而是点数。 像素是1242x268px。 考虑到这一点,当我设计iphonexsmax时,我将设计414/896,并提供@3x的设计资源。
为什么要使用8dp增量规则? 这是一个简单的解释:我们使用8,而不是5,因为如果设备有1.5倍的分辨率,就很难消除锯齿。
通过在8:00的栅格上设计8,使设计更加统一。 设计师不需要更多的猜测就能迅速做出完美的决定。
我想更全面地理解这一规则。 您可以查看brynjackson的8点栅格文章(文章链接到https://spec.fm/specifics/8pt..
应不时停止设计,以确定设计的容器是否会混淆ui。 通常用于分离内容的框架和线可以用空白代替。
当我们过去设计的时候,我们喜欢把元素放在盒子里。 所以你所要做的就是移除这些盒子,使页面看起来不那么密集,并且给元件更多的呼吸空间。整个界面可以提高级别。
设计一个类似于建造公共建筑,如图书馆或学校,它需要容纳每个人:盲人色盲或视力损害的用户。
为了确保您的设计符合标准,建议下载一个名为stark(htps://getstark.co/)的插件。 检查设计是否正确。
此外,用户已经开始期待类似的产品体验。 如果您设计的网站应用程序软件与用户习惯不同,则不直观的用户可能会对此感到失望。
每个颜色都有视觉重量,这有助于在内容中建立水平结构。 使用颜色的深度给元素带来不同的重要性。
这里的经验是,如果一个元素比另一个元素更重要,它应该有更高的视觉重量。 这使得用户可以容易地区分重要和非重要的信息,并快速访问页面。
一项广泛的设计共识是,同一接口中使用的字体数量应该受到限制。 一般来说,这两种不同的字体就足够了。 这并不是说你不能使用更多的字体,而是你必须有一个合理的理由,否则你最好不要使用它们。
在使用字体时,我们可以在设计中使用具有不同变体的相同字体。同一个家庭的字体设计为灵活和一致。
在选择字体时,优先考虑具有各种重量的字体,如细体标准体、粗体、超厚体、宽体扩展体和斜体。 这将给你更多的空间,而不添加额外的字体。
在付款页面(如果设计得很好),我不需要记住我买的是什么,我可以清楚地识别我想买的东西,而不必激起我的记忆。
在我的gmail收件箱里,我只需要看看我读过的电子邮件,而不考虑它。 或者如果我登录到亚马逊,我可以很快看到我以前浏览过的地方,因为它能告诉我最近看到的东西。
通过对象操作和选项,可以看出用户的阅读压力最小化。 用户不必记住从对话的一部分到另一部分的信息。 在适当的情况下,系统应该显示或易于搜索。 尼尔森诺曼。
当用户在页面上滚动时,我经常看到着陆页设计。 它通常太活跃,一切都在移动,但内容本身却被忽视了。 作为用户,当界面上有这么多事情时,很难让他们注意到任何事情。这是浪费用户的宝贵时间。
大量的研究发现,界面动画的最佳速度在200到500毫秒之间。 这些数字是以人脑为基础的。 任何不到100毫秒的动画都是立即识别的。 超过一秒的动画会让用户感到无聊。 theultimateguidoproperuseofanimationux。
所以如果你在使用动画,你必须有一个目的。 如果这些动画是有目的,不要让我等超过500毫秒。 在2019年,让你烦恼的用户只需要一毫秒。
每次我们想在页面上添加更多的信息:按钮、文本、图像、动画、插图等,它都会与相关信息竞争。 如果页面上有太多元素的重要性,它就会减少。
一个完美的例子是著名的google主页,而不是像yahoo这样的受访者可能不需要的信息:搜索的核心任务。


怎么运用网站地图做优化?
南昌SEO如何做出首页logo权限
做优化怎么做数据分析
对比SEO技术与市场营销哪一个起到主导作用?
网站站内权重如何传递
什么叫百度链接?
如何使网站流量流入?
企业对网站推广的营销战略