交互设计中的简单实用小技巧

“Sparklin设计技巧”是由新德里数字机构Sparkin提供的一系列简短实用的UI / UX技巧，每周二在其社交媒体渠道上分享。

使用之前和之后的模型图像，Sparklin团队通过可视化示例解释了良好的UI / UX实践，使其易于理解。无论您是新手还是经验丰富的设计师，这些技巧肯定会为您的下一个项目派上用场。在下面查看它们吧。

01.不要为了强调而把文本放大，可以使用字体的粗细、大小或者颜色的深浅来表现。

 

02.避免使用长文本和小文本充满整个画面，可以在屏幕中适当留白凸显文本的重要性。

 

03.手机应用程序的按钮设计需要仔细调整其比例大小。根据麻省理工大学的一项研究，人类指尖的宽度为16-20毫米，差不多40-50px.

 

04.移动端没有悬停状态，按钮（或呼吁行动）必须按照设计规范化，使移动端界面也能真正响应。

 

05.在左边的对话框中，CTA按钮的焦点让人困惑；主操作按钮在右边的对话框中是聚焦的，能很好的区分主次和重要性。

 

06.当界面中有少于5个选项时，可以使用无边框按钮的风格来排列突显，这个方法会优先考虑；如果界面中有7个以上的选项，而不需要同时查看所有选项，则首选使用下拉菜单。

 

07.无限滚动——更适合像Twitter这样的内容探索；分页——最适合像Amazon这样的目标导向平台。

 

08.紧凑布局——多用于像删除、警告这样高度类似的按钮排列；分布式布局——多用户像喜欢、删除这样对应的按钮排列。

 

09.为需要的或频繁选择的单选按钮创建默认选择。

 

10.对于复杂或抽象的分类，使用图标+标签来表达理性和情感带来的心里认知。

 

11.想要设计更好的CTA按钮？尽可能的把文本控制在3个单词以内。不要只添加动作，还需要更具上下文内容确定按钮的文本。

 

12.重叠的图像增加焦点和界面的深度，这也是优化界面空间感的好方法。

 

13.当用户在字段中填写信息时发生指定内联措时，好的设计是提供纠正错误信息的建议！

 

14.按钮比文本链接更重要！创建一个可视按钮会更优于文本链接，以减少用户的记忆负荷。

 

15.在设计可行性的条件下，通过加入图标或图形来增强内容。

 

16.合理使用色彩、有效运用空间让内容通过对比形成差异化。避免使用太多元素。

 

17.较长的内容文章可以从进度条中获得帮助，让用户了解文章的进展情况。

 

18.对于文本最深的应用程序，使用明亮的背景色会对眼睛有压力导致很难阅读。

 

19.复选框——用于多选题选择；单选按钮——用于单选题选择。

 

20.使用相同颜色的色调（或阴影）分隔内容信息。鲜明的颜色分隔会分散用户对内容的注意力。

 

21.从四面八方投射的阴影很不自然，使用偏移阴影让设计看起来自然。

 

22.多色导航增加了认知负荷，尝试将颜色保持为两个颜色，用一个颜色来表示选择。

 

23.指定字段的字段描述为用户填写表单中的信息提供对应的文本规范，防止用户填写错误。

 

24.与单选按钮相比，选择效果更好、具有更广泛的可点击和视觉描述选项。

 

25.添加基于颜色的区别以突显分类并可通过快速视觉查看。

 

26.少即是多，将设计的布局空间化，而不是引入一个新元素（如一条线）来创建一个分区。

 

27.具有重要警告的描述性选项的设计可以让用户轻松做出快速明智的判断。

 

28.弹出层（例如下拉菜单）至少2种不同于背景的色调（对色调）会更有助于视觉突出。

 

29.导航箭头等重要元素应具有黑白色调，适用于黑暗和浅色背景。

 

30.使用与文本字段不同的可区分按钮，使按钮更加突出和可操作。

 

31.使用强调色作为设计中的增强器和区分器，会更有助于用户对信息内容进行可视化分类。

 

32.使用图像中较为明显的深暗颜色而不是黑色或白色叠加来创建有影响力的文本标题。

 

33.使用微妙的视觉差异为用户创造优先级，通过更好的CTA按钮。

 

34.不要填充或覆盖文本行之间的间距。保持行高比字符高度多20-30％，以提高可读性。

 

 

总结：

我们在做设计的时候也可以通过对比的手法来比较哪个设计稿更加优秀，如果自己的不能很好的判断可以发给自己的同事、朋友或者你比较相信的人让大家来做判断。当得出结果的时候，最好有对应的理论知识作为支撑会让你的设计更有说服力。还有就是设计师需要打牢设计基础，字体、配色、排版、图形等通用性设计需要做到胸有成竹。

 

 

 

原文：https://digitalsynopsis.com/design/ui-ux-design-tips/

作者：Sparkin

译者：水手哥