如何建立一套 UI UI设计规范范

???1、UI是什么?

不说师,就连设计师,很多人都以为只是P图的美工,这里有必要先明确一下UI设计师的概念。

维基百科对于UI定义:

UI,也即用户界面(UserInterface,简称UI,亦称使用者界面)是系统和用户之行交互和信息交换的媒介,它实现信息的内部形式与人类可以接受形式之间的转换。因此,UI设计师也就是设计用户界面的人。

毫不夸张地说,在颜值当道的年代,UI设计师的水平,直接决定了互联网产品(网站、App、网上店铺等)的颜值。无论产品的质量怎样,用户接触产品的第一幕,就是UI设计师给产品设计的这张脸,而像我这种“颜狗”,一旦产品的颜值达不到我的标准,下一步就是关闭/卸载。

一个好的UI设计师,能润物于无声,在浑然天成的设计中为产品注入新的价值,绝不是普通的打杂美工。

2、UI设计师的基础修养

在进入一个未知的领域前,我总倾向于先梳理这个领域的架构,待有了比较全面认知后再深挖。这其实也是大学专业课程设置的思路,先学习一门导论课,了解基本概念,再进入细分领域。

学习UI设计也是一样,先对整个设计专业有总体认知,再去学技法层面的内容、规则,慢慢把知识库填充完整。如果有条件,可以尝试了解一个新的互联网产品出炉的工作流程。这样,在局部学习前,就能对重难点、课程框架都心中有数。

如果说程序员一天中大部分时间都在码代码,那么设计师的时间都留给了Photoshop、Axure、 Illustrator,After Effects涂涂修修确实是常态,而这里,也是“美工”称呼的发源地。

?娴熟的技法,是完美展现设计作品的必备条件,作为UI设计师,也应当熟练掌握这些常用软件。稍低一点的要求,是至少能精通其中一款软件,各种操作都已经形成自然反应,其他软件也能通个七八分。不过,学完这些软件之后,切忌炫技,学到这步,你只是学会了修图,还只在美工的地步,并谈不上设计。

有人以为,设计师只要去网站找一些素材,借助工具进行修饰即可,其实这只能锻炼你的借鉴能力,当你的技法娴熟到一定程度,就可以尝试临摹。通过临摹,一则用来强化技法层面的能力,二来也能提升新手的创新能力。

临摹的内容,可以有两方面选择:一种是系统自带的图标。比如Mac OX、Windows,或者移动端、的原生图标,都是精心打磨过,既能帮助新手了解平台设计规则,又能在临摹中逐渐巩固常用软件的技术。另一种则是行业牛人的设计作品,捉摸他们的设计风格、思想和细节,都能加深对设计的认识

在移动端,连每款机型的分辨率、状态栏高度、导航栏高度、图标尺寸、字体、颜色值都有严格的规定。这些平台的设计规则,在搜索引擎上都能被检索到。

作为设计的上游,产品经理常常会直接发需求文档给设计,能读懂产品文档、快速分析需求,定位出风格、色调、元素,最后迅速把产品需求视觉化,就是产品经理们最爱合作的设计师了。

3、UI设计师的进阶修养

先来看两个肥肠火热地知乎问题:国内有哪些非常有设计感的 App?国外有哪些非常有设计感的 app?为什么我们青睐每日故宫、榫卯、网易云这类应用?除了应用本身生产的优质内容外,设计感是很重要的一点,君不见多少用户赞美良心设计。

→_→那么,什么是设计感呢?投射到设计师身上,大概就是设计师自身的审美意识了。

至于审美意识要如何培养、提高,这就跟你去问文学家要如何提高写作能力一样,他大概也是懵逼的。日积月累地浏览、学习、思考、联系,大概就是逐渐提升的可能途径吧。

从前,除了设计界面的UI设计师之外,互联网公司会专门设置专门的用户研究中心来处理用户体验的种种问题。但如今多元的趋势下,一个互联网产品的视觉设计,需要懂一点产品、懂一点用户体验,才能更有效的推进合作流程。同时也会培养自己多元化的思维方式(用户研究以缜密的逻辑发展,而UI设计则更加追求审美)。

