• 登录
社交账号登录

精致的UI界面,都少不了这14个设计细节!

今天小多要给大家分享14个详情页设计小技巧,主要针对0基础小伙伴们的,有一定基础的也可以复习。

在做详情之前得清楚设计详情页的主要目的。一般情况下是展示产品卖点与传递产品信息从而形成一定量的转化。

所以在制作详情页的时候得时刻记住自己主要想表达的是什么,在信息传达到位的前提下,可以检查一下一些细节。

1
一屏的尺寸

精致的UI界面,都少不了这14个设计细节!(图2)
鉴于目前95%的详情页用户都来自无线端,所以我们在做详情页的时候有必要了解目前自己工作主要使用的平台的尺寸是多少。这里以某宝为例,手机用iPhoneX,计算出了一屏可展示的高度,这样自己在做详情的时候就知道多高比较合适了。

2
竖屏思维

精致的UI界面,都少不了这14个设计细节!(图3)
既然用户使用场景是手机,那么在制作详情的时候,尽量用竖着阅读的方式去制作,而不是一味的继承电脑端的横屏思维。另外小建议:最小字体不小于18px。

3
图标设计

精致的UI界面,都少不了这14个设计细节!(图4)
图标在传达信息比文字而言效率要高很多,也更容易被记住。在使用的时候注意统一性,切忌面性图标和线性图标混合使用。并且,在使用线性图标的时候,记得统一图标的粗细。

4
关于人物肖像

精致的UI界面,都少不了这14个设计细节!(图5)
当需要出现多个人像的时候,最好使他们形象大小、方向、色调一致,眼睛在画面的高度最好也统一,这样有利于画面和谐。

5
图形

精致的UI界面,都少不了这14个设计细节!(图6)
圆形最好不要人为拉伸,因为这样并没有任何意义,并且展示出来还会以为是设计不够细心造成的。

6
圆角矩形

精致的UI界面,都少不了这14个设计细节!(图7)
关于圆角矩形的大圆角,不是不可以用,但是大部分人用的不好。所以稳妥一点,推荐圆角小一点,或者拉成半圆,会大气很多。

7
投影

精致的UI界面,都少不了这14个设计细节!(图8)
黑颜色的投影用的比较多,也很好用。但是有些时候换一种方式会出现更好的效果,比如试试添加深红色投影,这样看上去是不是就更干净一点了。

8
按钮&搜索栏

精致的UI界面,都少不了这14个设计细节!(图9)
凭感觉做出来的人一般都是从业很多年的设计前辈。如果不知道为什么别人做出来好看,可以试着分析下按钮的负空间,调整一下与单个字体之间的比例,做出来的按钮整体效果要比之前的大气哦。

9
箭头

精致的UI界面,都少不了这14个设计细节!(图10)
很多初学者习惯偷懒用英文的符号代替,但是往往细节决定成败。随便画一个矩形,删除一个锚点,旋转45°就能画出来,记住要统一成文字的笔画粗细。

10
字体搭配

精致的UI界面,都少不了这14个设计细节!(图11)
在对于字体个性不太了解的情况下,黑体搭配黑体、宋体搭配宋体,是不会有错的(黑宋搭配是比较难掌握的)。但是搭配的时候需要注意,英文在同字号的时候行高没有汉字高,这时候就需要加大1-2个字号,同时字重需要匹配。
11
标题与正方

精致的UI界面,都少不了这14个设计细节!(图12)
标题与正文,想要搭配的好看,前期推荐用计算器,固定好标题文字大小或者内文文字大小,然后用1.414、1.5、1.618、1.732、2、3等比例进行运算。
内文的行距也是同样的道理,这里推荐大家文字大小用偶数,大小变换输入数值。这样可以在最后导出图片的时候,避免某些意料之外的瑕疵。

12
辅助线

精致的UI界面,都少不了这14个设计细节!(图13)
推荐拉辅助线的是按住shift,辅助线会以1、10这样的整数变化,不会出现小数点的辅助线。避免在对齐的时候出现1px的误差,被说成是粗心的失误。

13
阅读顺序

精致的UI界面,都少不了这14个设计细节!(图14)
试试用1、图、文字的顺序,跟图、1、文字的顺序阅读,大家不难发现后面这种阅读步骤更流畅、更能带来良好的用户体验。

14
标题推导

精致的UI界面,都少不了这14个设计细节!(图15)
当你的详情页中,有多屏视觉页展示的单页,且文字适合排在上方的时候,尽量让这个文字在每屏中的位置一样,这样会让你的设计看起来更规整、更有设计感。
收藏