记制作“小阁书柜”界面

在制作“小阁书柜”界面上,我犯了非常多的错误。

第一,流程错误,我先花了一个多小时画流程图,然后直接根据流程图画原型,导致后来缺失很多的页面和交互效果。把原型图画好之后就直接上手画视觉,导致后来很多地方极度不合理,比如,一个页面放了很多东西,字体都很小,显得很没设计感。比如,我应该多检查一下图片的问题,因为原型图上几乎没有头像等小图。这些都严重体现我的逻辑混乱,不细心和急躁。

总而言之就是前期考虑的太少。

第二,一个正确的页面体现在交互和一些像间距上,一个美观的页面,颜色和元素要尽可能少,留白尽可能多,字体大小尽可能对比强烈。

第三,页面边距小了,开始想做成通栏,因为块太多,就改成边距10px,主要是提高页面字数承载数量,后来觉得还是太挤,没有逼格。

第四,元素太挤了,不该放大的东西放大了,如“转发”图标。它并不吸引人,也并没有很精致,但我放大了。

第五,我做整套界面的时候,最初考虑到一些用户体验的问题,比如,我等级分的非常明显,想找到某个界面极度容易;我把主页设计成网易云风,使用户看到的时候会有亲切感;把通知放在首页的右上角,保证用户能马上得到系统和好友的通知,而不是很多应用那样,把消息放在“我”那一个标签里,这样还有一个好处就是能让用户直接取消掉那个红点,也会增长用户在首页的停留时间。另外,我前期的想法是“书籍”标签跟实体书柜结合起来,可以在后期增加“扫描即可录入”的功能,而在“好友”菜单,我加入一些类似于“社区交流”的想法,也是为整个产品加入了社区板块,这个是需求方提出的。我把设置等放在首页的左上角的头像里,这种设计本来是考虑到放在“我”那一个菜单里,但是考虑到很多人找设置、退出/切换账号很不方便,就放在了首页。

第六,我总是过多的在一些精确的事情上面麻烦,比如我做好了一个页面之后总是不停的调整,但是这个页面从视觉上并没有很美观,但是我追求它非常的统一。

第七,我总是苦逼的调整字与参考线或物绝对对齐,其实并不需要,字是属于块里面的,只需要考虑包含字的块和其他块统一,而再考虑字与包含它的块左或右对齐(一般不会考虑上或下对齐)。

第八,最开始的时候,我连做界面的规范都不是很懂,虽然苹果手机分@3x、@2x、@x,更不用说安卓手机,每一套都会不一样(idpi、mdpi、hdpi、xhdpi、xxhdpi),但是前期考虑好,做一套就够了(我用的是640*1136),有一些设备界面需要调整,再根据做好的那一套调整就好。当然前提得是界面所有元素最好都是矢量的(图片则为高清图片转换的智能图层)。

例如,如果以750*1334为画布尺寸,分辨率72,像素/英寸。那么在iOS的开发单位是1pt=2px(即程序员拿到的是我们px单位的标注图,自己除以2就是pt了),导出的适合Windows网页的是375*667。

字体大小为偶数,并且最小字号为20。

PS:
我设计的时候用的字体是微软雅黑。
主题可以切换成黑白灰。

UI设计规范总结

尺寸

iOS用750*1334即可;
android的尺寸众多,建议使用分辨率为720×1280 的尺寸设计。这个尺寸 720×1280中显示完美,在 1080×1920 中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。

颜色值

IOS颜色值取 RGB各颜色的值比如某个色值,给予IOS开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯,有时也用十六进制)
Android颜色值取值为十六进制的值

内部设计

1、所有能点击的图片不得小于44px(Retina需要88px)
2、单独存在的部件必须是双数尺寸
3、两倍图以@2x作为命名后缀
4、充分考虑每个控制按钮在4中状态下的样式

字体

iPhone默认字体:中文—Heiti SC,英文— helvetica;
安卓默认字体:中文——思源黑,英文——Roboto。

 

1. dpi是dot per inch,每英寸多少点,ppi是 Pixel per inch,每英寸像素数,针对显示器的设计时,dpi=ppi。
ppi计算方法是长宽各自平方之和开方,除以对角线长度(单位英寸)。原理可以自己画个矩形勾股定理算一算。
2. ppi表示显示设备的点密度,dpi表示印刷品点密度。
3. dip或dp,是安卓开发用的单位,1dp表示在屏幕点密度为160ppi时1px长度。
因为安卓设备屏幕众多不可能为每个屏幕单独开发,所以用公式 px=dp*(ppi/160)计算在不同屏幕上的像素数。
举例:HVGA屏320*480,一般是3.5寸,计算点密度为√ (320^2 + 480^2) / 3.5 = 164,约等于160,1pd=1px
WVGA屏480*800,按3.8寸屏算,点密度 √ (480^2 + 800^2) / 3.8 = 245,约等于240,1dp=1.5px。
还有更高分辨率的屏幕就不一一列举了,总之dp是为了方便适配不同屏幕的单位,在不同屏幕密度下,1dp的物理长度也相同。
iPhone X设计规范:http://www.tuyiyi.com/v/55463.html