来源:uimaker.com 作者:Eric
软件:Adobe Photoshop / Adobe ruler
时间:2013年7月
历时:3周
站酷:http://ericplan.zcool.com.cn/
在设计这套主题的时候,我总结了移动端界面设计的一系列重点,分别是 1、识别性 2、色彩 3、造型 4、统一性和 5、屏幕优化。
1、识别性
识别性的作用是首位的,设计图标的初衷是为了高效、通用的解决人机交互的难题,在智能系统中数量众多的功能使人难以快速完成任务,图形化的表达则解决了这一问题。 图形可以跨越种族、价值观、教育程度的鸿沟,使用户获得更为优雅的用户体验。
2、色彩
色彩可以直接影响人的情绪。高明度的色彩给人带来光明、温馨、正面的印象;而低明度的色彩则给人以稳重、神秘、未知的感受。色彩的冷暖则更直接的影响人类的感受,冷色调有利于缓解、镇定,给人以放松。暖色调则意味着热情、兴奋和激进。这套图标的选色我使用了高明度+高纯度+对比色的搭配,图标之间的对比进一步加强,在无痛的体验中迅速找到自己与心里模型相同的图标。
3、造型
外轮廓的造型我使用了圆角+矩形的搭配,并调整了圆角的曲率,使圆角与直线交接更加圆滑。统一的圆角矩形可以带来整齐有规律的印象。
识别形(内形)这里,我是坚持使用拟物化设计的,因为设计并不同于绘画,设计面向的是广泛的用户而不是小众的审美,Flat Design有其简洁之美,但在简洁的同时也带来了识别性的下降。最终我使用了拟物化设计。
4、统一性
即画面的和谐统一,图标的色彩、造型、识别性会使其具有识别强度的问题,有些黑白对比强烈的图标会跳出画面,在视觉上会比较突出。识别强度应当是大体在一个程度上的,否则会导致满屏的杂乱,失去主次。
5、屏幕优化
移动端显示设备正由hdpi向xhdpi甚至xxhdpi进化,分辨率、色彩还原等不断革新。在800*480的屏幕下,图标的细节或许不甚清晰,但是在720、1080的屏幕上,图标的细节将会栩栩如生的展现。设计这套图标的时候我特意为屏幕做出了优化,细节更加丰富,色彩更加饱和。
上面是我总结的一些经验,有很多的不足,希望各位朋友能与我交流指正。