详细设计前必须了解设计细节页面的主要用途。一般而言,是产品卖点的展示与产品信息的传递从而形成一定量的转化。
因此在制作细节页面时必须时刻记住自己主要想表达的是什么,在信息传递到位的前提下,可以查看一些细节。
1。
屏幕的尺寸。
考虑到目前95%的详细页面用户来自无线端,因此我们在做详细页面时必须了解目前自己工作中主要使用的平台的大小。
举一个例子,一个手机用iPhoneX手机,计算出了一屏可以展示的高度,这样自己在做详细资料时就知道要多高。
2。
垂直屏幕思维
由于用户使用的场景是手机,所以在制作细节时,尽量采用竖向阅读的方式来制作,不要一味地继承电脑端的横屏思维。其他小建议:最小字体不要小于18px。
3。
形象设计
与文字相比,图标传递信息的效率更高,而且更容易记忆。用时注意统一,切忌将面状图标与线性图标混用。而且,当使用线性图标时,记住统一图标的粗细。
4。
有关人物的画像
多幅人物出现时,最好使其形象大小、方向、色调一致,最好在画面的高度上统一,这样有利于画面和谐。
5。
图表。
圆圈最好不要人为地拉伸,因为这样没有任何意义,而且展示时还会认为是设计不够细心所致。
6。
圆角矩形
至于圆角矩形的大圆角,并非没有用处,但大多数人都不能用。因此,稳定一些,建议把圆角小一些,或者拉成半圆,会大气很多。
7。
投射。
黑色投影用得比较多,也很好用。但也有一些时候,换一种方法可以获得更好的效果,例如尝试添加加深红色投影,这样看起来是否会更干净一些。
8。
按键&搜索栏。
靠感觉做出来的人一般都是从业多年的设计前辈。若不知道为什么别人做出来好看,可试着在下方分析按钮,调整下按钮与单个字体的比例,做出来的按钮整体效果要比前面大气哦。
9。
箭。
许多新手都习惯用英文的符号来代替懒惰,但细节往往决定成败。随意绘制一个长方形,删除一个锚点,旋转45°即可绘制,记住要统一成文字的笔画粗细。
10。
字型搭配
对字体个性不甚了解的情况下,黑体搭配黑字,宋体搭配宋体,没有什么问题(黑宋搭配比较难掌握)。
但搭配时要注意,英文在同字号时的行高没有汉字高,此时需要加大1-2个字号,同时字重也需要匹配。
11。
题目是正确的。
题目和正文部分,要好看搭配,前期建议用计算器,固定好标题文字大小或内文大小,然后按1.414,1.5,1.618,1.732,2,3等比例运算。
同理,内文的长度也一样,这里建议每个字的大小用偶数,大小变换输入数值。这就使得在导出最终的图像时,避免了一些意想不到的缺陷。
12。
附属线路
建议拉辅助线的就是按住shift,辅助线就会以1,10这样的整数改变,没有小数点的辅助线。当对齐时,避免1px的误差,被称为粗心的错误。
13。
读次序
尝试1、图、文的次序,按图、1、文字的顺序阅读,大家不难发现后面的阅读步骤更流畅,更能带来良好的用户体验。
14。
书名推导
如果在详细信息页面中,有多屏显示的单一页面,并且文字合适排在上面时,尽量使文字在每一屏幕上都处于同一位置,这样会使您的设计看起来更整齐、更有设计感。