ui设计案例（ui设计案例分析怎么写（ui设计案例欣赏分析））

本文目录

• ui设计案例分析怎么写(ui设计案例欣赏分析)
• 如何做一个优秀的UI设计师呢
• 透明背景png在UI设计中有何妙用
• UI设计如何突破设计瓶颈，成为更加有价值的设计师
• APP UI设计的流程，越详细做好，希望有经验的大神可以回答

ui设计案例分析怎么写(ui设计案例欣赏分析)

案例分析的四大步骤：

1、配色

2、排版布局

3、符合用户浏览习惯

4、细节处理得当，用户能简单操作。

四点总结了案例分析是如何写的。

如何做一个优秀的UI设计师呢

一、两道思维
很多 UI 拿到一个页面原型的时候，就立马打开各大设计网站找参考，然后照着参考页面上的效果，生搬硬套到原型上，这只是达到了单纯美化页面的效果。
那么拿到原型后应该带着怎样的思维来进行思考呢？
第一道思维：交互思维
先了解页面实现什么功能，功能的交互操作流程是怎样的，也就是说用户操作这个页面上的功能时，用户的行为路径是怎样的。
第二道思维：视觉思维
了解完功能、交互后，提取原型中视觉组成元素，细分归类，每一类应用统一性原则进行设计。
然后交互与视觉一同结合来设计界面。
二、思维应用
结合案例我们来看下两道思维是如何进行的。
第一道思维：交互思维
了解功能交互流程。
根据实例原型分析出用户行为路径：
用户行为路径：
注意点：
用户行为路径的获取，一定要跟产品经理、交互设计师进行沟通确认清楚。
用户行为路径某些步骤中，也有先后之分，比如第1步中，用户输入了账户地址后，才会有账户的相关数据显示。
用户行为路径可以支撑信息内容进行归类分组。
第二道思维：视觉思维
提取视觉组成元素。
视觉元素：
注意点：
提取视觉组件元素尽量详细归类。
如有视觉规范，视觉组件元素风格应用请遵循视觉规范。
如无视觉规范，同类视觉组件元素应用统一性原则进行设计。
三、检验方案
我们带着两道思维来检验一下这位设计师输出的方案：
问题1：交互层级
问题所在：
数据显示在前，输入在后，交互操作层级有点混乱。
问题截图：
问题解决：
用户行为路径中，第1步有个先后顺序，先输入地址，后显示数据，在进行信息内容布局设计的时候同样需要有先后顺序，所以交互操作层级一定程度上影响着布局排版。
问题2：步骤关联
问题所在：
「批量转账」按钮归类到了第1步的信息模块中，交互操作逻辑有点不通畅。
问题截图：
解决方案：
用户行为路径中，用户核心费用信息后，最有可能的行为就是点击「批量转账」按钮，所以「批量转账」按钮与转账费用信息的操作关联性比较大，应该在同一模块里会更符合交互操作逻辑。
问题3：颜色应用
问题所在：
主色、点缀色、辅助色各自的应用范围没有规则，颜色应用混乱。
问题截图：
问题解决：
一个页面或者项目中，各种颜色的应用范围需要有一定规范，文字使用什么颜色、按钮使用什么颜色、输入组件使用什么颜色、背景使用什么颜色都需要有对应的使用规则。
问题4：输入控件
问题所在：
输入类组件样式存在多样性，同样是输入框，有多种样式，会造成用户交互操作上的认知有误。
问题截图：
问题解决：
一个页面或者项目中，输入类组件样式应用统一性原则，保持视觉风格一致，从而减少用户操作认知偏差。
问题5：按钮样式
问题所在：
按钮样式应用到不具备按钮点击属性的对象上，用户会认为也是可点击，会造成用户交互操作上的认知有误。
问题截图：
问题解决：
一个页面或者项目中，不具备按钮点击属性的元素尽量不要套用按钮样式，减少用户操作认知偏差。
举个例子：人形的稻草套上人的衣服，成功了欺骗了人们，造成了认知偏差。
问题6：信息展示
问题所在：
同类信息内容的展示存在多样式，传达过程中加重了用户的认知负担。
问题截图：
问题解决：
一个页面或者项目中，同类信息内容的展示应用相似性原则保持视觉风格一致，因为相似性的布局可以更加高效地传达信息。
举个例子：电商页面，金额信息展示；理财页面，收益信息的展示；都是应用相似性的布局，即统一又高效地传达信息。
问题7：图标风格
问题所在：
图标风格不一致，图形反白风格，立体风格，线性风格。
问题截图：
问题解决：
根据产品的特性，建议统一的图标风格，选择线性、面性、渐变、立体等风格。
问题八：对齐间隔
问题所在：
页面元素的对齐、间隔没有规律，整体视觉显得松散，不严谨。
问题截图：
问题解决：
可以利用栅格系统，把页面信息内容规整起来。
四、优化方案
根据发现的问题，我们来看一下优化后的设计方案：
优化1：交互路径
根据用户行为路径，将相关联的信息归类到一个模块，每个步骤划分到一个模块，相关联的步骤合并到一个模块，模块内完成各自的操作展示任务，模块之间信息内容互不干扰，但从结构布局又能够形成符合交互操作逻辑。
优化2：颜色规范
规范颜色，配色的方法在这里不做深入讨论，这里方法的是基于品牌色通过饱和度、亮度、透明度的变化来得出文字各层级的颜色、边框的颜色。
优化3：输入控件
对输入类控件的样式进行了统一，让用户从视觉上就能够清楚地分辨出哪些是可以进行输入操作的，从而减少用户对交互操作上的认知成本，提高信息输入效率。
输入控件进行交互时，要有交互状态反馈，默认状态、选中状态、错误状态。视情况而定，可以增加鼠标移上状态和不可输入状态。
状态变化时的颜色应用，可以通过变换色相的透明度来保持色彩的一致性。
优化4：按钮规范
对按钮进行了分类，分为常规按钮、图标按钮、文字按钮；对按钮样式用颜色进行了统一；按钮要有交互状态反馈，不可点击状态、可点击状态、鼠标移上状态、鼠标按下。
状态变化时的颜色应用，可以通过变换色相的饱和度、亮度、透明度来保持色彩的一致性。
优化5：信息展示
对信息内容应用相似性原则进行了排版的统一处理，每个小类信息的标题与内容采用统一排版格式，然后重复应用，有助于提高信息获取效率。
优化6：图标风格
这里的图标应用于功能性图标，统一采用线性圆角风格。功能性图标需要注意图标的形状要能够正确有效地传达出功能的含义。
优化7：对齐间隔
应用栅格系统对视觉元素之间的对齐、间隔进行调整，使页面视觉更加严谨，页面信息更容易阅读。
五、总结
交互思维
了解页面中的功能交互流程，梳理用户操作行为路径，可以对行为步骤中的信息内容进行归类分组提供依据，最终有助于页面信息内容的排版布局。
视觉思维
提取视觉组成元素，对颜色、文字、控件、图标等每一类应用统一性原则进行规范设计，再通过视觉元素本身相互组合，最终应用回信息内容上，建立规范的视觉感。
设计一个页面，交互思维和视觉思维是互相配合的，缺一不可，最终都是为了共同去构造符合交互操作逻辑、满足视觉美感的界面。