分不清交互和UI的人,可能一抓一大把,事实上,这还是有区别的。从一般意义上说,UI主要做的是图形用户界面,也可以称为GUI设计师;

交互设计主要做处理点事人机互动的界面,任何与机器打交道的过程,都需要交互设计师来参与。但坦白说,现在的App中,有多少操作能把UI和交互完全清楚地剥离开来呢?

一个好的产品,需要美观的界面和顺滑的交互,也就离不开设计师两种能力的相辅相成了。尤其现在,设计趋向的时期,只要遵循,交互设计甚至能出了设计稿后直接给开发去实现,单纯UI设计的存在感日益弱化。

下面推荐一些适合入门的书籍与网站,以供参考。

这本书已经了好几版了,能这样一遍遍修订出版的,除了学生用的教材,就是业界的圣经了。

这本书主要讲的是如何通过网站设计来提高网站的可用性,除了外,也包括了一些用户心理研究等内容,语句晓畅,读起来十分轻松。

里面的案例虽然有点久了,但经典的案例永远不会过时。作为初入学者,能从一本书里看到整个领域的大局,也有逐渐养成设计师的思维,是入门启迪型书籍。

《写给大家看的设计书》

短短200页,门外汉读起来也不费力,但读完这本书你会明白设计的重要性。另外,这本书的排版、文字编排也很有设计感,读起来更加舒服。

《破茧成蝶:用户师的成长之路》

前面的书是理论型的,这本是则比较注重实践,结合本土互联网公司案例解释了很多落地的问题,甚至还有具体岗位介绍,面试细节,工作流程等,可以作为工作的工具书。

通过搜狐新闻客户端UED团队的设计过程,完整展现真实的设计流程。全书分为三个部分。

第一部分为“交互设计”,主要总结了大局观、操作流程简捷、形式新颖且统一、各种特殊情况等交互设计要点。

第二部分为“视觉设计”,阐述了界面、颜色、图标、质感、动画、等具体方法。

第三部分为“他们眼中的优秀设计师”,

通过产品经理、程序员、运营、市场经理的视角,阐述了如何成为一名优秀的设计师,同样是1-2岁的设计师学习的好书。

灵感枯竭的时候,觉得自己审美不够的时候,都可以去下面网站逛逛,寻找灵感,提高审美,陶冶情操。

下面是互联网公司UED部门网站:

干货很多,值得学习,百度搜索名称

百度用户体验中心UXC

网易用户体验设计中心UEDC

各种榜单、推荐应用的账号上新出来的App都可以关注,App集邮能力,就是你资历的一部分,很多超越也是在巨人的肩膀上改出来的。

现在主题设计、App皮肤设计各种比赛到处都是,有一定技术之后可以参加比赛,都是锻炼人能力,崭露头角的好地方,作品被选上的话就直接拿奖金了。

虽然听上去有点微妙,但临摹能力、技术能力,这些都能在接私活中慢慢培养起来,而且还有真实。很有可能,你之后面试的作品就是私活带来的。

既然要入行,当然要去里面自己体会下个中滋味,如果有幸去了大公司,很好你就能熟悉一套规范的设计工作流程;

如果去的是小公司,那你可能就要成为独当一面的全能手了。总之,出去历练,是走向社会的第一步。

初入行的你和年薪XX万的高级设计师之间有多少差距?

这里贴上facebook的产品设计师总监Julie Zhuo用草图解释初级设计师和高级设计师差别的文章,三个对比图,简单明了但发人深省,自我感觉良好的时候,可以上来看两眼醒醒脑。从工作流程上来看,初级设计师就像亢奋的小精灵;高级设计师则在疯狂中有规则。

在设计追求上,初级设计师追求设计美感;高级设计师则创造新的价值。

在解决问题上,初级设计师往往脱离实际;高级设计师则更贴近产品实际。

很多人说互联网寒冬来了,眼看着找不到工作的学弟学妹逃离北上广深,缩招裁员越来越明显,

