APP 视觉设计视觉设计UI/交互设计规范

IOS-APP视觉

2015-12-27  本文已影响408人  0f2495f054ce

之前一直做网页,在12月1日,首次做IOS移动端的界面设计,很多网页的思维并不适用于移动端的设计。
网页端的设计空间比较大,而APP的界面大小有限,因此,让APP端的内容展示能够层次清晰、信息比例协调的展示,包括字号、颜色、线条粗细,行间距、字间距、块间距等都得认真考虑。并且APP端的制作一定要精细,甚至精确到一个像素的高度。

网页端的字体大小规范

对于移动端来说,最小可接受字号则为24px.

移动端字体规范

做APP端的设计,应该查看和体验大量APP端界面设计,这里有推荐一个

http://iphone.reeoo.com/

点击按钮的间距与大小可多做参考

对于icon的设计,应该统一、规范,可以在网上找素材,然后依据平台风格进行统一。

iconFont:http://www.iconfont.cn/

善于从网上找工具,各种插件能很大程度上提高效率。

http://www.cutterman.cn/
PS Play

其实做视觉也应该考虑到交互细节、其实是个界面的交互体验。(做一件事情,应该找到任何事情的价值)

http://www.pmcaff.com/article?id=2000000000007855

此外,在做整个产品视觉设计时,应该首先明确品牌特色,定义好规范,这样刚开始费劲,最后有一个整体的思路之后,之后的效率能够大大提升。还有栅格系统的定义,能够让整个网站更加规范,视觉统一度更高。比如说,类似下图:


栅格系统示例 某视觉规范案例

视觉规范制作参考http://www.uisdc.com/create-ui-design-guideline

http://www.zcool.com.cn/work/ZMTQzNDE4NDQ=.html

移动端尺寸:http://www.zcool.com.cn/work/ZMTQyMjc0ODA=.html

模块与模块的划分:http://www.zcool.com.cn/work/ZMTQxNjQ2OTI=.html

京东视觉规范:http://www.25xt.com/appdesign/7411.html/comment-page-1

对于信息图的设计,这一块其实也是设计到交互中的信息设计,如何将数据最直观有效传达,当然也包括简历的优化:

在线制作信息图:http://shijue.me/show_text/517492248ddf873ca1002f83

某CV

最后视觉设计可以总结:层次、细节、传达、找工具,提效率。

上一篇下一篇

猜你喜欢

热点阅读