美文网首页设计产品交互设计UI/交互设计规范
给新人在做UI界面前的一些建议。

给新人在做UI界面前的一些建议。

作者: Jkarakorum | 来源:发表于2016-07-01 11:41 被阅读1375次

本文适用于刚入行的新人UI设计师,也欢迎各位大大拍砖,初来简书,不周之处还望海涵。

作为新人,我们在进行新项目的处理过程中,经常会难免犯一些错误或是走一些弯路,笔者结合自己之前做设计中的一些实际经验在这里列出一些需要注意和提防的地方,希望能够帮助大家少走一些弯路,共勉。

工欲善其事必先利其器这句话说了千千万万遍,不要不信。在确定好产品的内容、面向群体等等产品因素后,不要急于直接打开PS建立图层开始进行设计,先建立产品视觉规范

1.文字布局规范:视觉规范是指你在接下来所设计的产品中所用到所有元素的合集,包括这些元素的大小参数与将在何处何时被使用。一般的视觉规范由字号、字体、图标、颜色、布局(导航栏参数、头像框参数等)等组成。

现在UI设计都有着约定俗成的规范,作为新人我们大部分时候可以借鉴这些前辈辛辛苦苦总结出来的经验,例如导航栏和Tab taber的高度,字号图标的区分,倒角的大小,板块的分割方式等等。如果不是太偏门的产品,一般都可以在各大网站找到你心水的UI界面范例,找一到两款合适的,将你将要使用的文字(包括中英文字体,各种情况下将要使用的字号)大概的界面布局(导航栏高度、Tab栏高度、左右留白宽度、板块圆角半径等)先在视觉规范中写出来。

2.图标和颜色规范:第一步之后,你心中对将要做的事情应该有一个更明确的雏形,但还不到着手设计主界面的时候,接下来花一点时间先做图标和颜色规范。

首先是颜色,根据你要做的产品,利用各种配色工具选定一组产品颜色规范(建议先选定一种主色,一到两种辅色,然后白色,不同深度的黑色3种用于文字,浅灰色两种用于界面分割等。)确定主要板块的主要色值分布,文字界面的文字安排,按钮图标各种状态下的颜色,做一个粗略的颜色规范。

其次是图标,一款产品经常会涉及到十几二十甚至更多的图标,先把确定会用到的(例如返回,前进,Tab栏中的)图标做好,记住要统一图标外观(图标样式 空心/实心等,图标粗细等等),不要有虚边,区分优先级及各级别图标大小,列在规范当中,其中包括大小、颜色、位置、各状态下相应变化这些参数。

3.调试:初步建立视觉规范后,可以试着进行产品首页的设计,有了视觉规范,你会发现界面设计将变得异常轻松,导航栏从规范中直接拖(两个相同大小的画布中按住shift拖动图层不会改变图层相对位置),Tab栏直接拖,参考线直接画,板块布局直接上,每一步你都心中有数,知道哪儿该左右对齐,哪儿该用多大的字什么颜色,而不是一头撞去,指哪儿打哪儿造成最后改起来异常不方便的情况。

试着设计首页的过程中,遇到不顺手或是觉得需要修改的地方一定尽量追求完美,务必使得规范与产品适配,查漏补缺。之后我们正式进入页面设计过程。

4.干净分组,及时改名:一款产品永远不是你一个人就能彻底完成的,团队合作必不可少,所以你不仅需要自己看懂设计稿,也需要让别人看懂,所以在最开始设计的过程中,我建议大家就要开始养成保持PSD中图层清爽,分组明确的习惯。无论是之后你自己改稿子还是与别人合作,这个习惯都将省去你很多麻烦,而且,这也是一个优秀的设计师应该有的习惯。

5.设计过程中,时刻记住规范:

界面设计不同于泼墨山水画,它更多的需要一份严谨与规范。当你遇到任何觉得可以自己看着调的问题的时候,请想一想你的规范(例如当你在板块下面加入文字的时候,那么这个文字与上下板块的间距,左右对齐方式,字号大小,字体规格都应该是确定的,而不是靠眼睛看看随便移移;任何一个板块突出的文字或是图标都应该有着对齐方式和位置参数,就像板块标题大部分水平居中一样。)

不要有任何一个地方想当然,规范,规范,规范

相关文章

  • 给新人在做UI界面前的一些建议。

    本文适用于刚入行的新人UI设计师,也欢迎各位大大拍砖,初来简书,不周之处还望海涵。 作为新人,我们在进行新项目的处...

  • 给职场新人的一些建议

    很多年前的7月,我第一次离开校园,加入过第一家公司,开始了自己都职业生涯。7月份是公司迎新的月份,对很多人...

  • 给职场新人的一些建议

    上周去参加拆书帮的活动,忽然发现95后的小盆友都出来工作了,不禁感慨自己是真老了。算了算自己也工作快2年了,说说自...

  • 给投资新人的一些建议

    最近几天一直在思考写点东西,第一是对自己过去两年半投资理财的总结,第二对想要投资理财的新手朋友做一个正确引导,树立...

  • 给走进编剧界的新人18条建议

    其实我本身就是一个新人编剧,现在迈进这个圈子大约也已经有了一年的时间,相信诸多热爱文学创作的作者同我一样,在之前有...

  • 给职场新人和准新人的一些建议

    中午正要午休,一个实习生走过来,怯怯的咨询我关于她投简历给集团校招的事。 原来她投了简历给集团统一的秋季校招,但是...

  • 拆书--给新人一些建议

    我们每天都在跟不同的人沟通,跟父母,跟朋友,跟同事等。 像亲朋好友这样经常联系的,可以称为强联系。...

  • 给职场新人的你一些建议

    亲爱的老妹,在你昨天找我问微商相关问题的时候,我内心有些五味杂陈,在体制内工作1年多的你,应该是工资微薄,没有任何...

  • 给游戏设计新人的一些建议

    怎么才能成为一个职业的独立游戏开发者,答案大概是:“尽你所能!拼命苦干!忠于自我!”这样的话来回复,而且听上去也不...

  • 给职场新人的一些小建议

    将偶然和命运视为同一,只是年轻时的想法,久了以后自然会发现,生命的轨迹是由自己造成的。-斯蒂芬·茨威格 最近,L小...

网友评论

    本文标题:给新人在做UI界面前的一些建议。

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