透明背景png在UI设计中有何妙用

现在很多海报、Banner、网页都喜欢用透明效果作为背景，在增添页面的对照感和可读性的同时对整体的效果妨碍又不大，可谓一举两得。这篇好文，列举了12种透明效果背景的设计方法，收!
01. 使乱七八糟的背景变得流畅
利用插图和有质感的模范背景，能加上个性去设计。但是同时，很可能会变得乱七八糟，使文字无法阅读。作为解决的方法，可以重叠一个半透明的背景。
下面这个例子，将漂亮的红酒酿造图案作为背景利用的宣传活动海报。如果，没有半透明的白色滤色片的话，设计的就很过分，文字文本(特别小的字体)将无法阅读。
即使在显示背景，白色图层的使用也要注意，插图的颜色和调整下降的点也需要引起注意。PhotoShop或者是Illustrator中将不透明度试着从0%到100%自己调整看看吧。
还有一个例子，下面的明信片，将风景画渐隐，添加上朴素而又华丽的圆形背景，将文字文本重叠上去。
02. 尝试着让文字更加显眼
照片是一个受欢迎的背景，不论是商品海报还是网站的标题、社交媒体用的设计，打印印刷和WEB项目这两方面都可以使用。只是，由于照片的构图，色调，明度的原因，不是很容易就能找到令人满意的文字文本放置的位置。
下面的例子，由于文字的原因(黑白照片变得难以看见)，半透明的形状互相重叠。另外，透明度不同的图层互相重叠，独一无二的效果就显示出来了。
接下来是另一个参考案例，下面的网页设计使用了白色透明图层来重叠，将文字放在单色照片的上面来显示。
这个手法是利用了色彩的反转。例如，半透明的黑色图层和白色的文字文本什么的。
03. 像空气一样干净的展示
当用于设计的配件已经决定，可以通过利用杂志的版面设计来体现出简单的空间和范围。例如下面的这个网页设计，占大部分半透明的背景层，流畅整齐的字体组合，通过有组织的布局，产生简约的风格。(在这里有一个下载的链接，可以下一些素材，我先把地址放在这里，以后再来翻译。 【完全免费可商用，60种美丽的字体下载!2015年版】)
下面的一套商品目录，用三原色的半透明图层和一张照片相互重叠，然后再加入少量的文字文本，表现出了一种简约而不简单的风格。
04. 将读者的注意力集中起来
设计成半透明的背景图层将其全部覆盖，也不一定非要是四方形。半透明图层上添加一个小小的窗户，通过调整透明度，在那里设计出特定的部分，将读者的注意力集中到那里。
下面的这个例子，就是通过将纯色背景挖出文字的形状来达到集中视觉(英文：Focal Point)的一个效果，海报上的登场人物高明的集中在恰当的位置。
而接下来的这个设计，全部是由三角形的半透明图层布置起来的。将视线诱导到女性的脸部，成为视觉的焦点。
05. 让内容变得显眼
包装箱，罩子上的封面等设计，在内容上都使用了透明的图层，这样就会使其变得非常的有吸引力。
下面的这个杂志设计，在透明清晰的封面上，添加上了白色文字的LOGO。通过这种方法，让他产生光泽，强调出下面的图像照片。
下面的两个样品，就是在食品包装上运用到了【透明】效果这样的一个技巧。让人第一眼，就能分辨出各种各样的豆子在包装内，色泽和豆子的形状都能不费功夫的区分出的食品包装设计。
下面的这个设计，在法国的咖啡馆café called Voyageur du Temps(法语中【时间旅行者】的意思)中被利用于朴素的纸袋上。稍稍有一点透明可以看见内容，通过添加具有年份气息的宇宙地图，将品牌魅力成功的塑造出来了。
06. 尝试着让图层重叠
半透明的背景设计的优点在于，可以使复数的背景图层相互重叠，版面的深度、颜色和照片、形状等不同的图层叠加在一起，产生出一种引人注目的效果。
下面的这个海报设计，具有象征性的人像照片，将版面的层次感给表现出来了，同时追加上了文字半透明图层效果。其结果诞生出了一种对比感强烈，有生气的有层次感的版面设计。
下面这一个设计案例，表现出了一种将图像照片和半透明的颜色层，几何学的样式叠加起来的设计效果。
、
07. 稍稍展现出一点质感
乱七八糟的背景细节用半透明的图层覆盖，这种技巧最初是持反对意见的，但你可以添加一点点的独特的设计，来让他变得更加有魅力。
下面的这个服装商店广告banne，将主要的文字文本挖空，格子背景的花纹隐约可见。同时能够看见整个背景，表现出一种风格整体统一的设计感。
下面这个设计案例，图层文字互相重叠，使其更容易看见，它结合了一些之前介绍过的技巧。绿色的圆形与照片互相重叠，照片的细节你也可以看到。
08. 添加透明渐变图层
利用透明图层，可以添加很多颜色来进行设计。相较于单色的背景设计，半透明可以给人带来一种柔软的印象。
下面这个设计案例，利用柔和的半透明中间色将其放在文字的下方。特别是半透明渐变的那个区域真是绝妙的组合。
在另一个设计案例中，将渐变色利用在移动端的用户界面设计上。在这里使用了鲜艳的配色，文字文本和背景透明的保守的方法。
09. 利用独特的混合效果
很多设计应用中，在透明图层上利用混合模式的功能，将颜色，照片和其他一些设计要素混合在一起。通常这种技术，图层重叠和照片组合的使用方法，可以和之前的设计技巧组合起来。
下面这个设计，纸张的纹理是手绘草图、旧照片、墨水污渍重叠混合起来的，复古风格的数字拼贴海报。因此是将很多的设计要素组合起来，利用半透明图层，将这些要素全部融合到一起的设计。
下面的这个海报设计，如何将每种颜色融合来引起我们的注意，和文字文本一起使用，也是一种流行的混合方法。
10. 强化品牌推广
在项目设计的背景下，你是不需要稍候补充的。品牌和颜色作为视觉要素，例如LOGO标志，可以将品牌理念传递出来。
下面的这个设计是GOOGLE的年终报告设计，在这里就采用了鲜艳的配色和半透明的背景图层。
下面的这个网页设计，如果要通过他的配色方案和几何形状可以联想到它的LOGO，你必须要创建一个半透明背景层和图形要素。
11. 强调特定的范围
特别是使用了文字文本和其他设计要素的生动的半透明彩色背景层，可以更好的强调。
在下面的这个广告设计中，灵活运用半透明红色图层，和黑白的人物图像做出对比，将图像中的SALE强调出来了。
在这里也使用了红色半透明图层，将人们的视线集中到网站的特定区域。
12. 展现有趣的构图
最后，有可能是很常见的表现手法，但重点是在创意上。透明度的调整方法，透明图层可以运用在任何设计方法上，他是一个多功能的工具。接下来让我们看看独特的设计方案。
下面这些，一个轻微的印象将成为决定性因素，是书的封面的概念设计。通过蓝色的渐变图层只露出文字文本顶端的一部分，来表现出鱼翅从海面上露出来的样子。
下面这张通过在老音乐电影海报下面，强调一个具有代表性的电影画面，用白色的字符文本作为背景，电影标题创造出雨的形状，同时传递多个意思，将意思组合表达出来。
下面这些是电影节海报设计，颜色鲜艳的半透明圆形添加上去，同时连接上两个完全不同的照片，组合产生了新的魅力。
最后
半透明图层有时候虽然也觉得它很麻烦，但是有时候它也会让配图那些变得更为精致，以上12个万能小技巧，你记住了吗?

