提升用户体验的 UI 设计小 Tips-新闻详情

提升用户体验的 UI 设计小 Tips


发布时间:2017-05-26责任编辑:朱明 浏览:1211


设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格、段落的排版等等,注意这些细节,我们的 APP UI 就会加分不少。整理了一些平时注意的方向,也是我们日常用到的很基本的技巧,同时注意案例中「对」与「错」不是绝对的,仅用于参考作用。

 

1、图标保持统一性

   1.png

图标是UI设计里非常重要的模块之一,最重要的一点是要保持风格统一。如果是填充型的图标,那么一套设计里不要出现线性的图标设计。其次就是描边大小的统一,定下了3px就要全套保持即可。最后图标要做到识别度和差异性。

 

2、字体运用保持统一

   2.png

字体合理运用是UI设计很重要的一点,要么字体很不相同,要么就用一款字体。像第一个案例,字体字形比较接近,但是又不是一款字体,看久了会非常突兀。其次就是要突出主视觉文案的时候,要尽量把辅助字体缩小,形成对比。

 

3、图片类APP排版方式

   3.png

   很多时候,如果需求是比较宽且走文艺气息的时候,要尝试突破原则,用一些另类的排版方式,其实也是做好设计的本质。在图片类app中,错落一些的排版会使你的作品加分不少。

 

4、辅助文字的运用

   4.png

   辅助文字的合理运用,也是提升质感和视觉的关键点。如果有一个或者多个主要的视觉要素,那么辅助的文字大小尽量比主视觉要小,颜色要比主视觉浅。比如主文字字号  24px,辅助视觉就要14-18左右。

 

5、辅助线段的运用

   5.png

   线段的作用,主要是区分信息层级。所以辅助线段一般采取浅色调处理,千万不要过重会显得很脏,拉低整体质感和层次感。

 

6、间距的统一

   6.png

间距的统一性,是排版中时刻要注意的。等距等比是保证界面干净整齐的一个关键要素。要么处处一致,要么全都不一致。

 

7、颜色的合理性

   7.png

   颜色的合理运用,是至关重要的。一个app或者一个界面尽量要保证一个主色调,一个辅色调即可。不要出现干扰或者与主色调无关的颜色,这样会导致用户质疑你到底是不是一款产品。其次就是,想让用户点击什么按钮,那么取消按钮最好弱化视觉。

 

8、该突出的地方就大胆突出

   8.png

   很多时候,对比突出做到位了,才能让用户第一跟进来把注意力集中在一个点上。比如上面第一个案例:没有形成鲜明的对比,用户进来就会不知道先把注意力集中在哪个点上,第二个是正确的作法。

 

9、让用户明确的知道当前所在位置

   9.png

   用户位置,是交互逻辑上很重要的一点。你要让当前位置足够清晰,不要让用户去猜,要用户一眼看到现在什么位置才是正确的,不要害怕对比过程,你要做的就是告诉用户,我在这里。

 

10、根据阅读顺序做设计

10.png

    人的正常习惯阅读顺序是,从上而下,从左到右,所以在做某些需求的时候,需要考虑阅读顺序这个概念,要让用户最快的时间获取到文字信息。

 

11、辅助指引的运用

    11.png

这一点是很多人忽视的,一款好的设计或者好的产品,一定要做好辅助指引工作。上面的两个登陆界面,如果再输入过程中有相应的指引,那么会减少用户出错的几率,也会减少来回点击查看这个框是干什么的次数。

   


友善工作室   供稿