手机客户端UI设计规范模版

2016-02-17 00:48 16 1 收藏

今天图老师小编要向大家分享个手机客户端UI设计规范模版教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - 平面设计 】

UI设计师的视觉设计工作中,一半是效果设计,另外一半是切图切图再切图,调整调整再调整的过程。在给与视觉资源的时候,往往会碰到这样的问题:比如有个公共的title bar重新修改后,需要跟负责每个模块的开发人员都通知一遍;再比如有个列表项的字号或色值重新定义后,需要去查看是否还有同类型的其他页面的列表项也要跟着改过来。重复的劳动工作不仅浪费时间,也显得你和开发人员没有一点默契可言。

举个例子,如下,tab bar的样式和每个标题的颜色和字号需要重新设计调整,而同时有三个开发人员会用到tabbar资源,以及统一的字号颜色。设计师当然要保证同功能的bar都保持一样,但代价就是将改动说明重复三遍:A童鞋呀,这个bar的样式变了,bar标题的颜色字号也变了;B童鞋呀,这个bar的样式变了,bar标题的颜色字号也变了;C童鞋呀,这个bar的样式变了,bar标题的颜色字号也变了......

手机客户端UI设计规范模版,PS教程,图老师教程网

解决办法:

如何做到一拖三的效果呢?笔者在此分享淡定应对多个开发人员共同向你寻求资源的困境,并能统一管理调配这些资源。

(1)明确资源有哪些?建立资源库;

手机客户端UI设计规范模版,PS教程,图老师教程网

(2)定义模块。

对模块进行分类并定义,比如我分的大类有7个,包括:background/bar/list/control/tag/content/operate list,

原则:(1)对于公共模块要做到不重复也不遗漏,不然就失去定义模块的意义,比如一个客户端中有关list的样式可能就有好几种,一行的、两行的、三行的等等,都要查漏补缺;(2)每个模块中尽量保证字号色值、左右上下间距都包含,因为开发人员找到对应的公共模块后,可以迅速获悉这几个方面的信息,迅速开发。

手机客户端UI设计规范模版,PS教程,图老师教程网

手机客户端UI设计规范模版,PS教程,图老师教程网

再次声明以上规范好处(对比以前每个页面进行标注的做法):

手机客户端UI设计规范模版,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

(1)即视觉调整的工作量大概可节省一半。即一个设计师对应一个统筹资源的开发人员,当有一个小的变动(如title bar的样式或字体颜色)时,不用所有人员都通知一遍,直接联系该开发人员即可;

(2)视觉设计师交接时,可以减少沟通成本;

(3)加强了同一类型设计部件的统一性。设计师也会大意的时候,即在同一类型的设计部件中,设置了不同的参数,导致设计效果图本身不统一;

最后谈一下该规范适用情况:

(1)一个设计师既做交互又做视觉;

(2)视觉重复页面比较多;

(3)当有其他设计师交接;

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

来源:http://www.tulaoshi.com/n/20160217/1576983.html

延伸阅读
随着悄悄散去的新年硝烟,又投入到新一年的工作中。大家在漫天纷飞的红包中抽到奖品了吗?(你懂的) 不过回想春节,或许在家中吃喝玩乐的优哉游哉,或者在途中跋山涉水的观风问俗。但与此同时,大家的慧眼有没有注意到新浪微博有了哪些视觉变化,手机app有了哪些更新呢? 当然。大家的眼睛是满血的。相信大家打开微博app后,是一幅回家团圆的剪...
导读:本文主要讨论手机手机客户端的两种主要的界面布局与设计方式,对于手机设计师来说,此类文章比较少见,当然其中对于用于体验与可用性的实现依然很普遍。 手机产品设计与传统的桌面和web产品设计相比,最显著的约束是 设计空间的急剧缩小 。打个比方,这就像从一个100平米的房子搬到5平米的单间,东西没少一样,可以施展的空间却小了几十...
手机百度客户端清除搜索   1)首先打开百度客户端软件,进入百度客户端首页,点击三点按键。   2)在显示出的功能列表中点击设置按键,进入设置界面后,按隐私设置按键。   3)进入隐私设置界面后,点击清除搜索历史按键,然后在显示出的界面中按确定按键。这样百度客户端搜索历史就会自动清除。  
手机力高答题客户端怎么答题   力高答题怎么答题? 1、打开力高答题app并登录成功进入首页,在首页中,点击开始答题; 每次发布的考试均有三次答题机会。 一旦开始答题,操作不能后退。 答题完成后可到个人中心查看成绩。 2、进入答题界面进行答题,用户只需要选择正解的答案,即可进入下一题哟,时间为1...
招行手机客户端朝朝盈怎么用   登陆招行手机,点开账户查询,将看到朝朝盈选项,点击开通,按提示操作即可。点开帐号总览就可以看到朝朝盈。 前朝朝应年化收益为5.4%,在同类产品中算中上选择。

经验教程

797

收藏

22
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部