生活中有许多东西都是瞬息万变的，不变的东西并不多，躲不过的死亡，和雷打不动晚七点新闻联播。在如此复杂多变的时代，要如何做好用户体验设计呢？作为一个用户学习者，这一年半的学习，试图寻找关于用户体验设计的答案。

在设计过程中、之前和之后都要持续不断地做用户体验设计，这是一个永无止境的过程。在任何时候都要考虑用户行为，这对于设计者是一个极大的挑战。

为了产品设计始终走在对的道路之上，我总结了5个关于UI设计基础，并且用它作为为设计过程的参考。理解用户体验设计决策并为团队成员作出解释，最终落实到产品中，更是需要走很长的路。

• 概念篇：什么是UI
• 规范篇：没有规矩，不成方圆
• 工具篇：工欲善其事，必先利其器
• 思路篇：多看、多想、多做
• 写在最后
  
  

1. 概念篇：

什么是UI？UI是用户界面，是英文User Interface的缩写。从字面上看是用户与界面2个单词组成部分，但实际上还包括用户与界面之间的关系，所以这样可分3个方向，分别是：用户研究（研究人）、交互设计（研究人与界面）、视觉设计（研究界面）。

什么是设计？设计是把一种设想通过合理的规划、周密的计划、通过各种感觉形式传达出来的过程。人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。设计便是造物活动进行预先的计划，可以把任何造物活动的计划技术和计划过程理解为设计。

清晰：清晰度是界面设计中，第一步也最重要的工作。要想你设计的界面有效并被人喜欢，首先必须让用户能够识别出它？让用户知道为什么会使用它？比如用户使用时，能够预料到发生什么，并成功的与它交互。

简单：我们在阅读的时候，总是会有许多事物分散我们的注意力使我们很难集中注意力安静地阅读。因此在进行界面设计的时候，能够吸引用户的注意力是很关键的，不应该为了好看而增加没有必要的设计，造成用户浏览和记忆的疲劳。

统一：无论是从设计风格上，还是按钮的排版布局、信息提示、系统文字等都要做到统一，这样用户才会完全熟悉和记住产品的行为路径，而不会造成不必要的错误。

人性：高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并能保存设置。

2. 规范篇：

（1）尺寸

很多新人在开始做移动端UI设计的时候，往往对界面的一些尺寸规范不是十分清楚，很多时候都是凭借自己的感觉和经验去绘制界面，心里并没有一个清晰的概念，导致做出来的页面总是不那么尽如人意。

（iOS系统）中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。在iOS平台交互设计规范中都有详细的描述。

Android设备的屏幕设计尺寸：

*dpi:表示每英寸有多少个显示点

*dp：安卓系统中单位，也就是DPI-设备独立像素。系统会根据屏幕密度自动进行转换

例：屏幕密度160时，1dp=1sp=1px

（2）字体：

Ios8的中文：Heiti，英文和数字：helvetica Neue

Ios9的中文：平方，英文和数字：San Francisco

Android平台中Android4.X中文：Droid Sans Fallback，英文和数字：Roboto

Android5.0的中文：恩源黑体，英文和数字：Roboto

（3）切图的命名规范

iOS平台输出的规范为：XXX@2x.png、XXX@3x.png。其中，2x屏幕的设备会自动加载 xxx@2x.png 命名的图片资源，3x屏幕的设备会自动加载 xxx@3x.png 的图片。

Android平台输出的规范为：XXX.png，一般切片格式为png24

切图命名的万能公式：模块_别类_功能_常态.png。例如：tab_ button_search_normal.png

（4）注意事项：

Android平台不支持“-”，所以请用“_”作为连接符。

按钮一共有四种状态：

Normal：正常情况下的常态。

Highlighted：突出显示，即用户点击按钮不放时按钮的状态。

Selected：选中的状态。

Disabled：不可用状态。

3. 工具篇

（1）实时预览工具