就极力游说周围的人别再从事程序员、设计师、产品经理等与互联网相关的岗位。其实我始终不太赞同这个观点,这只是前几年互联网过度乐观膨胀发展后终于回归理性而已。回归理性,意味着已经过了人有多大胆,地有多大产的时代。回归理性,意味着行业从野蛮生长逐渐转向遵循市场规律。回归理性,意味着企业对人才需求仍在,但要求渐高。

所以,做一个不那么恰当的比喻,多才多艺的设计师就像一线城市的房价,尽管开价很高但还是供不应求。学艺不精的设计师就像十八线城市的房价,在一路下跌的颓势再也硬不起来。核心技能点是人才流通市场上永远的硬通货。如果你想打算转行UI设计或者想早点学好UI设计,最好的学习方法就是报班系统学习。

}

  曾几何时,每次交互稿都是徒手画,或者截个图在现有的界面上改造。渐渐感到同一平台,每个版本都有很多重复劳动,是时候做个交互组件库了。今天@imsilentfish 以网易云音乐为案例,给大家聊聊如何打造一个超实用的交互库!

  什么是组件库?就是类似axure左侧栏的这一坨标准控件,方便直接拖拽使用。

  但如何制作满足自己产品需要的交互组件库,一开始是模糊的。最初只是根据自己的需要随便列一些出来,在做的过程中逐渐清晰。

  交互组件库的作用:

  使交互文档具有统一美

  哪些东西可以做成交互组件?

  只需记住一点:当你感觉到某种UI组合,每次都需要重新画一遍的时候,就可以考虑把这种UI组合做成交互组件。

  上面所说的“重复劳动”对不同人来说可能定义不尽相同。比如对我来说,即使把Tab的选中状态变一下,也是一种重复劳动。那我就会把不同Tab的选中状态都做一份。这样等到要制作“我的音乐”相关交互的时候,直接把下面第二个组件拖过去就可以了。

  但对于某些Tab组合来说,每个Tab底下的内容可能是差不多的,做交互的时候往往只需要表达第一个Tab下的页面就可以了。这种我就只把第一个Tab的选中状态做一下。总得来说,怎样对自己方便就怎样做。

  交互组件应该具备的特点:

  组件组件,最大的一个特点就是可组合性。整理的时候,思考哪些UI组合是不同页面都会共用的,把这些元素剥离出来,就成了交互组件。根据自己的经验,我会把组件归为几大类:

  另外,一些常用的主界面和内容页我也会做成组件。这样当我要拿搜索页说事儿的时候,就可以直接把整个搜索页拖过去,而不需要花时间再搭一遍积木了。

  单个交互组件应该具备的特点:可编辑性。PNG图标、文字、选中……每一个元素都是可以单独编辑的。

  尽量以黑(性)白(冷)灰(淡)风格为主。

  如何把各种组件想全?

  不用想全,边做边补。所以不同平台的交互组件库应该有专人维护更新,才能保证组件库始终好用。这点其实知易行难,一定要提醒自己“磨刀不误砍柴工”。

  组件边上需要写说明文字吗?

  个人喜好组件边上不写任何说明文字,组件的名字已经反映在axure文档的侧导航上。只要侧导航分类符合心智模型(好找),页面上清清爽爽的组件(方便拖拽),就能满足我的需求了。

  组件库是给画交互稿的人用的,不是给别人看的。给别人看的是另外一种东西,交互规则库,那种需要说明文字。

  因此,判断一个交互组件库是否好用的标准是:

  你自己是不是经常使用自己的组件库

  别人乐不乐意使用你的组件库。

}

学UI有这些就够了!精品 干货 在线反馈 大神陪你成长!

说出你的愿望,不定期视频分享

这里没有门槛,你可以聊聊设计,分享干货,社区是你家,一切听你的!

学习路上并不孤单,我们陪你共同进步

知道我的人无需多言,不知道我的人何必多言

有两种人,一种学识渊博,乐于分享,另一种锐意进取,渴望探索。...

这个人很帅,什么都没留下

}

我要回帖

更多关于 UI设计规范 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信