请问UI设计怎么避免改稿的问题

改稿是不可避免的一件事，但是修改到什么程度，这是可以自己掌握的。

最有效的方法是搞定直接拍板的人。

文无第一，武无第二。 设计中，没有对错，所以100个人有100个说法~

声音太多，修改是无止尽的。

只要是合理的要求，设计师都不会不耐烦的。只要不大改，设计师还是会很配合你改稿的。

你找他们合作项目，你就有着对作品的要求啊，那他们也就负责将你的要求合理实现。当然，这也有前提，如果你的要求合理，且正常那么他们改则是无可厚非，但是如果你提一些无理的要求（比如：你要五彩斑斓的黑等等），设计师是有权利拒绝的。

合作是相互的，都是为了项目能够正常合理的进行下去，所以，不要无理取闹，这样合作就能愉快的进行进行下去啦。

这要看你们双方怎样协定，如果好像做好那样由前期效果，施工图，后期现场控制全程做齐，那样跟找个公司做一样了，价钱当然不便宜，完全可以分几期付款，而且现场次数，控制效果（投资）等都应该事前协定。对于设计师来讲，后期把控时间跟前期出图时间相比不一定少，如果他知道工作内容肯定会报一个他认为合理的价钱的。

就双方签订的合同来定。一般合同上会写明设计师到现场几次，然后在施工的过程中如果业主有任何问题都可以设计师沟通，并解决。恩，其实设计师对待每个作品都是很认真的，都想把自己的想法完美地表现出来，所以不会存在后期设计师不愿意配合的情况。恩，说句题外话，设计师其实很怕业主在不与设计师沟通的情况下就随意地修改方案，结果出来的效果差强人意最后又拆掉重做，费时费力。

那么，我们设计师要做的，就是满足客户需求的同时替他们理清思路强化设计理念，让客户与自己同频引发共鸣和认同感，那么设计方案被推翻的可能性也随之降低。

那么，今天分享的干货之一

就是和客户引发共鸣，寻找认同感

什么是共鸣？

先从一个简单的例子说起，当你和刚认识的人说他自己的故事的时候，你是否有过那么一瞬间相见恨晚的感觉？因为你和他有着相同的经历或者类似的故事！

紧接着，你们无话不说，从相识，到相知，到相爱？这个，就是共鸣！共鸣的产生来自方方面面，有可能是一句话，一件事，一个动作等等

那么在和客户的沟通中，寻找共鸣尤其重要。因为客户会觉得你非常懂他，正所谓“想你所想” ，那客户就觉得一个真正懂得他的人，设计出来的东西应该也和自己想的差不多。

那么共鸣如何寻找呢？

在这里，小易想分享的技巧就是code reading。可以理解为读心的意思，指的是在没有防备，甚至第一次见面时就看透他人的心思，从而更好的与人交流。简而言之，就是在剪短的时间内，让别人相信“你很懂他，或者你知道他的事”技巧，也可说成是一种赢得别人信任的技巧。

简单的来说——眼神观察言谈举止

去观察对方的言谈举止，推断出对方的心理活动，然后尝试着以他的心理活动出发，去和对方交流，寻找共鸣，甚至有时候能够通过言语或者行为动作，让对方觉得和你相见恨晚。

认同感有多重要呢？

小易在举个例子，LV好吗？GUCCI好吗？你们认可他嘛？如果认可，那么假设他新出了一款包，无论定位多少，起码他是奢侈品，一般人买不起，在你的认知里，他就是奢侈品，这就是认同感。

认同感如何寻找呢？

其实，和共鸣是相辅相成的，社会上最供不应求的，无非就是“了解我”、“信任我”、“接纳我”这种类型的人。因此，如果你认真努力的去了解别人的心意，对客户来说“物以稀为贵”，非但客户抢着成为你的朋友、想和你恋爱、买你的商品，用你的方案，也会蜂拥而来的寻找你，所以，共鸣感和认同感，在沟通时候的重要性，相信你已经了解了吧？

二、从开始就整体效果速稿，像做应试题目样做草稿，不在细节上费时间，不按自己眼光做稿。这样的好处是避免内伤，不然累死累活做出的东西，自我感觉良好，拿给客户结果一句话给毙了。这样的悲剧是长时间没了自己的风格，

1.页面要表达的意思是否正确