UI设计如何突破设计瓶颈，成为更加有价值的设计师

最近在高高手上学习了张双老师的《商业 UI 设计：全链式设计方法与流程》视频教程，收获不少，因此总结下来分享给大家。

UI设计如何突破设计瓶颈，成为更加有价值的设计师呢？

首先我们来了解下 UI 设计师需要具备的能力点，看如下图 UI 设计能力模型图：

与设计息息相关的三个能力是：沟通能力、专业设计、分析解决问题。如上图，我们可以看到一个非常有趣的点，我们虽然是设计师，但是我们要求设计师的沟通能力＞专业设计能力，这是为什么呢？因为UI设计本质就是一个服务型的行业（它并不是纯美学，纯视觉上的一些表现），要服务好我们的用户和产品。那么沟通能力有助于我们去做好服务。这也就要求我们UI要注重稿件的可用性。

那沟通能力在我们设计过程中是如何体现的呢？

通过与产品、交互设计师的沟通（帮产品梳理出合理的产品方案，帮交互梳理出合理的原型产出），发现问题解决问题，而更好的服务于产品与用户，也从而让设计更加言之有物（有理有据）。

这也就要求我们打破传统的设计思维，去扩大自己的职能范围，去做一些产品和交互，而不是执行化地做些视觉工作， 也因此逐渐的走出我们的瓶颈点。

