立即注册 登录
 找回密码
 立即注册
搜索

UI设计注意事项!

2019-6-21 11:35| 发布者: cocoo| 查看: 148| 评论: 0|原作者: 文/许勇

摘要: 查漏补缺!
 

UI设计有哪些必知的注意事项呢?

色彩不是决定性的因素

色彩很容易受到环境的影响,设计的时候不要将色彩视为决定性因素,色彩可以醒目,作为引导,但不应该是做区别的唯一元素。在长篇阅读的情况下,除了要强调的内容,应采用相对暗淡或柔和的背景色。当然,视读者而定,也可采用明亮的背景色。


循序展现

每个屏幕只展现必需的内容,如果用户需要作出决定,则展现足够的信息供其选择,他们会到在下一屏找到所需细节,避兔过度阐释或把所有一次展现,如果可能将选择放在下屏有步骤地展示信息,这会使你的界面交互更加清晰。


考虑屏幕全局光源

作为设计师,你应该早就了解每个平台,都有其不可改变的屏幕全局光源,所有高光和阴影效果都应该和平台的光源相协调。


明确导航和组织控件设计

向你的开发者明确展示你的设计中包含的标签、下拉菜单或者其它闭合机制。在进行这种控件设计时,要尊重平台的设计惯例。开发者在进行开发时需要明确了解信息层次,因此你要确保你的设计清晰地展示你的意图,图层复合在这种情况下非常有用。


导出图形时不进行压缩

在导出时以 PNG alpha通道格式保存,除非被明确告知其它保存方式,除非被明确要求否则不要使用JPEG格式,不要考虑图像文件大小,因为开发者或他们的开发环境会对图像进行最优化,以透明背景导出每个元素,而不是纯色,即便你设计中的一部分背景确实是纯色的。


询问阴影的处理

和你的开发者沟通是否要将阴影效果包含在导出图中,通常情况下,开发者会用CSS或写代码来应用阴影,这样做事实上会比直接使用预先保存的阴影位图更方便容易,不要假定阴影效果应该包含在图像中,虽然在设计原型时用图层展示阴影效果。


尽量使用单列而不是多列布局

单列布局能够让对全局有更好的掌控,同时用户也可以一目了然内容,而多列而已则会有分散用户注意力的风险,使你的主旨无法很好表达,最好的做法是用一个有逻辑的叙述,来引导用户并且在文末给出你的操作按钮。


合并重复的功能而使界面简洁

在整个产品开发期间我们会有意无意地创建很多模块,版面或者元素,而它们的功能都是相近,此种情况已经表明过度设计了,时刻警惕这些冗余的功能模块,界面上模块越多,用户的学习成本就越大,所以请考虑重构你的界面使它足够精简。


将选项与按钮区分开来

诸如颜色、层次及模块间的对比,这些视觉上的设计可以很好地帮助用户使用产品,他时刻知道当前所处的页面以及可以转到哪些页面,要传达这样一个好的界面,你就需要将可点击的元素、可选择的元素以及普通的文字明显区分开来。但千万不要把这三种元素设计得混乱不堪。


界面要有鲜明对比让人容易区分

把主要功能区从界面中突出显示出来效果会好很多,通过明暗色调的对比来突显,通过为元素添加阴影渐变等效果,让界面富有层次感来张主要功能,你甚至可以在色相环上专门选择互补色,来设计你的界面以达到突出“重心”的目的。


精简表单内容

表单中每个字段都会有失去用户的风险,不是每个人打字都很快速的,并且在移动设备上进行输入更是相当麻烦的事情。如果你确实需要一大堆信息让用户填写,试着将它们分散在不同页面,在表单提交后还可以继续补充,过多字段很容易让整个表单显示臃肿,当然想简洁也很容易,只放少数字段。


将操作的状态或者进度呈现出来

现如今大多界面当中已经呈现了各色样式的进度条或者标明状态的图标,例如:邮件有己读或未读的状态;电子帐单有支付或未支付的状态。而在界面上呈现这样的状态对于用户来说是很有必要的,这样用户就可以知道某些操作是否成功,接下来准备进行怎样的操作。


过多边框会让界面四分五裂

边框确实在划分区域进行版块设置时有很大的作用,但同时其明显的线条也会吸引走用户的注意力。为了达到划分版块又不转移用户注意力的目的,在排版时可以将界面上不同区域的元素通过空白进行分组,用上不同的背景色,将文字对齐方式进行统一,还有就是为不同区域设置不同的样式。


界面设计得一致

在设计中保持一致性时就可以减少用户的学习成本。用户不需要学习新的操作。当我们点击按钮或者进行拖拽操作,我们期望这样的操作在整个程序的各个界面都是一致的,会得到相似的结果出来。可以在很多方面下功夫,来实现一个一致的界面包括:颜色、方向、元素的表现形式、位置、大小、形状等。


将有关联的功能分组

将各个功能项分组合并起来,可以提高程序的可用性。有点常识的人都知道刀子和叉子或者打开文件和关闭文件是放在一起的。将功能相近的元素放在一起也符合逻辑,符合我们平时的认知。推荐阅读:界面设计的理智与情感!

注:本文为 设计智造编辑整理,转载请注明 来源:设计智造 http://cocoo.top

本文版权归原作者所有,如有侵权请来信告知(cocootop@163.com),可合作,我们愿意支付稿费。

相关阅读

  • 优秀Logo设计技巧!平面构成法
  • 因形见义!汉字设计的图形化表达
  • 不拘一格!汉字设计进化法
  • 图形设计技巧!文学修辞法
  • 出彩秘籍!广告图形艺术化表现!
关闭

站长推荐上一条 /1 下一条

免责声明|小黑屋|网站备案信息代码:冀ICP备16009769号|COCOO.TOP 设计智造

GMT+8, 2020-9-28 14:23 , Processed in 0.050578 second(s), 18 queries .

Powered by CO2! X3.2

© 998866 Comsenz Inc.

返回顶部