在设计页面的时候，需要注意页面要传达给用户的重点信息。

例如本次案例的产品需求中，该页面的功能是促使用户快速下单，信息上则要侧重于价格与优惠信息。（如下图）

首屏信息是给用户的第一印象，在用户打开页面，尽可能展现出更多用户感兴趣的内容。

而此次页面需要突出促销优惠信息，次要信息则放在后面。（如下图）

2. 页面视觉重点

相信大家平时经常听说0.618的黄金比例（斐波那契数列）。屏幕方寸间合理运用黄金比例可以让界面视觉重心更加平稳，视觉更加舒适。

同时有助于界面区域分割，集中视觉焦点，承载更重要的信息，让整个界面布局更加合理。（如下图）

淘宝、京东到家等成熟的一线产品黄金比例运用，在视觉焦点区域都向用户展示了关键信息。

3. 元素间距符合各层级的关系

为什么页面会杂乱无章？主要是信息一味地堆砌，分布没有区别，但只要遵从以下方法，页面就会清晰很多，有节奏的呼吸感也出来了。

同类的板块不应被混乱的间距区隔开来，它们应该更集中，并且整体与别的板块区别开来。同理，不仅仅是板块，元素与元素之间也是如此，这样用户可以更加快速地看到自己想要的东西。

那么，如何更好地让信息按照相似属性合理分布呢？

这就要利用5分、等分原则来让分布变得更合理，假设相同板块的间距值为a px，则不同板块为2a px。

这样不仅在视觉可以将信息分布开来，还能让整体的布局更加规整，不会凌乱，尽可能使用同一或者同倍数的间距，更便于开发。

案例中，相近元素的间距为16px（a px），则不同类别的元素为32px（2a px）。

1. 字体种类的控制

一个产品如果字体种类过多，会导致界面的不统一与混乱。

通常字体控制尽量在2-3种以内，中文字体、英文字体以及特殊数字字体。如下图：

2. 字号与粗细控制

字号过多使信息失去重点，基础字号控制在3种以内，目的在于清晰区分信息的层级。

正文字号建议为28px，副文案为24px，大标题、价格等重要信息需按实际情况加大，令信息的层级区分更明显。

加粗字体往往是整个界面的视觉焦点，重点的文本（如标题、价格）需要加粗处理，注意控制字体加粗的使用，以免造成信息层级的混乱。下图为调整字号及粗细的前后对比：

3. 行距控制

行距太小不便于用户阅读，太大会显得松散，所以控制在1.2-1.5倍的范围是较为舒适的范围。下图为调整行距的前后对比：

4. 字体颜色

字体主要以黑白灰为主：#333333､#666666､#999999。

字体颜色深浅有序能让信息层级主次分明，产品应该根据不同模块以及同一模块的层级需要调整不同的灰度值，并在产品中反复使用，统一规范输出。

信息越重要，字体颜色越深。除此之外我们还需要注意到什么呢？

也是很多刚入行的设计小伙伴很容易忽略的细节，产品的实际使用环境。

比如，我们此次改版的产品详情界面就是线上下单，线下提货的运营模式，不仅需要考虑室内使用环境，还需要考虑到特殊的室外强光环境。结合下图感受一下：

如何在强光环境下保证产品良好的视觉体验呢？这也是UI走查表需要注意到的细节点：强光测试（大于4.5:1）。

我们先观察一组颜色对比，如下图：

我们会发现字体颜色层级依然是深黑色、中黑色、浅黑色，相信很多设计师朋友已经注意到我们使用的颜色更深了，为什么呢？

为了保证在强光环境下信息的可阅读性，如下图：字体信息最浅层级，浅黑色的色彩数值对比数值都大于4.5:1。

有细心的设计师朋友或许已经注意到色彩值并没#333333、#666666、#999999那么便于记忆了，为什么呢？

为了提升更好的视觉感受与界面的品质感，我们在字体颜色中采用了偏蓝灰，大家不防跟我一起观察下图，上图灰色看上去略微有一些脏脏的感觉，下图视觉更耐看、更有质感。

腾讯新闻、金色财经App 中也应用到了偏蓝灰，有种扑面而来的清爽。

除了常用字体层级的颜色对比，在界面中针对关键的卖点信息还用到强调色，即品牌色。

