入门走进UI模板

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