Ps Play是一个通过WiFi网络，实时在终端设备上预览电脑上Photoshop的设计稿，可同步调试及截图保存到移动终端，并可以通过Email、微信等工具即时分享的跨终端应用。由腾讯ISUX出品。

（2）图标制作工具

Icon Template是一款运行在Photoshop中的插件，可以根据你的APP ICON，生成ios/android平台下各种尺寸的图标

（3）标注神器：

与其他切图标记软件不同的是，Assistor PS是完全独立于PS本身的，说是一个外挂更加合适，提高切图标记的效率及速度。虽然不是一个插件，但是它与PS是连通的，当你在PS选择一个图层在后，即可使用它的功能

（4）切图工具：

Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便在pc、ios、Android等端上使用。它不需要记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

（5）压缩软件：

TinyPNG使用智能有损压缩技术来减少PNG文件的文件大小。通过选择性地减少图像中的颜色数量，存储数据所需的字节更少。效果几乎不可见的，但它在文件大小上产生了很大的差异！

（6）一键展示：

一款PS插件，可以瞬间实现3D立体效果，从此告别脚本，抛弃动作，只需要一个按钮。同时提供了几十款设计模型模板,让设计稿展示更加精美!

4. 思路篇

（1）多看

多看书比如：《写给大家看的设计书》、《UI设计黄金法则》、《设计师要懂心理学》等等......，再有多看视频和其他高手的作品

（2）多想：

是配色上吸引了你？为什么这2个颜色配搭起来这么舒服了，我要赶紧截屏到PS里吸取它的颜色看看，整理到一个色彩配搭素材库里，下次我也这么干。

某一句广告语言打动了你，让你记忆犹新？看看人家的广告语多好，下次要记得说服公司的策划人员给点有个性的能打动人心的标题文案。

背景烘托的很有档次吗？这飘落的绿叶和花瓣是怎么做的，是用素材还是自己画的，这素材哪里有，我去找找看。

字体变形，字体排版上很牛？太美妙了，想法太好了，图形切割的也很有美感，赶紧收藏了。

细节处理的很有新意吗？这个按钮的高光做的太好了，、这是怎么做到啊，我要好好研究下。找几个讨论下，到群里问问大家。

（3）站在用户这边

在清晰明确的意图之下构建贴心的产品，这是你真正关注产品设计的明证。这样的产品让用户更舒服地做出选择，营造更优秀的用户体验。产品设计是否用心其实很好判断，是否诚实地设计，用心地为用户考虑。一双鞋好不好，穿着它走上十公里，当拖着疲惫的身躯回家的时候，仔细回味穿着它的每一步，就知道它好不好。而这也是我们面对自己的产品，要做的事情。

5. 写在最后

（1）易于消化

好设计应该是易于用户消化的——大脑不应该花费巨量的脑细胞来费神分析眼睛看到的东西。如果设计得易于理解，访客和用户会很快“Get it”而无需要花费半个小时来查看下方一千多字分6段解释的说明文字

这不仅仅是设计清晰易读的文案这么单纯。用户需要在适合的视觉引导下作出对的决定，内嵌12个纯文本的菜单，这样的设计是令人发指的比如（亚马逊的Fire Phone的设置菜单就这样，已经被吐槽得体无完肤了）。通过字体大小/粗细、色彩和图标来组织信息，拉开层级，可以突出重要的信息/选项，让用户更快地找到想要的东西。

想想看，你费尽心思让用户去获取的信息、去做的事情，最后会像漏斗里的水一样流走，这真的是对你的努力和产品信息的极大浪费。每个人的大脑获取信息的效率和数量是相当有限的，合理运用，别太粗暴。

（2）清晰

好的设计是诚实的，这句话也是设计大师Dieter Rams说的。除了要通过内容和设计传达你的价值观，还需要让用户明白其中的实际价值。模棱两表述和不干脆的产品是无法赢得粉丝。

