IOS-APP视觉

作者: 0f2495f054ce | 来源:发表于2015-12-27 18:53 被阅读408次

    之前一直做网页,在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

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

    相关文章

      网友评论

      本文标题:IOS-APP视觉

      本文链接:https://www.haomeiwen.com/subject/iulbhttx.html