这也就是 普通设计师与资深设计师的区别， 资深设计师的设计不仅仅保证了设计的精细度，视觉上很美观，而且设计更加有理论的支撑，有更多的商业价值。

因此要走出我们的瓶颈点，需要我们去做到设计更加言之有物，更加有理论的支撑。

那么如何做到让设计更加有理论的支撑，有更多的商业价值呢？

这也就引出了张双老师的讲解重点——全链路的设计流程。

这也是我们UI设计未来的发展方向。

随着UI行业的发展，行业竞争越来越激烈，从一个只会ps就能拿到一个收入不菲的offer到用户体验的普及，到2016-2017行业开始进行筛选和过滤，2018年，未来我们更加需要全链路和复合化的设计人才。

那全链路的设计流程是什么样的呢？

首先我们来了解下传统设计流程。

如上图，我们不难看出我们设计是走在中后环节的，这就导致一个问题点，就是我们在做稿件输出的时候会比较闭塞，主要表现在两点 ①不了解产品背景 ②不明白交互原型为何这样布局等。

所以我们不难看出， 传统的设计流程导致我们只是做些执行化的设计工作，这也就是为什么我们会出现瓶颈点的原因。

因此我们要走出传统的设计流程，逐渐去设计一些产品和交互，让自己的职能范围更加广一些，朝全链路的方向发展。

