提升你的UI设计的几个小细节

摘要: 细节是一种能影响全局的细微的易被忽略的物件或行为。有时候我们会感觉自己设计的页面没有亮点,其实拉开设计水平差距的,就在于设计之中一些微妙的细节,尤其移动端的界面设计,设计的区域就在几寸大手机屏幕之中,设计师所在做的大部分工作就是如何让复杂的信息在几寸大屏幕内更有秩序有层次的展现,并且提升用户的体验。

细节是一种能影响全局的细微的易被忽略的物件或行为。有时候我们会感觉自己设计的页面没有亮点,其实拉开设计水平差距的,就在于设计之中一些微妙的细节,尤其移动端的界面设计,设计的区域就在几寸大手机屏幕之中,设计师所在做的大部分工作就是如何让复杂的信息在几寸大屏幕内更有秩序有层次的展现,并且提升用户的体验。

那么到底如何提升细节设计的能力呢?除了设计时的用心和全方位思考之外,了解页面中每一个控件所表达的意义,也是非常重要的一环。今天优赞为大家总结了几个在设计过程中非常有用的几个小细节,希望对大家有所帮助。

1、尖角与圆角

圆角更具亲和力,尖角产生距离感

其实界面设计中很少会出现绝对的尖角,因为产品总是要让用户用的舒适,锋利的按钮或者锋利的卡片会让用户感觉非常的“不友好”从而产生距离感。而适当的圆角可以消除这种紧张的体验,当然圆角越大,便更具亲和力。然而其中也是要根据产品的属性最终确定圆角的大小,例如针对母婴类的产品圆角就会做的非常大,而工具类产品只需有一点圆角就够了,过大的圆角反而显得过于复杂了。这里需要注意的一个点就是一一个产品中,圆角的大小是要统一的,如果界面中的信息卡片选择8px的圆角,那么不论是卡片还是按钮最好都选择8px的规范,减少不必要的对比。 例如下图母婴类产品,几乎整个产品没有尖角的出现,全部都是较大的圆角,迎合产品性格的需要。

尖角更具权威感,圆角缺乏稳重感

当然每一个元素都没有绝对的好或者不好,例如尖角虽然在一定程度上让用户产生距离感,而这种距离感可以让某些特殊的产品更具权威感或者档次感。例如苹果的官方网站中出现的卡片基本全部是尖角,这就是为了营造一种高端的品质感受,给用户一种“不可触摸”的权威感, 让用户感觉产品更值得信赖,更符合Apple的产 品调性。而圆角具有了亲和力的同时失去了一些稳重感,尤其较大的圆角会让产品很难有“高大上”的视觉和心理感受,这也就需要设计师根据不同的场景需求选择不同的元素展现方式。例如下图:国外的一款针对高端用户的电商产品,尖角的使用让整体页面变得“高冷尊贵”。

2、箭头的使用规律

右箭头-进入新页面

在iOS系统中,右箭头一般代表着跳转到一个新的页面,其实箭头也有一定的作用是来通过这个元素丰富页面的布局,当然前提是需要跳转新页面的时候。当信息过多或者布局受限时也可以不加箭头,通过标题加粗或者其他方式让用户知道可点击即可。箭头的样式没有固定规范,根据界面风格或者信息层级的重要程度来定就可以,信息层级较弱,则箭头也较弱,相反则同理。

右箭头还有一种功能是指引用户右侧有隐藏内容可以横向滑动,然而如今更多的是通过遮挡住的未显示完整的图片或者文字来给用户传达横向滑动的信息。总而言之,右箭头在界面设计中起到锦上添花的作用,虽然有很好的提示效果,但还是要慎用,避免过多的不必要的箭头造成用户的晕头转向。如下图所示,大标题的“更多”按钮由于层级较低并且在界面中出现的次数较少,所以使用了右键头来强调可,点击性。而右侧的列表页由于信息较多并且列表较密集,即使没有箭头用户也具有点击欲望,这里就没有加右箭头的必要。

左箭头-返回前一页

左箭头一般出现在页面的左上角,起到返回前一个页面的作用。当然有些APP也习惯把返回按钮放到左下角,这都是设计师主观去设计的。当然不太推荐设计师在这种用户根深蒂固的操作习惯中做改变。如下图所示,左图的返回箭头在界面底部,单手操作时更易点击然而用户习惯受到挑战。右图返回箭头常规性的放在左上角。

上下箭头-展开与收起

下箭头一般在用户界面中代表着“展开全部”的意义,当界面中信息过多需要隐藏而又不想让用户单独跳页面查看全部内容时,展开与收起功能成了最佳交互选择。理所当然,上箭头一般代表着“收起部分内容”的意义。

圆形箭头-刷新、同步

一般圆形循环箭头常见于刷新页面或者换一-批内容的操作。当然还有用作同步消息记录或者其它同步信息的按钮。

3、投影的使用规律

投影在界面设计中是一把双刃剑,用得好,会让界面多很多层次感,让界面更生动活泼,而用不好就会让界面变得脏与躁。首先投影适用于在大的信息卡片.上增强立体感而不是琐碎的元素上,其次可以用在界面需要上下层级区分时,例如标题栏或者抽屉栏使用投影可以明确空间上的上下层级关系。注意单个产品中投影的属性要保持一致,也不要在有投影的卡片,上再叠加新的投影卡片,否则会让界面层次过多反而变得降低阅读效率。

