设计师需要每天解决问题，找到合适的解决方案需要深入研究和精心策划的测试。我们可能还没有答案，但我们确实知道我们有时可以采取的某些捷径。
“启发式”是一种简单而有效的规则，可以帮助我们形成判断并做出决策。我们可以将它们视为UI最佳实践的一般指导原则。
注意：这些规则有其时间和地点，并不能替代可用性测试。
我们今天要看看八大黄金法则，对设计会产生哪些影响。
1. 争取一致性
设计“一致的接口”意味着对类似的情况使用相同的设计模式和相同的动作序列。这包括但不限于在用户使用中在提示屏幕，命令和菜单中正确使用颜色，排版和术语。
请记住：一致的界面将使你的用户更容易完成他们的任务和目标。
2. 启用常用快捷方式
说到使用UI规则作为快捷方式，你的用户也将受益于快捷方式，特别是如果他们需要经常完成相同的任务。
专家用户可能会发现以下功能有用：
· 缩略语
· 功能键
· 隐藏的命令
3. 提供信息反馈
你需要让用户随时了解流程每个阶段的情况。这种反馈需要有意义，相关，清晰，并符合上下文。
4. 设计对话以进一步沟通
动作序列需要有开头，中间和结尾。任务完成后，如果是这种情况，请为他们的用户提供信息反馈和下一步明确定义的选项。不要让他们疑惑！
5. 提供简单的错误处理
设计一个良好的界面，应该尽可能避免错误。但是当错误发生时，你的系统需要让用户轻松了解问题并知道如何解决问题。处理错误的简单方法包括显示清晰的错误通知以及描述性提示以解决问题。
6. 允许轻松撤销动作
在发生错误后找到“撤消”选项可以立即解决。如果他们知道有一种简单的方法可以解决任何事故，那么你的用户就会感到不那么焦虑，更有可能探索各种选择。
此规则可应用于任何操作，操作组或数据输入。它可以从简单的按钮到整个操作历史。
7. 支持内部控制点
定义：
“在人格心理学中，控制源是人们相信他们能够控制事件结果的程度” - Julian Rotter
为用户提供控制和自由非常重要，这样他们才能感觉到他们负责系统，而不是相反。用户应该是行动的发起者而不是响应者。
8. 减少短期内存过载
我们的注意力有限，我们可以做的任何事情都可以让用户的工作更轻松，更好。我们更容易识别信息而不是回忆信息。如果我们保持接口简单和一致，遵守模式，标准和惯例，我们已经为更好的识别和易用性做出了贡献。
我们可以添加一些功能，以帮助我们的用户根据他们的目标。例如，在电子商务环境中，最近查看或购买的项目列表。
结论
虽然你应该始终采用基于启发式的决策，但遵循一系列规则和指南将引导你朝着正确的方向前进，并允许你在设计过程的早期发现主要的可用性问题。这八个原则适用于大多数用户界面。
你也可以使用它们作为灵感来创建自己的启发式方法，或者结合现有的示例来解决你自己的设计问题。
每当我找到一个看起来不错、干净且优雅的界面时，我都会保存它！
现在我收集了一千多张UI界面，经过反复的学习、使用或简单查看后，我认识到了一些共同点： 让我心动的颜色。
因此，在这里，我想总结一下如何在UI界面设计中创建完美颜色。
颜色就像语言一样强大。当你遇到一些设计、体验及交互很棒的app时，回想一下，视觉外观在很大程度上取决于颜色，颜色总是给用户第一印象。
那么，什么样的颜色用在实际产品上可以做什么呢？
颜色可以体现出品牌或产品的基本色调、心情、内涵、概念、品质、价值等作用。有研究表明，用户仅花50秒就可以在线对你的产品有一个心理评价，并且用户在最初的产品心理评价中有62％至90％的判断是基于产品的配色方案。 （请看下图）
正确的颜色选择可以更好的支持信息可读性。此外，它可以极大地提高可用性，例如增强号召性用语、增强导航、刺激直观的交互，满足审美需求和视觉解决方案。
总之，要创建一种清晰，和谐的颜色样式来满足用户的需求。 （请看下图，腾讯新闻利用颜色来做用户引导及导航引导，利用颜色层级更利于用户阅读。）
产品的外观是影响消费者购买决策的关键因素。研究表明，所有产品评估中的90％与颜色有关。
如今，许多公司将“颜色”（尤其是UI设计中的颜色）作为其营销策略之一。 (请看下图)
我们不能说一种颜色看起来“不好”，只有错误地使用颜色，颜色才可能看起来很糟糕。
假如麦当劳使用灰色和黑色而不是黄色和红色，你是否还有胃口？用户看到之后根本就没有任何胃口了，更不可能达成交易。 （请看下图）
女人在聚会上穿黑色连衣裙和黑色的唇膏，你是否觉得很奇怪？就不符合用户对事物的认知颜色了，给用户困惑。（请看下图）
可口可乐不再使用红色的标志改为蓝色，你还会喝它吗？喝进去你的心理上会觉得你是在喝漱口水。（请看下图）
不同的颜色传递出了不同的含义和感觉
方法①：在什么时间用户在使用你的产品，来确定你的产品颜色，比如晚上、早上、还是凌晨。再比如沉浸式体验应用晚上都会有深色夜间模式。
方法②：根据你的用户群体选择正确的颜色，你的产品是面向那一类用户，男人、女人、青年、幼儿、老年等这些人的对于颜色的认知是不一样的，比如幼儿对于颜色的认知是五颜六色，颜色亮度饱和度都偏高的，就像路边的喜洋洋1元摇摆车孩子都很喜欢。
方法③：根据产品的特性选择正确的颜色目标。产品的特性及固有特性，比如黄金就是金色的，蔬菜黄瓜就是绿色，天空就是蓝色我们不妨用产品的固有色来做设计及产品特性来做设计。
方法④：考虑颜色的心理属性，色彩对人类情绪和行为的影响在心理学分支称为色彩心理学。它指出我们的大脑对颜色有反应，而我们通常不会注意到它。当人眼感知到一种颜色时，我们的大脑就会向内分泌系统发出信号，释放出负责情绪的激素，每种颜色在我们的思维中都有自己的影响力。
红色：它象征着好和坏的感觉，包括爱，自信，热情和愤怒。
橙色：充满活力的温暖色彩带给你兴奋的感觉。
黄色：这是幸福，阳光，喜悦和温暖的颜色。
绿色：大自然的色彩带来平静和生机的感觉。
蓝色：它通常代表一些公司形象。与安全、可靠、科技有关。
紫色：是神秘和魔术的颜色。
黑色：它伴随着悲剧和死亡，象征着一个谜。同时，它可以是传统的也可以是现代的。
白色：颜色意味着纯净和纯真，以及完整性和清晰度。
为什么要谈论蓝色？
只需看看你最常用的Apps或网站、Facebook、Twitter、Microsoft，腾讯，菜鸟、新能源、智能设备、丁丁、旺旺、飞书、百度等，你会看到，它们都是基于蓝色。
蓝色是男人、女人、成人、孩子都喜欢的第一色，蓝色就像无处不在，在自然界中我们对蓝色的认知度最高，蓝色绝对是可以培养用户信任和接受的安全颜色，蓝色是UI设计中颜色的典型示例，如果没有更好的选择，我们可以使用蓝色。
我们在许多美观的界面中注意到的一件事是，它们通常在特定主色颜色上具有更深和更浅的变化。 （请看下图例子）
咱们来分析上面界面3个颜色色相、饱和度、明度的变化。就是我们ps软件里面取色器的HSB，h是色相，s是饱和度，b是明度。
通过上面的颜色分析，我们可以看出主色色相数值不发生变化还是蓝色，我们可以把主色降低明度和增加饱和度，可以使颜色变化更深。通过增加明度和降低饱和度，可以产生更明亮的色彩变化。
环顾我们四周环境空间的变化。每次扫视房间时，无疑会看到颜色饱和度和明度的变化，以及阴影和亮面的变化，作为设计师我们可以从现实中取色。 （举个例子：看下图）
总结上面的例子，我们以后在做设计的时候遇到这种纯色界面就可以利用主色的深浅变化，设计我们的界面，这种颜色搭配更和谐更美观更自然。
在进行UI界面设计时，你不能完全摆脱颜色组合。在UI设计中结合颜色很容易，但是如何避免混乱和过载呢？如何摆脱朴素并保持精致？
牢记以下两个原则：
第一个原则：
60％+ 30％+ 10％的原则是达到色彩平衡的最佳比例。通过培养一个平衡的色彩搭配，整洁，和谐的界面为用户带来愉悦感，此比例可以完美地发挥作用。而且，它可以减轻用户的视线，使其舒适地从一个点移动到另一点。 （举个例子看下图）
第二个原则：
这些规则与“黄金（6：3：1）规则”相匹配。这也是避免混乱并在配色方案中保持平衡的好方法。
1）基于“主色”，你可以在色环上创建许多变化的颜色。
有一个窍门：确定主色后，在主色的基础上添加白色即可得到亮色，添加黑色则暗色。在这里，我建议新手使用单色系方案，很容易把控。 （举个例子看下图）
主色系的搭配更容易把控，也更简洁，视觉信息容易聚焦
2）在令人难忘的时刻展示品牌主色，以增强你品牌的独特风格。在添加颜色以增强品牌在界面上的效果时，请考虑添加主色的位置、占比、数量，增强你的品牌效应，让用户对你的品牌颜色认知度更高。（举个例子看下图）
支付宝的蓝色大家应该都知道，这是支付宝首页主色的占比，只要有人给你提起支付宝你肯定会想到蓝色，这就是在界面设计里面主色的重要性
饿了么主色数量、占比、位置，增强了用户对品牌色认知
如果一个元素比另一个元素更重要，则它应该具有更高的视觉重量。这使用户易于快速浏览页面并区分重要和次要信息。 （请看下图）
汽车之家运用橘色色块和蓝色色块来做到信息视觉重量，区分视觉层级，引导用户重要信息
氧气app的顶部导航部分，新婚蜜月&内衣知识做了颜色的特殊处理，就是为了在导航部分视觉加重，引导用户点击探索
雪球理财app，一键添加按钮更加醒目，大胆的使用主色吸引用户的眼睛，引导用户添加自己喜欢的股票
在UI设计中巧妙地使用颜色可以创建漂亮的UI界面，但是创建漂亮的UI界面绝不是最终目标，实现出色的用户体验目标，使用户的生活更快乐才是关键。
因此，从UI的颜色选择和用法的角度来看，设计人员应始终记住该界面应高度可用且清晰，并以用户为中心来做我们的设计！
1. 前言
随着科学技术的快速发展和人们生活水平的急速提升，手持移动设备——智能手机、平板电脑等，已经在人们的日常生活中普及起来，特别是智能手机，已经成为几乎人手必备的产品。人们早已不局限于守着电脑来满足某项需求，通过智能手机中的APP移动应用，人们就可以获取或者发布信息，实现听音乐、购物、导航等功能需求。很明显，移动应用的内容和互动方式越来越丰富和复杂，它的普及和流行也无疑改变了人们的生活习惯，为人们提供了新的生活方式，同时也促进了APP移动应用程序的流行和发展。然而，移动应用在实际使用过程中却显露出许多不足，究其原因在于，早期的移动应用中通常直接将较为成熟的桌面应用直接套用与移动终端上。不可否认，这样做可以让桌面应用的成熟用户较为轻松、快速的使用移动应用。但缺陷在于，没有考虑到移动应用特有的交互方式和交互环境，导致可用性不高。很显然，智能手机上的移动应用和PC端的应用产品相比，有其特有的使用特性。只有充分了解移动端应用的使用特性，才能为移动应用的界面设计工作打好基础。
2. 移动应用的使用特性
2.1 使用场景
与PC端的使用不同，智能手机的使用场景较为多变，几乎不受限制。使用场所可以是室内或户外也可以是私人空间或公共场所，例如家、办公大楼、餐厅或地铁等。还可以以站着、坐着或躺着等姿态使用。正因为这样复杂、多变的使用场景，一些问题则不得不在我们的考虑范围之内。例如用户在公共场所使用移动应用时，私密性的保证；用户的使用场景发生变化时，使用的便利性和使用过程中断的可能性等。
2.2 硬件条件
近年来，为了满足用户的使用需求和提升体验感，智能手机的屏幕逐渐变大，“大屏幕”已经成为现代智能手机的一大卖点。虽然智能手机屏幕有越来越大的发展趋势，但与电脑屏幕相比，仍是相差甚远。同时，在复杂多变的使用场景中用户往往使用单手操作，与电脑的操作相比，控制精度较低，出现误操作的可能性更大。所以如何在有限的尺寸内，将内容完整且准确的呈现给用户，寻求功能和需求之间的平衡就成了需要反复思考的问题。
2.3 网络环境
用户使用智能手机移动应用的网络环境目前分为2G、3G、4G、WIFI和无网络五种。但用户在使用移动应用时的网络状况和较为稳定的PC端网络条件不同，移动端的网络环境并不是单一不变的，时常会因为环境的变化而变化。例如，某用户从家中出发，乘坐地铁要到某大型商场。其本身使用的手机为3G网络，但因为网络在地铁环境中信号不稳定，偶尔手机会变成无网络的状态。当用户到达大型商场，用户连接成功商场所提供的WIFI网络，那么用户使用移动应用则处于WIFI网络条件下。所以对移动应用进行设计时应考虑到各种网络环境的变化。
2.4 使用心态
移动应用作为一种用户贴身使用的工具，用户使用移动应用的初衷更多的是有定向和较为明确的需求点。用户希望打开应用、发布命令后，移动应用能立刻开始运作，完成任务。当操作中断或不断失败，由于智能手机移动应用的使用特性，用户很难有别的解决出口，大部分情况下，用户只能是除了等待还是等待。这样用户就极易失去耐性，最终放弃操作。很明显，快速、有效的体验过程才是用户需要的。特别是移动应用特殊多变的使用场景和网络环境，其操作的连贯性与WEB产品相比，显得尤为重要。
2.5 使用界面
在PC端上操作界面时，可以同时打开多层界面，界面与界面之间的切换转变显得较为简单方便，且PC端的显示信息较为丰富、充分。而在移动终端上对应用界面的操控就显然更吃力一些了。在有限的屏幕下，信息的展示更为局限，且实施多界面操作时较为不便，例如想实现从某一界面跳回到之前的某一界面，可能要经历多重步骤。
3. 移动应用界面设计分析
上述智能手机移动应用的使用特性正是影响和指导智能手机移动应用界面设计的重要因素，由此对智能手机移动应用界面的设计分析可得出一些设计要点，主要包括视觉层面和交互层面的设计要素。
3.1 界面的视觉设计
（1）充分考虑移动端的多分辨率
现有智能手机市场有多种系统存在，例如IOS系统、Android系统等，且不同系统的界面风格和界面交互习惯不同。同时，不同款式的智能手机持有不同的分辨率，而一款移动应用的设计是需要在其在不同系统或不同分辨率下都能适用。这就要求在进行移动应用的界面设计时，要考虑到设计画面中要表达的信息重点是否在任意分辨率下都能完整清晰的展示出来，设计的界面视觉风格是否与相应系统风格相符合。
（2）对控件的合理安排
由于智能手机的界面展示空间较小和人们对屏幕界面进行操控的精度有限，在常规控件的设计上，应考虑界面大小和用户的可触碰范围以及该控件的重要程度等因素来对控件进行设计。要做到设计出来的控件或图形易懂且易控。
3.2界面的交互设计
（1）合理精密的界面逻辑关系
智能手机的应用界面在使用时若出现逻辑上的不清晰或错误，从而需要退回至之前的某一页面是十分困难的。其次，由于展示空间的限制，在有限界面上来回寻找某项功能会让用户处于十分焦虑的状态，从而降低产品的体验感。同时，随着界面层级的加深，用户的流失量也会逐渐增加。所以，应用界面的布局和界面的层级有较为合理的逻辑关系，且将用户使用过程中出现中断、方便用户随时退出、让用户对于当下所处的位置有较清晰的认识等方面考虑其中，能使用户在使用应用时更为顺畅，有较高满意度。
（2）提升使用连贯性
当看见菊花转或进度条的界面时，我们就知道，界面中的内容正在被加载，我们需要等待。很显然在这样的加载页面前，用户将下意识将注意力投放到观察进度条的推进速度上。在复杂的使用环境下，网速变慢和信号变差是经常会出现的情况。当单调、枯燥的加载界面持续时间稍长，会给用户一种压迫感。因为用户没有办法进行别的操作，只能傻傻盯着进度条等待，最后除了取消操作，别无选择。在用户的潜意识中会形成这款应用本身就是很慢，使用起来感觉不好的印象。而针对这样的现象，近来很多应用开始有了新的尝试。从用户的心理层面出发，在一些细节上做出改善性的设计，提升移动应用的使用连贯性。例如，预加载、框架式加载、利用缓存、使用有趣的动画效果等达到提升应用使用连贯性的目的。
4. 总结
可见，用户在智能手机移动应用上的使用较PC端产品相比，在诸多方面都有所不同。智能手机移动应用的使用环境更为复杂，用户的注意力更难集中，影响操作感的因素更多多，分析、了解智能手机端上界面操作的特性对于设计出有良好体验感的应用产品尤为重要。抛开技术因素，无论在交互还是视觉方面做出细节上设计的优化，来提升产品使用的连贯性和体验感，让用户在心理层面上觉得移动产品使用起来很连贯、速度很快，这无疑是一种聪明的做法。从用户选择产品、发出操作命令、完成执行过程最后到接受操作结果，整个操作过程中的每个环节都值得设计师努力优化，减少甚至避免中断的间隙从而提升体验感。
公平等级是用户按重要性处理信息的顺序。在界面设计中，就像任何其他形式的设计一样，此概念对于在视觉上起作用是必要的。通过正确使用层次结构，头脑可以对元素进行分组和优先级排序，以赋予它们特定的顺序，从而有助于您理解要交流的内容和用户的成就感。
界面设计中经常遇到的问题是过多地使用了分散在屏幕上的元素或组件，如果未按正确的层次放置这些元素或组件，则会导致混乱并增加导航的工作量。对这些元素进行优先级排序对于避免此问题很重要。
在此示例中，大小，形状和颜色资源用于将视图定向到特定元素
一般用户倾向于“扫描”屏幕的整个内容。因此，重点应该清楚地说明网站或应用程序的内容。
这种优先次序不仅应被视为美学问题，而且应被视为用户体验的重要组成部分。其中包括的许多元素（尤其是在移动设备中）将与站点导航相关。尽管图形设计中的层次结构已经存在多年，但恒定的交互因素已添加到UI设计中。用户与元素交互的事实使设计直观的界面更加相关。
创建正确的层次结构必须考虑七种资源：
元素越大，越会引起注意。人们首先看到较大的物体是事实，其中包括文本和图像。使用大小层次结构背后的想法是为开始视觉之旅提供一个焦点。
在Google Arts and Culture应用程序的此快照中，标题“ Pawtraits：我们的不断变化的……”的大小比副标题“我们的真实感受……”大得多。通过将这些分数分开，阅读顺序可以避免任何混乱。
如果从一个文本到另一个文本的跳跃较小，例如从32pt到24pt，则当同时发送两条消息时，阅读顺序将变得更加困难。这可能不是一个大问题，但是您应该记住，这可能会创建效率较低的层次结构。
同样重要的元素太大也没有必要。造成不必要的失衡可能最终使其他设计黯然失色，并使其他信息在阅读中丢失。像设计中的所有其他内容一样，平衡是关键。
明亮的色彩比柔和的色调更为突出。颜色是一种强大的视觉资源，它的正确使用可以有效地将屏幕中的元素分开，以对它们进行优先排序或降低优先级。在界面设计中，通常最强的颜色是用于交互，因为用户需要采取措施或从系统接收反馈。
在此Cabify应用截图中，紫色的使用是主要颜色。行程路线和“继续”按钮均为第一层级，其次是地图和汽车。色调和饱和度的谐波使用将这些元素与较不饱和且重要性较低的背景分开。
饱和色比灰色更突出。灰色及其标度总是倾向于饱和度高的颜色，这甚至给用户带来更亲近的感觉。例如，在灰色背景上使用红色。
明亮的颜色比深色的颜色突出，反之亦然。在深色背景上使用明亮的元素会立即建立层次结构，当我们拥有白色背景和一些深色元素时，这也适用。
重要的是要知道，滥用颜色会最终使用户感到困惑，因为这会产生一种幻觉，即一切对构图都很重要。另一方面，等级制度的思想始于将自己定位于最相关的事物而不是最不相关的事物。
彼此靠近的元素比远处的元素吸引更多的注意力。创建阅读顺序时，使用距离进行分组是非常可行的资源。人的视觉倾向于对元素进行分类，因此，使这种粘合基本上有助于用户的脑力劳动。
在Netflix主页上，第一组包含电影的标题和简介。第二组在最下面列出了六部电影。这些组之间的距离使视图更容易从一组传递到另一组而没有视觉噪音。同样，它们各自组中的每个元素都有其自己的填充和边距。
因此，邻近度是设计中对象的分组，以创建连接和关联。当事情接近时，通常意味着它们必须相关。如果事情离得更远，则意味着它们可能不相关。简而言之，接近会创建这些关系，并将组织和层次结构带入信息。
在Airbnb住宿页面上，标题，位置和名称主人属于一种排列，而对公寓的描述以及肖像则属于另一种排列。一条看不见的直线的破裂在两个层次上创建了层次结构。
元素的对齐对于在界面设计中创建视觉连贯性非常重要，因为它可以分配与屏幕上元素的相关性，还可以确定交互式或信息性特定元素的开头和结尾。
人类的大脑喜欢模式，这就是为什么许多最好的网站都是对称的。这使我们有机会打破该规则，从策略上将用户的注意力吸引到特定点。用户将能够根据它们的对齐或未对齐来关联这些元素。
重复的样式给人以元素相关的印象。这种层次结构包括在接口中重用相同或相似的元素。重复还基于视觉模式提供了一些优势。如果重复某件事，那是因为很重要。
在Uber网站的白色菜单中，图标和标签的类别分别放置了8次。它以较小的尺寸平衡，将菜单放在层次结构的第二位，紧随主标题“进入驾驶员座位……”。重要的是要知道重复对于创建第二级或第三级信息非常有用。
在界面设计中，重复会在整个体验过程中产生统一感和一致性。例如，在此“中型”文章中，字幕（h2）用重复的样式标记，粗体的使用和较大的字体大小为用户提供了基于重复的方向感和层次感。我们必须知道，人性会在熟悉中找到安慰。
元素周围的空间越多，它产生的注意力就越多。负空间是显示空白画布的区域，不仅可以在同一元素的周围而且可以在同一元素之间和内部找到。它不适用于单色，而是采用背景色来营造出空间感。
在“更好的网站设计”的此示例中，数字“ 01”和标题“运动的目的”都明显被负空间包围。尽管插图由于其纹理的多样性而具有更大的层次权重，但应用良好的负空间可以实现平衡，防止其他元素贬值。
尽管有些设计师可能认为更好是更好，但视觉感受却大不相同。具有大量封闭元素的设计会导致界面饱和，并且没有层次结构指示哪个元素更重要，从而给用户带来混乱和不知所措的感觉。
这个想法是，元素越重要，周围的负空间就越大。将一个元素与另一个元素隔离不仅是创建层次结构的一种优雅资源，而且还可以为设计提供支持结构。也就是说，它创建了必要的空间，以便视图可以以流畅的方式从一个元素传递到另一个元素，而没有视觉噪音。
多样而复杂的纹理比平坦的纹理更引人注目。墙壁的平坦表面将比人行道表面突出。这是因为复杂性总是比简约性吸引更多的用户注意。纹理的使用还结合了其他重要的设计元素，例如风格和氛围。
UI设计中的照片可能是存在的按纹理分层的最佳示例。它们的形状，颜色和渐变总是比平面元素传达更多的感觉。在Masterclass应用程序的情况下，毫无疑问，讲师的照片是第一级的，然后是白色的名称，菜单中的红色表示用户的位置。
该资源应按一定剂量使用，因为纹理的滥用最终会分散注意力，而不是告知或可能导致不必要的压缩。纹理往往会与其他分层资源（包括大小）重叠，因此在合并纹理化元素之前，您必须考虑整个合成以及用户在设备屏幕上看到的所有内容。同样，平衡是关键。
当设计没有清晰的视觉层次时，用户的导航将被迫进入其他形式的阅读，例如F和Z模式。作为设计师，我们可以加强这些模式或破坏它们，以找到更多动态的交流形式。在UI设计中，没有什么仅仅是美感，而视觉层次结构无疑是我们拥有的指导用户体验，重新设计标准并提供直接接口目标的最佳武器。
《一款APP设计的从0到1》这是一篇系列文章干货，上次U妹讲的是关于APP项目立项和预估时间篇，今天U妹来说一下，APP界面设计和iPad界面设计规范。
往期回顾：
这次U妹接着上次的茬继续，继续之前先来看看整个目录（满满的干货）
U妹列了一个小小的目录：
一、项目立项
二、项目预估时间
三、界面设计
四、切图标注
五、视觉还原
六、上线准备
界面设计篇
我是一名UI设计师，所以U妹这里说的都是从设计师的角度去阐述一款APP从无到有的一个过程中，设计师应该干的事。
目前在行业里，关于APP界面设计规范也是层次不齐，很多都还停留在6的设备和ios 9的系统之上，而现在最新的是iphone 7和iOS 10了（更新换代真的很快），我这里说的是最新的iOS 界面设计规范（Android设计规范，我们下次见）
一、关于设计工具
俗话说：工欲善其事必先利其器，好的工具可以让我们的工作效率更高，做界面设计我们用的最多的就是PS和AI了，如果你是Mac用户，可以尝试一下sketch，软件的版本当然是推荐高版本，因为功能更强大，作图的速度也就更快。
我个人刚接触ps是从8.0开始，8.0 - CS4 - CS 5 - CS 6 - CC - CC 2014 - CC 2015，一直到现在的最新的CC 2017，深刻体会，新的版本更好用。也可以根据个人习惯，选择自己顺手的工具就好。
二、设计稿尺寸
在看设计稿尺寸之前，我们先来了解一下APP界面设计构成
界面构成由：布局层、图文排版层和图标层。
在iPhone 6还没出的时候，都是用640x1136 px来做设计稿的，自从6的发布，所有的设计稿尺寸以750x1334 px来做设计稿尺寸
U妹再带大家来看看，到目前为止所有iPhone的尺寸（1-3代就不用考虑了）：
iPhone界面设计规范：
iPhone 界面尺寸：
以750x1334px作为设计稿标准尺寸的原由：
1. 从中间尺寸向上和向下适配的时候界面调整的幅度最小，最方便适配。
2. 大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角。
3. 设计安卓版本时只需做最小的设计调整，提升设计效率。
所以做设计稿事请以750x1334px来做设计稿
在文档建立参考线是一个很好的习惯，我希望大家也可以养成这个习惯，上下很容易设置，左右我习惯设置24 px的距离，我通过对国内外很多APP就行了对比，总结是24 px更合理，这个是我的个人习惯，所以也不要当做是明文规则，你设置为30 px，也是可以的。
然后就可以开始你的设计了
这里U妹再给大家略过一下iPad的设计规范：
三、图标设计
iPhone 图标尺寸：
图标设计请用栅格化系统进行设计
设计尺寸：1024x1024px，竟可能的采用黄金比例设计
四、关于设计字体
先来看一下字体的历史演变过程：
iOS 9：英文字体为Helvetica Neue
iOS 9：中文字体由为冬青黑
↓↓↓
iOS 10：英文字体为San Francisco
iOS 10：中文字体为苹方
关于字体大小的问题：
顶部操作栏文字大小 34-38px
标题文字大小 28-34px
正文文字大小 26-30px
辅助性文字大小 20-24px
Tab bar文字大小 20px
文字大小只是一个范围，这要根据设计的视觉效果来决定，不要死记硬背，但是切记，字体大小要用偶数。
关于界面设计就说到这里了，好的工作方法才能让自己事半功倍，你觉得对自己有帮助，那可以借鉴学习我的方法，在具体工作中也要灵活应用，有不足之处或问题也可给U妹留言，下期U妹带你一起来看看界面切图标注，我们下期再见！
圆形元素在界面设计中被广泛运用，从常见的圆形图标到圆形的头像，又或是圆形的轮廓形状。圆形是一种特殊的形状，它能够在众多几何形状中被我们快速地注意到。也正因为如此，在使用圆形元素设计界面时会有一些注意事项。
一、圆形头像
放眼望去，圆形头像已然占领了我们的手机。不妨看看下面举的这些例子，如下图所示。
从左到右依次是搜狗地图、QQ、Instagram。当然，还有很多其它的例子，就不一一列举啦。此刻，肯定有同学已经按耐不住要跳出来反驳了，微信和Facebook就不是圆形头像，不信你看下面两张图。
方与圆之间，孰对孰错，请继续看下文分解。
1.用户使用头像的目的
不管是圆形头像，还是方形头像，其归根结底都是头像。用户使用头像的目的，主要是作为个人身份的象征。区别于其他用户的特征有很多，例如用户名、用户ID、用户头像。在这些备选项中，头像最便于快速识别和记忆，尤其是帅哥美女。
除此之外，还有一部分通过头像来彰显自己的个性，例如美女通常会使用自己的性感自拍作为头像来表现自己的魅力，又或是使用卡通人物或形象作为头像来表现自己的艺术气息，再或是使用萌宠作为头像来表现自己的爱心或是呆萌。
2.用户使用什么照片作为头像
随着智能手机的越来越普及，人们拍摄照片的门槛也变得越来越低，越来越多的用户使用自拍的照片作为头像。照片的内容五花八门，例如人物、风景、花草、宠物。即使是正常的人物照片，背景中也会掺杂着很多其它的元素，例如下图所示。
第一张照片中人物背景虽然虚化了，但背景仍然很凌乱，一些微弱的对比色很容易就抢夺了用户的视线。第二张照片中人物是配角，豪车才是真正的主角，这类型的自拍照不再少数。第三张照片人物拍摄的光线阴影错乱，故意露出一线背景内容，其用意如何昭然若揭。此外，用户手机的好坏、拍照水平也不一致，拍摄出的照片质量也参差不齐。
使用这些照片作为头像时，人物不但不被突出，反而被弱化了。虽然智能手机屏幕越来越大，但是当头像集体在界面中展示的的时候，每个头像依然较小。
3.方形头像和圆形头像的区别
方形头像和圆形头像的区别可以用两张对比图来说明，如下图所示。
左图是方形头像，右图是圆形头像。通过对比，可以发现以下几点：
a、圆形头像能够更好地帮助用户聚焦到人脸。虽然左图能够完整地呈现人物特征，但是干扰信息较多，例如背景中的灯光、门柱、屏风。对比之下，右图更为清晰地展示了人物的脸部特征，例如锥子脸、美瞳、假睫毛。在前面的分析中也提到，手机拍摄的照片质量参差不齐。在这种现实情况下，圆形头像更有利于忽略照片的背景，提高头像的识别效率。
b、严格意义上讲左图并不能称之为头像，而更应该称之为照片。原因很简单，头像嘛，自然应该以展示“头”为主，而左图中头像只占画面四分之一不到的区域。从这个角度来说，显然右图更为合适。在选择照片作为头像时，如果是圆形，用户更愿意选择脸部的照片作为头像；如果是方形，用户则相对更随意，通常是全身或是半身照。不信，你可以打开自己的微信，看看自己的好友头像，或者往前滑滑看看前面的配图。
c、日常生活中，我们看到的大多数相框都是方形的，圆形的相框较少，这是因为大多数照片都是方形的。因此，使用圆形的轮廓来表现头像，能够快速地和照片区分开来，更加突出。
当然，使用圆形的轮廓作为头像，还有一些其它的原因，例如技术上的进步。
早期由于CSS等技术的不成熟，圆形、圆角图形的处理非常麻烦，现在变得容易很多。
二、圆形的icon
在APP的UI设计中，我们会经常看到一排排圆形的icon，例如下图所示。
上图中，前面两个分别是美团和淘宝。在设计上，都有两行横排的圆形图标。最后一张图是搜狗地图的服务tab页，可以发现也有纵向排列的一溜圆形图标。
在这里，要回答两个问题：
1.为什么要用圆形？
2.为什么要用圆形而非矩形？
第1个问题很方便回答。每个功能入口的图标都不相同，如果去掉圆形轮廓，势必会显得十分凌乱。大家都知道圆形是一个封闭的形体，加上圆形之后就能够弱化图标的差异性，让其变得更加规整，看起来也更加清爽，整齐划一。同时，在功能上也表明各个图标之间的平等地位，不会因为某个图标形状特殊而有所偏袒。
在回答第2个问题之前，首先回归圆形和方形的基本特征，
圆形：动，曲线，运动，灵动，流动
方形：静，直线，规则，严肃，理性
圆形和方形比起来，显得要灵动很多，不至于那么呆板、严肃。如此，不难理解为什么用圆形而非矩形。
其次，圆形能够使图标在方形页面中脱颖而出——不觉得这几个圆形图标在页面中非常突出抢眼么？原因嘛，很简单。我们的手机屏幕大多是方形的，界面中的大多数元素也是方形的，这时候用一点少量的圆形，自然在界面中形成焦点，这一点在后面的分析中还会见到。
除了这种形式之外，还有一些单个的圆形图标浮于页面底部，通常执行的是返回至顶部的操作。
圆与方就像太极中的阴与阳，相生相克，而又生生不息。巧妙地将圆形与方形进行结合，能够让页面变得生动活泼的同时，也能够更好实现功能上的引导，如下图所示的几个案例。
第一幅图是谷歌手机地图，地点右上角的出行方式图标刚好被方形的临时层一分为二。从功能上来讲，出行方式是下一步的行为，不属于临时层里的内容，因此置于右上角的位置是比较合适的。从UI角度来说，圆形与方形结合，使的圆形变得更加突出显眼；同时圆形置于右上角，页面也不那么死板，反而让页面变得生动、活泼起来。
第二幅图是宜人贷，微微鼓起的弧度让这个理财项目变得十分突出，同时也打破了页面沉闷的布局。
第三幅图是kitchen stories，整个页面保持左右居中，作者的头像居中现实，对页面进行了分割的同时起到了承上启下的作用。
在页面设计中，圆形元素通常不是独立存在的，而是和其他元素相生相息，相互包容。寻求好的视觉效果的同时，也要弄清楚页面元素之间的相互关系，这样产出的设计才是真的好设计。
四、圆形的轮廓
结合现实物体，借用圆形轮廓，打造页面点睛之笔。还是举几个栗子给大家看看吧，如下图所示。
第一幅图所示的是网易云音乐的播放界面。圆形轮廓与唱片保持一致，虽然占据了页面的主要空间，但是使的整个页面变得文艺简洁。
第二幅图所示的是搜易贷的账户页面。可用余额采用瓶装水的设计，余额较多则水涨的越高，同时会有晃动的效果，栩栩如生的同时让页面变得灵动起来。
第三幅图所示的是乐动力的首页。步数越多，则描边进度条越多，暗色变得越暖。与现实生活中的仪表盘相对应，渐变色搭配圆形，使的页面变得主次分明，极富视觉冲击力。
可以发现，在使用圆形元素时要注意页面的平衡，例如左右和上下的对齐居中。为了保证页面的均衡和清爽，通常会在圆形元素周围保留较多的空白。这些都是在使用圆形元素时需要注意的事项。
好久没有发文章了，今天顺叔和大家一起聊一聊卡片式设计，无论是WEB还是APP卡片式设计运用的比较多，很多UI设计师比较偏爱这样的表现，卡片式设计会给人一种视觉上的享受，也能对于界面具有层次感。但往往在卡片设计中有一些技法还是需要了解，不能因为卡片式设计而卡片式设计，要能更好的应用到界面场景中。希望在这次分享中一些知识点能帮助到大家，之后的几篇系列文章中，顺叔会从界面中比较趋势的设计技法进行分析，希望能帮助到一些设计的小伙伴。
教程前的引言
卡片式设计这几年比较流行，同样这样的设计表达也是个趋势，应用在APP PC界面中至今还流行着，从事UI设计的都会知道卡片式设计，具有把内容整合模块化，从视觉，个性化体验上进行呈现，是设计师在设计时常用的一种表现，同样也具有独特的创新概念。
在一些项目中，一些客户会说这个设计的APP界面有点太白，没有层次感怎么办，那这时你应该和客户说在APP设计中运用了现在比较流行的一个表现手法，卡片式设计，可以解决在画面中有个性化 、变化、 层次感的设计。那客户又问什么是卡片式设计呢？
一、什么是卡片
无处不在的卡片设计具有个性的美感和很好的易用性，是以文字标题，小标题， 图形或图片组成的模块化，以块状形式规整的整合内容，让内容更规整化，视觉上更个性化，也是操作上快捷的内容信息入口。更直观的表达内容信息和快捷跳转操作。成为当今在设计中一个比较流行趋势，而卡片在设计中也占用一定的优势，让整体更加的有层次感，在运用起来也比较方便，从视觉、体验、交互都具有不错的优点
设计效果图展示
顺叔为了这个文章特意设计了两个案例，通过这两个案例进行一些讲解。请见下图：
二、卡片设计优势
1.趋势
无论是大平台 还是小平台的产品都会运用这样的卡片式，跟风式设计趋势，也让卡片式设计成为了一个现在常用的优势，不过卡片式设计的确有很好的效果
2. 层次感
具有一定的层次感，能在页面版式中起到设计上的不同，个性化变化，页面层次感区分强烈，能更好的体现提炼出内容
3. 规整化
卡片式设计以图片、 图标 、LOGO、 标题、 整合到一起 以块状的形式在界面中展示，更规整的排版呈现。虽然内容多会导致页面乱，一个模块包含内容之后就会规整不少，也给页面设计上带来了更好的视觉
4. 视觉体验
卡片式给整个页面会增加视觉上的体验，特别那种大图片卡片式更具有视觉上的冲击力，背景衬托出前景卡片式设计。同样对卡片式也感觉到舒适感。卡片式设计还是需要根据整个布局、 产品需求 、功能进行设计。以达到最好的用户体验、视觉体验。
不要为了卡片设计而卡片设计。
5. 易用性
卡片式设计在易用性和灵活性上比较高，在响应式设计中同样应用的也比较多一些。能更好的有序排列。
6.简约设计
简约设计会更显得品质，不需要过多的进行装饰，哪怕就是一个白色的色块，上面点缀有色彩的图标和标题 副标的变化，也会觉得显得高大上，就算是一个带有颜色的色块卡片，也无须过多的设计 内容上的标题 、图标、 按钮就足以支撑起卡片
7. 交互效果
在卡片式的设计中会有一些动效交互，比如整体卡片放大、 缩小 、左滑、 右滑，可以整模块化滑动 缩放。整体效果增加了不错的视觉交互体验
三、卡片正确设计知识
一般在界面设计中卡片的存在的意义和表现手法都是什么样的呢，下面为大家举例了几种常用的正确的设计表达姿势。希望小伙伴在设计的同时有所灵感和参考，把一些表现手法加入到自己的设计中，适合才最重要。卡片式设计还是要根据整个风格和整个布局而进行展示，在做进一步的对比和布局中以最好的效果为最终展示方式，总结分析几个常见代表例子，如有不全请讨论补充，下面就是一些例子
1.卡片式形式一
以色块为主体并用现在比较流行的渐变色组成，其中四边为圆角，同样色块下边阴影衬托出主题，这个是在卡片中设计比较常见的运用手法，卡片的长高在设计中也是根据结构，内容功能而进行设定。正方形，长方形都是一个表现得手法，在色块上面标题文字，图标，图形是整个卡片的布局的形式，无非就是左右布局和上下布局
应用场景：卡包、天气、类别、入口、优惠劵，卡劵
此图片来自于网络
2. 卡片式形式二
这种形式共同点都是在头部C位出现的卡片式设计，其中承载着标题，副标题，以及图文版式，不难发现，如果图片有颜色，那么下面是白色底，这样在白底上面色块的出现还是比较简约凸显卡片，如果背景有颜色，卡片也有颜色那么卡片的凸显程度就不会那么强，图二很多在会员卡设计中常用的比较多，也比较简约，另外两个共同特点背景有颜色，一般底部背景颜色就是整个界面的主色调，背景有色块，上面就用白色卡片，卡片上方标题、 文字、 图片呈现。只不过排版的方式有所不同而已，在很多APP设计中，这样的表达也很多，通过主色调可以很融合的把上面的状态栏，导航栏融为一体视觉上统一性，底部背景颜色延续下来，上面凸显白色卡片，这样更具有视觉感和层次感。白色的卡片不需要过多的修饰，更能体现的上面的文字和图片。
应用场景：会员卡，滑动卡片，图文标题，入口
此图片来自于网络
3. 卡片式形式三
这种形式上图下文字，或者是上标题，下图片的形式，这种形式特别在图片素材的选择上尤为重要，有视觉效果好的图片通过剪切，处理，合成，摄影，插画等等方式，出现的图片质量上好的话可以带动整个设计的逼格，通过有效的图片传达，文字传达，让用户更清晰的了解。这样的形似一般在入口或者列表的形式出现的比较多，同样也能体现出整体化和视觉化
应用场景：滑动卡片，图文标题，入口，列表
此图片来自于网络
4. 卡片式形式四
大图卡片式，一般以摄影图片，插画形式，文字压与图片之上，这样的效果更具有冲击力，也能显得出比较潮流。体验也很不错，放大视觉，展示内容，图片相结合，让浏览者更愿意多看一会。表达的图片与文字内容相符，做到图文交融的程度。一般这样对于图片的选择上还是比较要求严格的。没有质量的图效果会降低。
应用场景：列表，说明，入口，天气
此图片来自于网络
5.卡片式形式五
列表卡片设计，这种形式一般白色的卡片，上面标题，头像，按钮，扁平插画形式体现，更多应用在一级页面的下方内容，以及二级页面的列表页或者集合页，整体弱化背景以白色为主，给予圆角及阴影承托出层次感同时，体现上面内容部分。每个模块的单元体具有统一的视觉。
应用场景：列表，集合页，入口
此图片来自于网络
6. 卡片式形式六
大卡片式设计，表现为一块特大的卡片式，上面会有标题，按钮等信息，同样表现出突出层次感，个性化设计的特质。体现出内容，一般背景有颜色上面卡片为白色，如下面背景为白色，那么卡片的形式也可色块，在对比上有个反差，才能突出卡片的作用性。
应用场景：提示，说明，优惠劵，劵，入口
此图片来自于网络
以上总结的几种卡片的形式，在设计中可以根据情况而设计，卡片多样化，布局多样化，适合自己产品的才最重要，虽然在界面设计中常用的设计，但不要盲目的为了卡片而卡片套用设计，这样起不到作用反而效果达不到理想程度。希望几个卡片形式总结能给大家带来一些灵感和启发。
同样在这些卡片中会有一些基本的共同的特点
共同的特点是
1. 四个角都是圆角
2. 根据潮流渐变色或白卡片
3. 色块下的阴影，色块下的阴影更能体现出层次
4. 卡片上面组成部分，标题，副标题，图形，按钮，图片，头像
5. 字体大小，字体颜色的变化
6. 一般卡片应用在会员，列表，说明，优惠劵，分类，类别，集合页，欢迎页等场景常见
三、卡片正确设计知识
为了讲解文章，顺叔临时构思一个产品原型，而快速进行了简单的设计，一个第一版，一个优化版，主要为了讲解一下这个卡片设计一些问题，
以下此图为构思的原型图
经过分析原型图之后开始进行设计，首先设计一个版本的，如果这样卡片布局设计，这样色彩搭配的情况下，会怎么样呢，整体设计用了蓝紫色为主色调，首先铺蓝紫色的色块作为背景，然后上面放白色卡片，以至于卡片上详细的内容，比如数字，图形 能更好的丰富支撑卡片。同样数据流也是比较重要的C位。也是比较重要的位置。接着根据原型图下面有两个卡片，通过扁平化设计，以色块为主设计一个蓝色，一个橙色的卡片，上面并有图标，头像，以及标题，两个颜色的对比，更让视觉有冲击力，整体看这个设计并没有什么，但有个问题在于单个模块拿出来效果的确都不错，但组成之后上面的卡片C位让下面的两个带颜色的卡片抢了视觉，当打开这个界面的时候视觉落点在彩色卡片上，那么这个整体设计上就出现了问题，上面的数据，白色卡片其实是比较重要的，而且整个画面都是卡片毫无设计上的变化，
那么只能在这个基础上在进行优化，其实大家在做设计的同时也这样，在考虑功能模块前提下，用户体验，也要考虑视觉体验，那么视觉从哪方面来，色彩、层次、版式等等方面。那么能不能在进行一下优化呢，其实还是有空间在进行优化。以下图为第一版
设计第一版
根据上面的设计在进行优化，同样保留白色卡片部分元素，在卡片与卡片之间放一些颜色的图标，这样更好的给功能上快捷入口，也能给卡片设计增添了变化。使得整个画面更灵活
虽然白色卡片，但有一些色彩的点缀，也让白色卡片活跃起来，把颜色的卡片改成白色卡片，从上到下的版式舒服多了，也没有那么跳。整个风格更简约，同时功能也更全面。
调整后
从原型图，在到设计第一版，在到优化调整之后，证明一点，卡片不要因为卡片而套设计，反而会失去效果，考虑功能模块，用户体验，视觉体验也一定让整体舒服。一直都说，绘画中需要有主有次，设计中也一定要有主，有次的进行设计。这样层级关系才能更清晰。
但这些条件一定是从，体验、色彩、布局、版式等方面进行对比和研究的。设计不要先着急做设计，前期的进行思考，逻辑清楚了，在进行设计的时候会更加的顺畅。卡片式设计，大家都在应用，希望这个文章能给大家带来一点点知识点，那就不枉费我在熬夜写这篇文章。
不为别的，只是一个喜欢分享的肉团子。这篇文章就写到这里，如果喜欢请给个赞吧。如内容有没说到的地方，各位可以进行补充，以上两个图你稀罕哪个呢？
随着当今越来越多的信息需要被展示、曝光，而移动设备的屏幕空间又有限，为了减少用户在使用应用时的跳转，减少用户的路径，设计师们开辟了第三个维度——即在 z 轴上展示叠加的分层动效进行交互表达，从二维到三维，这样更能有效利用手机屏幕上的有限空间，这也是以后界面设计的大趋势。
这个思维方式最早是在安卓的MATERIAL DESIGN语言上体现出来的。（以下简称MD）
Depth（深度）：
Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.On the web, the UI expresses 3D space by manipulating the y-axis.
在MD的设计规范中，用Depth来说明界面设计中的深度，既而在界面设计中引入了Z轴的设计思维，将界面设计由二维设计引进了三维设计思维的地带。MD通过抽象化纸片在物理世界中的形态，定义除了各种信息层级以及常用状态的表达方式。
再来看看，如今iOS的最新版本iOS 12，也已经开始向这一方向进行发展。最典型的要属以下的iOS的内置应用：股市、语音备忘录、地图、钱包、音乐、播客、App Store等。
三维设计法，在界面设计当中，主要分为两个方向来运用，视觉设计和交互设计。
人们通过双眼能够分辨出物体远近大小的形态，因此如果利用这样的视觉规律，便可以在画面中呈现出真实的效果，突出视觉的立体化。
因为使画面产生三维的模拟真实的效果，可以画面更具有吸引力，我们之所以能够看清楚物体，是因为有光的存在，现实生活的影子是因光而产生的，才是一个真实立体形。如果能恰当运用光影的效果，那将会让图形在进行三维空间转换时变得更加凸显。
当今，在界面的视觉设计方面，通过层叠、卡片化和投影的设计手法来对界面的内容进行处理，可以增加界面的层次感。在如今同质化严重的扁平化设计下，能给人焕然一新的感觉，同时也给人一种内容呼之欲出的感觉，加强了点击的欲望。这样的设计手法让界面的Z轴空间得以加强，必将是下一个新的趋势。
例如：KEEP、潮汐、虾米音乐
例如：Dribbble 和 Behance
图片来源于网络
而在交互设计方面，想同时展示多种内容时，假设对一个需求有着很强的曝光要求，或者是想让用户知道有这项内容的存在，但又不想让页面内容过长，导致被忽略或难以找到时，可以采用页面Z轴层级覆盖的表现形式。
采用了Z轴层级覆盖的架构形式，用户主要的交互操作变为上拉、下拉来阅读信息，减少了点击跳转这一类的操作，减少了用户的操作成本。且滑动手势，是以后人机交互发展中的一个必然趋势。
在一些APP中有所表现的有：豆瓣FM、豆瓣详情页等。（大家可以从这些APP上获取设计灵感）
豆瓣FM
豆瓣（电影详情页）
例如：
上图是京东（APP）的商品详情页，这时候我们接到的需求是将上图的文案放进这个界面中。
要知道在寸土寸金的APP界面中，每一个位置都是十分的宝贵，一但放置不佳，就会给用户的视觉流造成一定的影响，使得用户体验下降。况且，还是京东这样流量巨大的电商APP，位置便显得更加宝贵，而上图中的红色标记范围就是我们的限制区域，下面我们先来看一个不合理的做法。
上图我们是直接加了一个界面，将这个模块设定为可以进行跳转，从而达到显示完整（文案）的需求。
这样做，不仅增加了用户的路径，而且还会给来回切换的用户造成一定的困扰，消耗了手机的资源的同时，下面的留白也显得很浪费、空旷，视觉上就很不美观。
那么，京东是怎么做的呢？
京东采用了一个浮层设计（Z轴），将全跳转改为半跳转，这便是在界面设计中的Z轴运用，这样既可以达到文案所要求的曝光，也能最大利用让界面的空间，实现与原场景的完美衔接。
通过在 Z 轴上进行分层设计，模拟物理世界中人与物的真实的交互模式，帮助用户理解产品设计，将信息更好的浅层化，这样可以给设计师们带来更多发挥的空间。
在使用这个思维来做设计时，可以事先考虑以下几点：
根据用户使用体验，来判断是否需要使用Z轴分层交互。
这样做是否能帮助用户更好的理解你所做的设计？
空间感设计主要意义是能正确的引导用户，并建立起对产品的使用逻辑。
每一个界面层级只需要表现一件事。
当你想要在界面中加入一个菜单栏但发现没有空间？这时候可以考虑使用Z轴的设计。
谨慎使用Z轴层级交互，因为它会增加空间关系的复杂度。
多参考现实世界中的真实交互，它给你的预期和感受，在互联网设计中的很多灵感都来自于对真实世界的理解。
总结：
我们在做设计时，可以把当前的界面可以想象成一个的三维世界——分作X轴，Y轴，与Z轴，在这三个坐标轴上，可以进行思维上拓展。
在交互设计当中，减少跳转便是减少用户路径，就是使用各种方法在三维空间中，用x轴、y轴、z轴做出最合适、合理的用户体验设计。
前言
之前为大家分享过很多工作的案例，很多伙伴表示收获颇多，之所以分享工作案例是为了，给大家讲解设计思路，让大家明白，为什么这样设计，出于什么目的，要解决什么问题，这些正是UI设计的根本所在，掌握了设计思路就能应对各种问题。
接下来本期的分享，依旧会用真实案例解析从需求到设计的完整过程。
接需求与案例解析
我司的运营小姐姐@我要改个产品的UI，下午找我聊需求。
一、准备工作
提前了解产品，从视觉、交互上感受一遍，标记产品中有疑问的地方，这样大概对产品有个概念，为接下来的沟通做好铺垫。
二、了解业务
首先需要运营小姐姐讲解一下业务逻辑，了解产品涉及到的各种角色，产品使用场景等等，期间把疑问一一了解清楚，尽可能对业务、角色、使用场景有充分的了解。
通过沟通，了解到这个产品是一个H5问卷后台，业务上用来查看问卷统计的结果，使用的人群是公司的运营人员，产品时常会打包卖给客户，客户的使用场景不定，多数用户会用手机端查看统计结果。
三、沟通需求
接下来，沟通中我会先听她讲解需求，讲完后我会问她一些问题，确保我理解的正确。
需求沟通后，此产品问题为：界面太乱，很难用，需要改的好看舒服好用。
这时候就要想到她是不是用了其他体验好的产品，如果是的话，这个产品可能是重要的设计参考，然而了解后并不是因为用了其他产品，是一直以来就不好用，没时间改而已。
接下来的需求沟通就要落实到页面中，需要一起探讨产品，不明白的地方要了解清楚，从中总结优化的地方。
下面开始案例分享：
第一个页面改版
上图为“统计问卷”首页，A、B、C处为页面中较为突出的点，其中C处最为明显，沟通后得知C处图表的切换是为了截取图表做ppt，仅此而已，所以此处UI设计上需要弱化。
其实用户之所以觉得页面看起来不舒服，是因为想看的元素被弱化，而不该看的却过度设计，这样用户在看页面过程就会很费神，因为获取信息要躲开视觉上被过度设计的地方。
例如A处，用了页面中唯一的橘黄色，当初设计者应该是为了能强化区别上下题目的分界，但也成了突出的视觉干扰项。
其实分析后，页面中用户要看的是两个地方，一个是B处答题的比例数据，另一个是旁边的“小记”数据量，而B处进度条的设计过于突出，与文字没有良好的视觉比重。
结合以上问题进行改版：
解决A处问题
把每道题设计为卡片式，这样能很好的区别上下题的界线，题号从突出的橘黄色改为黑色，使得页面视觉上不那么跳跃。
解决B处问题
弱化变细进度条，与文字视觉比重相当，不会显得突兀，排版上下排列改为左右排列，这样能够缩减表格的高度，页面可以显示更多的内容。
解决C处问题
图表切换是个弱功能，使用频率较低，所以放到卡片的右上角弱化设计，用切换的方式展示。
不仅仅是以上的问题，排版的细节也会大大提升产品的质感。
旧版所有元素的排版间距几乎没有什么规律，这也是导致用户对产品有乱糟糟印象的原因。
改进后，用间距去表达元素之间的关系，间距设计常常会用到“黄金比例”或“五分原则”，黄金比例不必多说，五分原则就是相关的元素用周边0.5倍的距离表达亲密关系。
当设计好第一个页面后，需要先给到需求方评审，确认没问题后再继续，这样就尽可能保证了后面的设计是符合他们需要的。
上图只是个最终的结果，过程中做过一些小改动，最初发给需求方设计的页面，需要做简单的设计注解，这样才会更容易被理解，且具有说服力，最终确认没问题再继续其他页面的设计。
第二个页面改版
上图是给做问卷的人配置红包奖品的页面，看完后我表示心疼我们的运营人员。
A处本可以切换项目，但现在的设计显然是不可点击切换的状态。
B处是这个项目总金额统计，目前排版色彩杂乱且拥挤。
C处是给问卷配置红包奖品的各个属性信息，然而元素间没有层次，依旧杂乱拥挤。
D处按钮没有主次关系，排版拥挤。
E处是个“增加奖品”按钮，现在看起来没太大问题。
改版后页面延续了首页的卡片风格，保持一致性。
解决A处问题
“子入口切换”用户很难理解，因为不是确切词，例如换成“项目切换”“问卷切换”就很容易理解，当然也是可以去掉的，因为运营人员对每个项目都很熟悉，没必要注解。
解决B处问题
重新定义排版后，显而易见会比之前要清晰透气很多，动态变化的金额用颜色突出强调，未配置金额为次要信息，用灰色表示。
解决C处问题
改变排版样式，视觉上有主有次，“配置数量”跟“个数”为重复信息，只留一个即可。
解决D处问题
按钮“已启动点击禁用”拆分为“点击下线”按钮，和问卷状态（进行中），“展开”按钮放到最左边，和“编辑”并列。
解决E处问题
“新增奖品”按钮，如果增加配置奖品列表，就会把按钮挤到不可视区域，这样的设计不是特别推荐，所以设计成悬浮按钮，旧版本已经建立用户的按钮功能认知，悬浮按钮上面配加号图标，用户就会很容易理解。
第三个页面改版
上图还是第二个改版页面，此次要改版的是，点开“展开”按钮显示的属性，目前的问题是有很多重复的信息，例如时间，上面已经显示时间，最下面又出现同样的时间。
最严重的问题是，所有灰色字的注释，不符合逻辑，不应该在展开的属性下面提示，因为这已经是编辑好的内容，再去提示就意义不大了。
模拟一个场景，比如上图红圈的地方，已经设置好了奖品名称为“幸运红包”，展开后有个灰色字提示“用户中奖后，用于显示给用户看”，如果发现理解错了，然而在此页面是不可以改正的，所以灰色字应该在“新增奖品”的编辑中提示，用户在输入信息的场景下，提示才是最合理的。
页面改进后，去掉重复的属性信息，去掉灰色字的提示，（去掉这些内容是提前跟需求方探讨过的）最后用最少的空间展示了所有的信息，更清晰明了，其实展开后的卡片高度，完全也是可以考虑去掉“展开”“收起”的功能。
然后
第四个页面改版
当我看到这个页面时，不知道为什么要有A处的信息，所以再次请教需求方寻求答案，给我的答案是“子入口”“IP”是为了给开发人员提供便捷查询，例如这个中奖者存在刷红包行为，可以通过A处的信息进行查询。
很显然这并不合理，因为对用户来说没有用，还造成了认知负担，如果存在不良行为，提供编号信息就可以搞定了。
B处的设计，让页面没有条理，更是一个信息干扰项。
页面改进后，依然沿用首页卡片式的设计，去掉“子入口”“IP”“昵称”多余属性，去掉昵称是因为答问卷一般不会获取到用户昵称。
“中奖”和“未中奖”卡片，设计上有明显的视觉比重差异，去掉未中奖的绿色标示，只突出中奖者。
最后一个页面改版
上图是做问卷用户答案页，页面的弹窗偏小，使用起来很憋气，A处不知道什么意思，询问后可以直接去掉，B处是一个不合理的“确定”按钮，原因是用词错误，应该叫“关闭”更合适，因为这个页面是查看信息，并没有执行某些任务操作。
改进后加大弹窗，去掉页面中的多余元素颜色，上下题目用留白间距隔开，去掉“确定”大按钮，因为太占面积，改为右上角“关闭”按钮。
最后
当我们看到一个页面时，如果只看到美与丑，那是不客观的，这可能是对UI设计最大的误解，UI的美不只体现在表面上，还有内在的体验中。
UI设计一般都会带着一种目的进行设计，目的绝不只是设计的好看，更多的是创造一个良好的产品体验，同时能够助力业务，实现产品价值。
UI设计师对于业务要积极的去了解，对需求不要总被动接收，要有意识的去探讨挖掘，对业务的熟知，需求的准确拿捏，是你开始设计前最好的基石。
蓝蓝设计的小编 http://www.lanlanwork.com