品牌色也会经常运用到特殊字体、提示文字、链接等等。

改版前，促销信息缺少提示入口。改版后，以品牌色作为入口字体颜色，引起用户注意。（如下图）

1. 视觉比例

由于图标通常都是成群结对的出现，彼此间的统一性显得非常重要，但是常常容易被忽略，可以制定如下图的图标盒子来规范尺寸。

2. 图标设计要点

设计图标时应注意基础形状复用，保持整体识别性。如下图重复使用矩形、圆形、椭圆形等基础形状进行设计，既能统一大小又有整体感。

面性图标

设计时需要注意挖空比例的一致性，保持图标的整体性。如价格走势、降价通知这一排图标，挖空比例控制在20%。

线性图标

设计时应注意保持统一的线条粗细，案例中2px的粗细线条重复使用，常用的图标描边粗细一般为1.5pt，当然需要所有图标的粗细与文字粗细一致，和谐统一。

3. 图标尺寸

在app中，功能图标大致可分成两种：可以点击的按钮；不可点击的展示图标。

可以点击的按钮常用于导航栏、tab栏、操作栏（吸底按钮图示），常用尺寸为：48x48px、64x64px。

如下图的导航和吸底按钮都用了48x48px的大小、已经用iOS用44x44px，现在已经统一48x48px。

不可点击的展示图标常用于信息展示位置（价格走势/规格/评论等图示）常用尺寸为：24x24px 32x32px。

如下图，评论模块中的展示图标使用24x24px，价格走势则使用了32x32px的尺寸。

4. 标签的走查规范

从商业的角度，标签是为了凸显产品卖点，比如你在商场时常能看到「全场低至2.9折」这类的促销信息。

其实在界面中同样会有，目的就是为了抓住用户薅羊毛和刺激性消费心理，对比没有标签的同类商品，用户会更加倾向于有标签的商品。

常用标签样式有三种表现样式：

面性：填充一整个色块。

线面结合：低饱和度的色块结合高饱和度的描边。

线性描边：1px粗细描边。

如上图：为展示清楚，在原来基础上放大了1倍，运用规则与之前提到的图标一样，根据模块功能的重要性去搭配，按照重要到次要的排序是：面性>线面>线性。

标签呼吸感规律

很多初级设计师都在疑惑到底标签文字定多大合适呢？标签字号一般为：18-22px。

以「自营」标签为例，如上图：外框边距横纵向成2倍的倍数关系。

所以以后在画标签，只要先定好字号大小，剩下的边框边距就按照2倍的关系去拓展。

为了确保我们做视觉稿的时候易于文本的阅读通常会用到一些配图，而这些配图通常也影响着我们整个界面的美观度。

一个优秀的设计师在设计作品时都会特别的注重图形与图象的比例，图片的选取当然也是重中之重，那么我们在项目中应该如何选取图片并且正确地使用图片的比例呢？

1. 图片使用的规范

首先要做到让图片的背景保持统一并且做到干净整洁。

图片主体的比例大小跟其他图片保持统一，避免出现有些图片展示局部，有些图片展示整体。（如下图）

2. 图片模块的常用使用比例

如果没有深入的对人机交互进行研究的话，在UI设计中很多人认为图片的尺寸是可以随意定制的。

下面我们就来说说这UI设计中图片的比例常用的有下列几种：

1 : 1，这种比例比较适用于电商，它可以让商品图片展示最大化，也是目前电商最主流的图片使用尺寸。如下图：

16 : 9，这种比例比较适用于视频，这是标准的人体工程学比例，根据人体工程学家的研究发现人的两只眼睛的视野范围并不是方的，而是一个长宽比例为16 : 9的长方形，所以我们看到的视频比例通常会采用16 : 9。

4 : 3，这种比例应用于新闻类APP比较多。

它源自于一些微小型相机最原始的尺寸比例，不需要进行过多比例的裁剪，应用起来比较方便，对于需要展示大量的图片信息类的产品来说特别适用。

UI设计走查表到这里就要结束了，不知道大家有没有学到很多呢，下期分享（可以评论区留言不定时分享）

《影响用户行为的几种方法》

《解析5款字体设计全过程》

《运营组件化设计过程》

《品牌基因法做图标》

一个较为完整的设计走查表

具体流程可见花瓣UI设计规范文档

在此致敬优设3年二班程远