扫一扫
海螺热血榜
( 09月 )

稿费:{{item.money}}元

好评:{{item.praise}}

品牌策划> 营销案例> UI设计在视觉方面如何T型发展?

UI设计在视觉方面如何T型发展?

17年06月12日11时01分 tripleww 来源: 转载

UI设计发展到今天已经比较成熟,各种公司企业这个岗位也普遍被大家认可,可是这不代表现在的UI设计就是将来的

UI设计。上次讲到了UI设计师怎样T型发展的前半部分,这次我们重点来讲讲视觉这块。


直接进入正题来讲一些视觉方面的经验及看法:


1、颜色


为了保持产品的整体品牌调性,我们将会使用一种主色调,两种或三种辅色,但一般选择两种辅色,选择同一色系或

者邻近的色系,比如主色是蓝色,那么我们可以选择临近色系的浅蓝和深蓝做为辅色。再加上1-2种点睛色,用来高亮

显示,提醒用户的作用,比如红色,橙色,黄色等对比色。(图1)


2、字体


经过研究及多方证实,最利于阅读的字号以及大部分人所觉得最舒适的字号大小是16px。那么,在同一个产品里,我

们将用到除了顶部导航以外的3种字体大小,分别为正文16px,次要性文字14px,提示文字12px。对于10px文字小编建

议尽量少的使用。字体的颜色也通常使用3个颜色便足以用于这个产品,深色,深灰色,以及浅色字体。(图2)


3、线条


线条所起的作用一个是分割内容,第二个是流引导,同样的内容,用横向线条或者竖向线条,用户的浏览路径将会发

生变化,所以分割线在整个app里的所用也是不言而喻的,那么我们将分割线也可以定义1-2个层级的颜色,在移动端

肉眼能识别即可,但注意不能太深,也不能太浅。(图3)


4、图标


图标能使整个app更生动,但是图标有时候单独存在又是个硬伤,对于一些抽象画的字段图标没办法更好的绘制出来的

时候我们就需要进行图文结合来描述。图标使用的位置不同,大小也会不同,甚至风格也会迥异。(图4)


比如:微信底部标签栏的图标,和顶部导航栏的图标粗细不同,风格也不同。但是不是一个app里就有很多风格的图标

,只要形成统一就行。一般图标能分为线性和色块两种,线性图标更轻盈,缺点是放大之后线条会变粗,且线性图标

没有色块图标来的表意明确。


色块图标更直观,且放大缩小不影响,可以用到iconfont里,图标将成为一种字体,比较大程度优化app的内存,缺点

是信息较多时比较冗杂。


5、排版


排版对于一个页面来说是最最重要不过了,在交互稿上,交互已经大致区分出了信息的布局,这个时候我们视觉需要

去进行“具像化”(或许前期交互就是你自己做的)。我们先将信息关联度大的内容整合在一起,再根据内容的重要

程度,以用户的视觉流进行排布,当然这个只是正常的设计流程,凡事无绝对,要懂得变通。


再说一个小窍门,就是尽量保证信息元素之间的距离相等,除非为了区分两个信息,间距一致会使整个页面更美观,

当然我们考虑做页面的时候不是能展示所有信息就是好设计,我们强调的是用户体验,那么用户不希望一眼看去都是

信息,这个时候我们需要做一些留白的设计或者信息的层级显示。


做项目碰到的问题:


1.目前采用的标注方式使用sketch的插件marketch一键导出标注


虽然不是很精确,但已经大大提高了工作效率。问题来了,开发到底看不看标注?很有意思的问题,其实只要项目紧

他们一般不会看标注,等到逻辑写完了,再来改UI的问题。


那么为了避免在页面写完后不做大的布局调整,做为视觉设计,应该在开发前期就和前端定义好布局的框架,交互,

用自定义还是系统控件,否则等开发写完你和开发说我要的效果不是这样,但是开发说已经改不了了,再改就要很大

的精力去重写(当然也可能是开发想偷懒),这里必须说一下,其实为了你我他,UI设计必须要学前端代码,否则开

发随便忽悠下你你就放弃了自己的立场,这完全是对自己,对产品不负责。


2.尽可能将页面的状态补全。


因为可能没有交互,也可能交互的文档原型没有那么细致。比如你做完一个页面发现所有字段都填满了,整个页面挺

饱满,这个时候测试的同学说了,这个字段后台可能不返回,是空,那里也是空,这样的页面东边少一块,西边少一

块还好看吗?


3.适配的问题。


运营要做活动图片,通过后台返回获取到不是由前段添加,这时候我们需要定义一个比例,不同机型等比例缩放即可


4.同时接到3个以上的需求怎么办,拍优先级?怎么排?


把内容少的,重要的部分先做,再做内容多的,重要的。最重要的还是老板重视的,必须先做!


5.能这个版本迭代掉的内容千万不要放倒下一个版本,放着放着就没了。


6.sketch的插件craft+dropbox的新组合用来制作app kit,能拖拽直接使用和编辑。


最后讲一句话:请基于场景设计!


UI设计在视觉方面如何T型发展?
UI设计在视觉方面如何T型发展?
UI设计在视觉方面如何T型发展?
UI设计在视觉方面如何T型发展?
展开阅读全部

0

0
评论 0
注册/登录后,方可发布评论