明确了产品的核心价值，围绕着它将所有的内容都清晰地表达出来。用户如果不知道你的支付系统的细节，是不会毫无顾虑地点击“立即购买”的。尽管许多团队选择使用“免费使用”来获取用户信息过度到自动付款，但是这种做法真的获得用户的信任和认可么？

虽然听起来很俗气，但是解决产品清晰度问题的黄金准则，就是解释清楚，让所有的东西都透明而清晰地呈现出来，你希望你用的东西都是清晰直观的，那么你也不要去蒙蔽你的用户。

（3）信任感

好设计是应该是值得信任，也容易被相信的。在要求用户执行某一动作的时候，尽一切努力帮他们理解为什么这个操作是必要的。每一步都需要借诚实和清晰的表述来建立信任，逐步的积累，一点点提升用户的信任感。

（4）熟悉性

突破性的设计自然是炫酷无比，但是走心的设计才更好。Dribbble上炫酷的效果和全新的框架看起来不错，但是如果人点击购买按钮，那你就麻烦了。

各个平台的设计规范的存在是有理由的。虽然看起来设计规范是想让产品在各个平台看起来更加一致，但是请注意那些一致而富有粘性的设计细节，熟悉的模式、相同的图标。统一的风格，本质上营造出原生的感觉，让用户感到熟悉。

这些设计方案在实际的设备上进行测试过之后才知道是否可行，如果想在各个平台上都让用户有熟悉而宾至如归的感觉，还有很长的一段路要走的。

（5）令人愉悦

一般说来，仅有好想法是不够的，有良好的执行才能赢得竞争。设计团队执行得越多，用户需要做的就越少。复杂的问题被简化得越好，用户从解决方案中所获得的愉悦感就越强。

思考的维度越高，能够解决的问题就越多，就越有价值。不要因为职位而限制做的事情。并不是职位决定了做什么事情，而是想做什么事情，决定了能成为什么样的人。

      生活中有许多东西都是瞬息万变的，不变的东西并不多，躲不过的死亡，和雷打不动晚七点新闻联播。在如此复杂多变的时代，要如何做好用户体验设计呢？作为一个用户学习者，这一年半的学习，试图寻找关于用户体验设计的答案。

在设计过程中、之前和之后都要持续不断地做用户体验设计，这是一个永无止境的过程。在任何时候都要考虑用户行为，这对于设计者是一个极大的挑战。

为了产品设计始终走在对的道路之上，我总结了5个关于UI设计基础，并且用它作为为设计过程的参考。理解用户体验设计决策并为团队成员作出解释，最终落实到产品中，更是需要走很长的路。

• 概念篇：什么是UI
• 规范篇：没有规矩，不成方圆
• 工具篇：工欲善其事，必先利其器
• 思路篇：多看、多想、多做
• 写在最后
  
  

1. 概念篇：

什么是UI？UI是用户界面，是英文User Interface的缩写。从字面上看是用户与界面2个单词组成部分，但实际上还包括用户与界面之间的关系，所以这样可分3个方向，分别是：用户研究（研究人）、交互设计（研究人与界面）、视觉设计（研究界面）。

什么是设计？设计是把一种设想通过合理的规划、周密的计划、通过各种感觉形式传达出来的过程。人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。设计便是造物活动进行预先的计划，可以把任何造物活动的计划技术和计划过程理解为设计。

清晰：清晰度是界面设计中，第一步也最重要的工作。要想你设计的界面有效并被人喜欢，首先必须让用户能够识别出它？让用户知道为什么会使用它？比如用户使用时，能够预料到发生什么，并成功的与它交互。

简单：我们在阅读的时候，总是会有许多事物分散我们的注意力使我们很难集中注意力安静地阅读。因此在进行界面设计的时候，能够吸引用户的注意力是很关键的，不应该为了好看而增加没有必要的设计，造成用户浏览和记忆的疲劳。