全链路设计流程分以下6步：

这些流程是贯穿在设计前中后的：

设计之前：发现问题，背景解析。

设计中：解决方案，视觉验证。

设计后：产品上线之后，数据跟踪，项目复盘。

相对于全链路设计流程，我们很容易发现全链路设计流程的优点：

1、全链路能给我们带来一个更加全面的设计思考 

2、让我们的设计方案更加言之有物，有理有据。

接下来我们一一来讲解全链路设计流程的步骤：

一.发现问题、背景解析

发现问题、背景解析这两个一起讲，因为这两个均属于设计前做的事情，均属于分析产品需求，通过做产品分析，可以达到产品的颜值提升和体验提升。

那我们如何来分析产品需求呢？ 我们可以用5W1H产品分析方法

这就要求我们设计师在拿到产品文档的时候一定要去做一个解读工作，和产品经理沟通，并且拿到交互原型后，做背景解析，在产品整体内容呈现上面，梳理出更加符合用户需求的点。

①产品背景：

要做产品背景的分析，我们可以从以下三个方面去分析： 要做什么、竞品状况、行业资料

通过了解要做什么，我们思考要给用户怎么样的视觉感？

通过了解竞品状况，我们要去思考是否要保持一致的设计布局？（布局是否要和竞品保持一致，主要是考虑如果竞品已经把用户习惯培养的非常成熟时，当我们再去做一些创新的产品设计，一定要让用户感觉到相同的使用操作。这时可去做些视觉上的创新，交互布局上的创新不需要做很大的改变。）

通过了解行业资料，我们要去想是否还有做的必要？

②目标人群：

要做目标人群的分析，我们可以从以下三个方面去分析：

a 人群年龄（主要用户集中在哪个区间）, 对应到设计，我们要思考的是这部分精准人群的偏好是什么？

b 性别分布（男女比例如何），对应到设计，如果是女性偏多，我们要思考的是女性的色彩偏好是什么？

c 兴趣特征（业余喜欢干什么）对应到设计，如果是喜欢看杂志？那我们是否可以界面融入杂志的感觉？也就是线下的元素搬到线上。或者做运营广告的时候在哪里投放比较容易让用户看到？

③预期目标：

要做目标人群的分析，我们可以从以下二个方面去分析：

a 想要解决什么？ （这次需求是要解决什么问题？达到什么样的目的？要如何去做？复现分析一下）

b 有没有替代方案？ （行业中有没有成熟解决方案，是否需要借鉴）

