搜索
UI走进UED视觉设计_王倩CONTENTS目录二、规范篇：移动端设计规范三、工具篇：工欲善其事，必先利其器五、写在最后一、概念篇：什么是UI四、思路篇：多看、多想、多做概念篇什么是UI？概念篇：什么是UIUI是用户界面，是英文User和interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的关系，所以这样可分为3个方向，分别是：用户研究（研究人）、交互设计（研究人与界面）、视觉设计（研究界面）。附：UI(UserInterface)：用户界面。UE或UX(UserExperience)：用户体验。通常国外和国内的的外企叫UX，国内叫UE。IXD(Interactiondesign)：交互设计。区别于工业设计，加了个”X”。UED(User-ExperienceDesign)：用户体验设计。UCD(User-CenteredDesign)：以用户为中心的设计。概念篇：什么是UI人人与界面界面“设计不仅仅是简单的组装，控制，抑或编辑，它是增加价值和意义，启发和明晰，化繁为简，修正和劝说，包装和讲故事，甚至逗乐。”—保罗·兰德“Todesignismuchmorethansimplytoassemble,toorder,oreventoedit;itistoaddvalueandmeaning,toilluminate,tosimplify,toclarify,tomodify,todignify,todramatize,topersuade,andperhapseventoamuse.”—PaulRand概念篇：什么是设计1.清晰。清晰度是界面设计中，第一步也是最重要的工作。要想你设计的界面有效并被人喜欢，首先必须让用户能够识别出它?让用户知道为什么会使用它?比如当用户使用时，能够预料到发生什么，并成功的与它交互。2.简单。我们在阅读的时候，总是会有许多事物分散我们的注意力，使得我们很难集中注意力安静地阅读。因此，在进行界面设计的时候，能够吸引用户的注意力是很关键的，不应该为了好看而增加没有必要的设计，造成用户浏览和记忆的疲劳。3.统一。无论是从设计风格上，还是按钮的排版布局、信息提示、系统文字等都要做到统一，这样用户才会完全熟悉和记住产品的行为路径，而不会造成不必要的错误。4.人性。多为用户使用的环境、状态、习惯等考虑而进行设计，让用户深深地感觉到产品带来的周到服务。概念篇：UI设计原则规范篇iOSAndroid规范篇：尺寸PS：设计app时可以以IOS标准去设计效果图，资源有限情况下大部分切图程序可以直接适配到安卓。xhdpi同iOS@2xxxdpi同iOS@3xiOSAndroid规范篇：界面布局状态栏导航栏内容区域标签栏因为在安卓中这些控件的高度都能用程序自定义，所以并没有很严格的尺寸数值。iOS8中文：Heiti英文和数字：helveticaNeueiOSAndroidiOS9中文：苹方英文和数字：SanFranciscoAndroid4.X中文：DroidSansFallback英文和数字：RobotoAndroid5.0中文：思源黑体英文和数字：Roboto规范篇：字体*常用色值：标题/主文字：#333333辅助文字：#666666提示性文字：#999999次要文字：#cccccc背景：#ffffff#fafafa#f0f0f0分割线：#f0f0f0#e6e6e6iOSAndroid规范篇：切图输出XXX@2x.pngXXX@3x.png输出XXX.png，一般切片格式为png24*所有切图必须是偶数*可平铺部件严谨的来说：设计师或开发必须用draw9patch.bat工具制作①②④③①横向拉伸区域②纵向拉伸区域③横向内容区域④纵向内容区域规范篇：切图命名万能公式：模块_类别_功能_状态.png举个栗子：tab_button_search_normal.png说明：标签栏按钮搜索默认状态规范篇：标注模块的高度、宽度、距离文案的字体大小、颜色背景颜色不同状态链接的颜色变化工具篇工具篇：实时预览://工具篇：图标制作工具://工具篇：标注神器工具篇：切图工具工具篇：压缩软件工具篇：一键展示思路篇多看是配色上吸引了你？为什么这2个颜色搭配起来这么舒服了，我要赶紧截屏到PS里吸取它的颜色看看，整理到一个色彩搭配素材库里，下次我也这么干。还是版式设计吸引眼球？哇塞，这个圆形碉堡了，想法太好了。膜拜啊~！~赶紧保存下来。某一句广告语言打动了你，让你记忆犹新？看看人家的广告语多好，下次要记得说服公司的策划人员给点有个性的能打动人心的标题文案。细节处理的很有新意吗？这个按钮的高光做的太好了，这是怎么做到的啊，我要好好研究下。找几个人讨论下，到群里问问大家。背景烘托的很有档次吗？这飘落的绿叶和花瓣是怎么做的，是用的素材还是自己画的，这素材哪里有，我去找找看。字体变形，字体排版上很牛逼？太美妙了，想法太好了，图形切割的也很有美感，biaji赶紧收藏了。为什么排版上看着很舒服？我要好好看看，肯定有规律可循，颜色，间距，构图，字体，能想到的都想想。设计思路：多想品牌设计推导制作竞品图谱找同行业（产品经理推荐、网上查找）产品，从中挑选设计质量较好的，把页面存成图片，把logo分类整理等探访品牌感觉召集产品等重要角色，拿出之前准备好的竞品图谱，询问五个问题：您觉得目前的界面有哪些问题？期望本次改版达到什么效果？请整体评价竞品logo/界面，有没有哪些点符合咱们产品的气质？您认为咱们的产品应该体现出什么感觉/气质？如果把咱们的产品比作一个人，他应该是什么样的人？哪些logo/APP整体最贴近咱们产品的感觉，为什么？MeetOurDesignProcess关键词提炼和产品经理一起头脑风暴，从理性角度（产品定位）及感性角度（大家分别说说产品给他的感觉）提炼一些关键词，再通过“投石问路”的结果及设计师的大胆创意，想象出个性关键词。有“个性”的设计映射个性风格有了关键词，就开始找相关的图片制作情绪板，情绪板的作用是帮助设计师把关键词图形化，同时思考它是否合适？比如玄幻这个词应该是一种什么样的视觉表现？这种视觉表现体现在界面上好处理吗？太极用作logo的话，能够有哪些表现形式？一方面要通过情绪板找感觉，一方面在界面上反复尝试（试稿），然后通过权衡找到合适的风格，这是一个反复迭代的过程。“出彩”的设计设计主题设定经过多次试稿以及大家的意见，设定设计主题，注入灵魂。设计方案推演通过设计方案推演（大家给建议）不断改善，在这个过程中设计主题越来越清晰，再通过不断的推演达到最终效果。不管是做产品、交互设计还是视觉设计，都充满了无数的迭代过程。再优秀的设计师也要通过不断的修改完善自己的作品。写在最后…设计应该是由内心喜爱转化的职能，如果做设计就是因为想赚很多钱，做设计就是因为想获得更高的回报和影响力，你会发觉会慢慢失去对设计的热爱和动力。当你失去对设计的热爱和动力，你将成为没有任何竞争力的人。做一个喜爱设计的人比一切都要重要。“不忘初心，方得始终”。