统一：无论是从设计风格上，还是按钮的排版布局、信息提示、系统文字等都要做到统一，这样用户才会完全熟悉和记住产品的行为路径，而不会造成不必要的错误。

人性：高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并能保存设置。

2. 规范篇：

（1）尺寸

很多新人在开始做移动端UI设计的时候，往往对界面的一些尺寸规范不是十分清楚，很多时候都是凭借自己的感觉和经验去绘制界面，心里并没有一个清晰的概念，导致做出来的页面总是不那么尽如人意。

（iOS系统）中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。在iOS平台交互设计规范中都有详细的描述。

Android设备的屏幕设计尺寸：

*dpi:表示每英寸有多少个显示点

*dp：安卓系统中单位，也就是DPI-设备独立像素。系统会根据屏幕密度自动进行转换

例：屏幕密度160时，1dp=1sp=1px

（2）字体：

Ios8的中文：Heiti，英文和数字：helvetica Neue

Ios9的中文：平方，英文和数字：San Francisco

Android平台中Android4.X中文：Droid Sans Fallback，英文和数字：Roboto

Android5.0的中文：恩源黑体，英文和数字：Roboto

（3）切图的命名规范

iOS平台输出的规范为：XXX@2x.png、XXX@3x.png。其中，2x屏幕的设备会自动加载 xxx@2x.png 命名的图片资源，3x屏幕的设备会自动加载 xxx@3x.png 的图片。

Android平台输出的规范为：XXX.png，一般切片格式为png24

切图命名的万能公式：模块_别类_功能_常态.png。例如：tab_ button_search_normal.png

（4）注意事项：

Android平台不支持“-”，所以请用“_”作为连接符。

按钮一共有四种状态：

Normal：正常情况下的常态。

Highlighted：突出显示，即用户点击按钮不放时按钮的状态。

Selected：选中的状态。

Disabled：不可用状态。

3. 工具篇

（1）实时预览工具

Ps Play是一个通过WiFi网络，实时在终端设备上预览电脑上Photoshop的设计稿，可同步调试及截图保存到移动终端，并可以通过Email、微信等工具即时分享的跨终端应用。由腾讯ISUX出品。

（2）图标制作工具

Icon Template是一款运行在Photoshop中的插件，可以根据你的APP ICON，生成ios/android平台下各种尺寸的图标

（3）标注神器：

与其他切图标记软件不同的是，Assistor PS是完全独立于PS本身的，说是一个外挂更加合适，提高切图标记的效率及速度。虽然不是一个插件，但是它与PS是连通的，当你在PS选择一个图层在后，即可使用它的功能

（4）切图工具：

Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便在pc、ios、Android等端上使用。它不需要记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

（5）压缩软件：

TinyPNG使用智能有损压缩技术来减少PNG文件的文件大小。通过选择性地减少图像中的颜色数量，存储数据所需的字节更少。效果几乎不可见的，但它在文件大小上产生了很大的差异！

（6）一键展示：

一款PS插件，可以瞬间实现3D立体效果，从此告别脚本，抛弃动作，只需要一个按钮。同时提供了几十款设计模型模板,让设计稿展示更加精美!

4. 思路篇

（1）多看

多看书比如：《写给大家看的设计书》、《UI设计黄金法则》、《设计师要懂心理学》等等......，再有多看视频和其他高手的作品

（2）多想：

是配色上吸引了你？为什么这2个颜色配搭起来这么舒服了，我要赶紧截屏到PS里吸取它的颜色看看，整理到一个色彩配搭素材库里，下次我也这么干。

某一句广告语言打动了你，让你记忆犹新？看看人家的广告语多好，下次要记得说服公司的策划人员给点有个性的能打动人心的标题文案。

背景烘托的很有档次吗？这飘落的绿叶和花瓣是怎么做的，是用素材还是自己画的，这素材哪里有，我去找找看。