④使用场景：

要了解用户的使用场景，我们可以从以下三个方面去分析：

a 交互旅程图 ： 在这个需求中，用户从哪里来，又到哪里去。即这是处在交互流程的哪一步？这一步的前后环境是咋样的？通过做这个，可以帮助我们做好界面的合理性，也就是信息层级，帮助我们判断视觉哪里做的强一些，哪里做的弱一些。

b 场景特征：  比如用户是在怎样的环境中使用的？昏暗的还是明亮的环境？有无干扰？这有助于我们在使用色彩的时候做出判断，颜色是要用明亮的还是暗一些的？

另外，做完后需要我们去做些强光测试和烛光测试

C 用户心理。  用户在场景中，心理状态是如何的？比如我们做一个订单结果页，这一步，用户是比较焦急的想要知道下单结果的，这时候我们就需要把用户结果状态突出，同时做好信息展示，以便提升用户的阅读效率。

⑤使用节点：
做这一步，是 为了避免我们过于忙碌的一个状态 ，我们需要了解一下产品的优先级，以及根据这些优先级我们来做一个排期。  那我们如何来进行排期呢？我们可以通过KANO模型来进行排期：

KANO模型：可以把我们很多设计需求和产品的需求分成五个维度，这五个维度是根据用户对整个产品的期望值而言的。如下图：

我们做需求的顺序是第一做必备因素，第二期望因素，第三魅力因素，第四无差异因素和第五方向因素是我们在产品过程中尽量不要去做的点，这时候我们就要和产品和交互沟通，把这些不好的点去掉。                                                                                

⑥ 如何验证：

这一步我觉得是属于后面视觉验证、数据跟踪这步了，后续会在视觉这一块详细讲到。 
以上就是6步模块化产品分析方法。也就是如何全链式设计流程里的第一、第二步。

二  解决方案

解决方案应该有很多。本次的视频教学里提到了一个：界面排版依据：十字交叉分析方法。

如上图，就是针对界面中用户关注的一些信息，根据其重要程度和紧急程度划分来进行排版布局。

判断依据是：哪些功能属于重要的（针对用户的）？哪些属于紧急的（针对产品的）？

先列出用户比较关注的一些点，然后进行调研，用数据说话，筛选出用户比较重要的点和对于产品比较紧急的点，然后按照上图的十字交叉分析来进行排版布局。

三  视觉验证→设计验证

这一块，视频讲解里是说“视觉验证”，但这里我想把UI设计验证的几个结合起来说，那我暂且就给它命名为“ 设计验证 ”，这一步是在稿件完成之后上线之前我们再去做的。

视频讲解中，前后一共提到过二个大的方面的测试验证： 界面浏览测试、可用性测试

①界面浏览测试

界面浏览测试，即测试稿件的合理性。问自己或者问测试者三个问题，看实际结果有没有达到你预期想要的结果：

1. 这个页面中什么地方最吸引你？ 验证视觉传达是否合理且符合预期

2.你认为这个页面的作用是什么？ 看这个界面设计有没有给用户一个清晰的感知，这个页面是干什么的？也就是功能传递清不清楚

3.当你使用这个页面，是否会使用它提供的功能？ 也就是验证产品优点是否传递清楚

②可用性测试

验证UI的可用性有两种方法： 场景分析，任务测试。 （当然我们除了可以用着两个方法来验证UI的可用性，也同时可以用这两个方法来提高UI可用性。）

a 场景分析： 当我们看到一个稿件，看不出来它的可用性是不是有做好时，我们就可以运用场景分析的方法来验证它的可用性：

场景分析，需要我们像侦探一样去思考，用户是怎么使用我们的产品的？：什么人、什么时间、什么地点、什么事？

举例：

b  任务测试

通过任务测试，可以验证我们设计方案是否被用户所理解了

任务测试，即让用户去完成某个操作，然后查看用户操作过程中的反应，来看我们的设计有没有被理解？没有被理解的原因又是什么？因此我们要怎么改进？