投影尽量不要使用纯黑色

很多设计师喜欢把投影设定为黑色然后调整透明度,然而这样很容易让界面变脏,尤其背景有色彩倾向的时候。推荐的投影颜色是吸取背景色,然后把明度与纯度降低一些即可,保留一些背景色的色彩倾向,可以让整个画面更和谐统一。如果背景为白色时可以稍微偏一些产品主色的色彩倾向,当然要注意度的把握,色相不可过于明显。

根据不同情景选择投影强度

一般界面设计时投影的强度都不会太重,弥散式投影就是其中常见的做法,只需达到层级区分的目的即可,过于明显的投影会适得其反,让用户的视觉反而被过强的投影抓了过去。而在做视觉banner或者H5时,强烈的肯定的投影又成了一种特殊的视觉表现技法,这就需要设计根据不同的情境选择投影的使用强度。

高斯模糊制作投影

除了使用软件内的图层样式制作投影之外,还有一种常见的方法,就是通过高斯模糊手动制作投影,通过钢笔工具或者图形工具画出投影的形状,然后选择高斯模糊,调整透明度后至于需要投影的元素下方。这种制作投影的方法有个好处就是可以自己设计投影的形状,让投影更生动起来。

4、不同字体的性格及适用场景

黑体

黑体以及其演变体做为无衬线体的代表,特点是笔画简单,横直均匀,在电子屏幕内较易识别并且充满现代感,多用于电子屏幕内的大篇幅正文。

宋体与楷体

这两种字体在从前的书籍印刷中也多用于篇幅文本,然而现代的设计都以简单为主,所以宋体与楷体多用于中国风或者复古风格的营造,不宜在电子屏幕内大篇幅出现。

圆体

圆体和其演变体相比其他字体来说多了几分圆润,这也就如前面所讲的圆角与尖角,圆润多了亲和力却少了几分力道,多用于孩童类产品或者青春少女派气息营造。

书法体

书法体由于个人风格成分过多,导致识别感较差,所以基本不用于篇幅文本甚至偏长的标题,多用于短标题营造中国风,或者刚劲的书法体也常用于形容男儿的气概。

特殊字体

特殊字体本就容易引起视觉上的注意,所以在做活动页面时,除了需要设计的主标题,其他字体尽量常规,过多的特殊字体会使页面对比过多,而且在选择字体的时候,多想想这里有必要使用特殊字体吗?如果需要,需要什么类型的字体?而不是为了改变字体而改变字体。

5、图标的表现形式以及适用场景

预见性

图标的存在的最大意义是为了增强用户获取信息的效率,所以一些图标为主的功能入口要做到脱离文字也可以让用户通过图标了解到入口的属性。如果画出的图标仅仅追求轮廓或者形状的美观而失去了识别性,那么就有些本末倒置了。一些表意比较抽象的图标如果很难通过图形去让用户一眼识别,就可以尽量的去贴合表意,进行相关元素的联想。当然有些文字内容为主的装饰性图标就不需要这么强的识别性了,但也要贴合文字内容主题去设计。

美观性

保证识别性的前提下尽量的做到美观,是一名设计师的职责所在。单个图标的美观除了常规的造型与配色之外,更多得体现在细节当中。这里讲几个比较重要的细节,首先一定要想清楚各个图标所要表达出的意义,复杂的图标如果放在不重要的位置并且面积很小就会显得不美观,而太过简单的图标如果放在主要功能入口也会显得粗糙不精致,所以每个图标符合自身的表意是美观与否的重点所在。以下图为例,主要功能入口的图标与个人中心页的文字装饰性图标相比,就多了一些细节在里面。

统一性

由于一个产品内图标的数量较多,所以图标的统一~性就显得尤为重要。统一的图标可以提升产品的品质感、信赖感,并且同一属性的图标如果保持样式上的统一可以降低用户认知成本,提升用户的使用产品时的效率。首先要保证同一属性的图标从风格、视觉大小、粗细、断点、圆角、复杂程度、特殊元素上的绝对统一。风格的统一就不再多说了,面性、线性还是线面结合这个是最基础的统一,其次就是视觉大小的统一,这里需要解释一下为什么要称之为视觉大小呢?其实人的视觉也是有误差的,完全保证两个图标的宽高相等其实并不一定协调。

总结

细节并不代表着多元素,一个设计师对于细节把控较好的前提是理解这些细节控件以及技法的表意,并且在合适的场景使用合适的控件跟技法。这是界面设计中对于细节最基础的要求,也就是首先要做到在细节上不犯错。而至于如何让界面通过细节出彩就需要进阶性的举一反三了,其中最重要的一点就是在将界面打散并了解透彻后在设计页面时尽可能的顾及到各种用户使用场景,细节真的可以决定成败。

其实关于UI设计的细节问题远不止以上介绍的这些,最重要的是UI设计师能够多站在用户的角度来体验,这样才能做出更高质量的产品。以上就是优赞关于UI设计细节的介绍,如果大家还有什么疑问的话可以通过优赞云小程序或是安徽优赞科技官网联系我们,优赞会为大家一一解答。


工作时间:周一至周五
AM 08:30-PM 18:00

联系客服 ①联系客服 ②联系客服 ③
客服
有什么可以帮助您?