字体变形，字体排版上很牛？太美妙了，想法太好了，图形切割的也很有美感，赶紧收藏了。

细节处理的很有新意吗？这个按钮的高光做的太好了，、这是怎么做到啊，我要好好研究下。找几个讨论下，到群里问问大家。

（3）站在用户这边

在清晰明确的意图之下构建贴心的产品，这是你真正关注产品设计的明证。这样的产品让用户更舒服地做出选择，营造更优秀的用户体验。产品设计是否用心其实很好判断，是否诚实地设计，用心地为用户考虑。一双鞋好不好，穿着它走上十公里，当拖着疲惫的身躯回家的时候，仔细回味穿着它的每一步，就知道它好不好。而这也是我们面对自己的产品，要做的事情。

5. 写在最后

（1）易于消化

好设计应该是易于用户消化的——大脑不应该花费巨量的脑细胞来费神分析眼睛看到的东西。如果设计得易于理解，访客和用户会很快“Get it”而无需要花费半个小时来查看下方一千多字分6段解释的说明文字

这不仅仅是设计清晰易读的文案这么单纯。用户需要在适合的视觉引导下作出对的决定，内嵌12个纯文本的菜单，这样的设计是令人发指的比如（亚马逊的Fire Phone的设置菜单就这样，已经被吐槽得体无完肤了）。通过字体大小/粗细、色彩和图标来组织信息，拉开层级，可以突出重要的信息/选项，让用户更快地找到想要的东西。

想想看，你费尽心思让用户去获取的信息、去做的事情，最后会像漏斗里的水一样流走，这真的是对你的努力和产品信息的极大浪费。每个人的大脑获取信息的效率和数量是相当有限的，合理运用，别太粗暴。

（2）清晰

好的设计是诚实的，这句话也是设计大师Dieter Rams说的。除了要通过内容和设计传达你的价值观，还需要让用户明白其中的实际价值。模棱两表述和不干脆的产品是无法赢得粉丝。

明确了产品的核心价值，围绕着它将所有的内容都清晰地表达出来。用户如果不知道你的支付系统的细节，是不会毫无顾虑地点击“立即购买”的。尽管许多团队选择使用“免费使用”来获取用户信息过度到自动付款，但是这种做法真的获得用户的信任和认可么？

虽然听起来很俗气，但是解决产品清晰度问题的黄金准则，就是解释清楚，让所有的东西都透明而清晰地呈现出来，你希望你用的东西都是清晰直观的，那么你也不要去蒙蔽你的用户。

（3）信任感

好设计是应该是值得信任，也容易被相信的。在要求用户执行某一动作的时候，尽一切努力帮他们理解为什么这个操作是必要的。每一步都需要借诚实和清晰的表述来建立信任，逐步的积累，一点点提升用户的信任感。

（4）熟悉性

突破性的设计自然是炫酷无比，但是走心的设计才更好。Dribbble上炫酷的效果和全新的框架看起来不错，但是如果人点击购买按钮，那你就麻烦了。

各个平台的设计规范的存在是有理由的。虽然看起来设计规范是想让产品在各个平台看起来更加一致，但是请注意那些一致而富有粘性的设计细节，熟悉的模式、相同的图标。统一的风格，本质上营造出原生的感觉，让用户感到熟悉。

这些设计方案在实际的设备上进行测试过之后才知道是否可行，如果想在各个平台上都让用户有熟悉而宾至如归的感觉，还有很长的一段路要走的。

（5）令人愉悦

一般说来，仅有好想法是不够的，有良好的执行才能赢得竞争。设计团队执行得越多，用户需要做的就越少。复杂的问题被简化得越好，用户从解决方案中所获得的愉悦感就越强。

思考的维度越高，能够解决的问题就越多，就越有价值。不要因为职位而限制做的事情。并不是职位决定了做什么事情，而是想做什么事情，决定了能成为什么样的人。