四 数据跟踪

数据跟踪，是在产品上线后，我们用数据的角度来看设计产出。

在我们的设计过程中，往往大部分人都会忽视去做这个，实际上产品不断迭代，我们需要根据后台埋点的一些数据进行分析，然后发现问题，并去解决，所以这个数据跟踪分析还是很有必要的。

当我们稿件设计的细节上，视觉上等没有提升空间的时候，我们可以通过数据还能发现问题点。比如页面的跳转率，购买率等。

还有就是比如我们做了A/B 两个方案的时候，我们不知道到底哪个方案更好，这时候我们就可以做些A／B测试，然后根据后台给我们的一些数据，来看下哪个方案更好，从而来决定用哪个方案。

也可以通过查看数据来查看我们的设计优化有没有得到更好的效果？因此来验证&量化我们的设计产出。

那么接下来，我们要如何去了解数据呢？

举例：腾讯应用宝。

这个由于讲解比较复杂，所以这里就不说了，大家可以去高高手学习张双老师的《商业 UI 设计：全链式设计方法与流程》视频讲解。

五  项目复盘  
项目复盘，根据老师的讲解，在我理解，就是跟别人介绍或者总结一下你做的某个项目的设计工作。我们可以从以下5个方面去讲：
1.设计精细度：

那我们如何阐述设计精细度呢？可以从以下三个方面：

①业务颜色属性。

②渐变幅度的统一及规范

③呼吸感的把控

 比如图标： 
                                                                                                                              2、设计流程

即跟别人介绍下，你在产品环节，交互环节，设计中和设计后环节分别都做了什么？

因此我们也来总结下全链路设计流程中，我们在产品环节，交互环节，设计环节，以及设计后的环节我们应该做些什么事情？ 

见下图：                                                                                                                

3.风格定义

即在做视觉方案风格设计的时候，要不断的对飞机稿进行优化，做到匹配产品的视觉调性。如何做到设计稿最终匹配产品的视觉调性呢？我们可以通过上面讲到的5W1H的方法。

4.设计判断力：

在做一个稿件的改版前和改版后，我们要非常明确的说出来改版后的优点，比如：推动了什么？有什么改变？对用户来说有什么感触？

5.语言组织能力

把自己的成果和所得感悟很好的分享给别人。
以上项目复盘的5个方面，也是我们可以在面试过程中或简历上可以去介绍的5个方面，这样有助于我们拿到心目中的offer。

写在最后

最后希望此文能对你有所帮助，突破设计瓶颈，成为以上设计行业划分中的40% 。

终于写完了！写的不够好或者不对的地方欢迎指正！由于本文涵盖的内容比较多，所以有些点写的有些笼统，如你们想要进行详细的了解，推荐大家去高高手上学习张双老师的《商业 UI 设计：全链式设计方法与流程》视频讲解，里面都会有案例讲解。我仅此只是学习后，总结下来分享给大家。看我这么辛苦的份上，喜欢就点个赞吧～

APP UI设计的流程，越详细做好，希望有经验的大神可以回答

　　移动APP客户端的适配要以一个平台为起始，但是要着眼于多个平台。
　　1) 根据公司的战略，选择一个最先切入的平台;
　　2) 了解该平台的UI 设计规范，可用的UI 控件及交互原则;
　　3) 确定切入的屏幕大小，以此来设计第一个客户端，但是要考虑适配其他屏幕的可能性，是自适应来扩展或者缩小;
　　4) 根据平台及屏幕大小，来选择一款最典型的手机，开始客户端的交互设计。
　　5) 确定客户端的核心目的。如为娱乐为主的，应在设计方式更娱乐性;功能性完成目的为主的，以更易用性为主;
　　6) 根据客户端的功能和内容，来设计客户端的信息架构;
　　7) 根据UCD的原则，来完成客户端的交互原型;
　　最后，我们在交互原型的过程中，需要考虑手机适配的三因素(平台、屏幕、触摸/非触摸)，以便将来的界面适配做的很完美!看完之后，希望对app设计师们有所帮助。