互联网er的早读课
80万互联网同行关注！
专注互联网精选内容！
来源：GOMEOS用户体验设计
编辑：Verna
视觉设计是“助攻”产品成功的重要部分，一个优秀的设计师，要做的就是把这个部分做到极致。这里小编给设计师们推荐一些实用便捷的方法，让我们开始吧。
01 借鉴竞品资源
设计师拿到需求后，不要急于立马动手，可以先整体了解一下交互原型，在脑海中有个大概的功能点界面构成。接下来开始研究一些竞品，这一步在小编看来是非常重要的步骤。
在这个研究的过程中，有时会发现自己的设计和竞品会存在相似的地方。设计师可以通过研究它们的视觉展现形式、排版、布局、配色、细节等等，分析他们的优缺点，规避一些设计问题和启发灵感。
小编收集竞品相关图片的两种常用方式：
a、应用商店下载相关竞品APP。
试用一下，截一些对自己有启发的界面图，最重要的一步就是给这些收集来图做分类分析。
b、提取完整的APP图资。小编最近知道了一个iMac的提取方式：
第一，去PC端的iTunes下载APP。
第二，在应用程序找到刚刚下载的APP，右键 - 在finder中显示。
第三，把ipa的文件属性改成zip，并解压，然后找到Payload的文件夹打开。
第四，右键点击显示包内容。
第五，打开res的文件夹，里面就会出现APP所有的UI设计图素材资源啦。
02 学会收集色彩
设计师要养成采集图片配色的习惯。当这个采集储存到一定量的时候，你会惊喜的发现，它为我们在调整色彩搭配的协调性上节省了很多时间。
小编采集色彩的三种常用方式：
a、图片网站本身带采彩功能。
有些图片网站（这里以Dribbble为例），在图片详情页右侧有该图片的配色。
b、通过作品采集色彩。
通过优秀的图片作品采集色彩，步骤：Photoshop - 打开图片 - 存储为Web所用格式 - 选择GIF格式 - 颜色选择8 - 颜色表中双击色块 - 拾色器 - 采集配色组合。
c、通过马赛克采集色彩。
步骤：Photoshop - 打开图片-滤镜 - 像素化 - 马赛克 - 设置单元格大小 - 采集配色组合。
03 像素对齐
从工作中小编发现，大部分初级设计师在设计过程中都会忽略的一点：出现小数点，也就是坊间说的“半个像素”。
这里小编提醒看官们，画图时线条一定要紧贴像素网格，不要出现小数点，如遇到线型图，建议线宽2px。如果非得1px，那线条只能在内部或外部，不要中心对齐，因为居中的1px在100%的比例时会模糊。
以往小编的处理方式是：
a、选择对齐。
步骤：Photoshop - 菜单 - 视图 - 对齐／对齐 到。
b、设置好首选项。
步骤：菜单 - 编辑 - 首选项 - 常规 - 将矢量工具与变换与像素网格对齐。
c、角度尽量使用45°、30°、60°等常见角度，会比30.5°或者51°这样的角度更清晰。
d、sketch画图时，简单粗暴的改动数值最快速。
04 怎样处理好倒角
倒角是最基础常用的设计手法之一，但也是最容易被设计师所忽略的设计手法，小编在太多的作品中看到这些失败的倒角了。
工作中小编发现，大部分初级设计师喜欢用Photoshop、Illustrator或Sketch中嵌入圆角的特性，但这样就会导致视觉效果不是很好。
我们可以看到从直线到圆弧有曲率的突变，这种不顺畅的过渡可以很明显地从视觉上就感受到。
这时，设计师就需要重新去考虑：用一个有超出几何圆的额外面积的“超圆”，来使直线在变曲线时不那么明显。
a、一些设计师会用一个简单的方法解决圆角的问题：将可转换的圆形效果转换为一个轮廓，输入图形编辑模式，并手动移动曲线进行处理。但这并不那么精确。
b、这里给大家介绍一种“超椭圆”，也可以叫作拉梅曲线（Lamé curve）。是由法国数学家Gabriel Lamé发现的，根据使用的公式，从一个像四角星形状变成实际上是圆形的正方形。
Marc Edwards提出了拉梅曲线公式，它的形状是平滑而完美的。从iOS 7系统开始的图标都是根据它做成的。之后这个形状被增加了黄金分割比例和网格，为设计师引导新的图标。
使用 “超椭圆”的好处是它们很“光滑”。但这些非标准的形状很难插入到真实的界面中，我们可以将多个SVG组合在一起，将特殊的公式或脚本加入到代码中，或者使用像Apple为其应用图标所做的图片一样。
正确的视觉圆角一定需要特殊的公式或某种形状上的手动调整。
如果您还有什么好的自留方法，就给我们留言，或者扫描下方的二维码加入我们，让我们一起成长吧。
投稿邮箱：mm@zaodula.com
本文由GOMEOS用户体验设计原创发布，授权互联网早读课转载。内容仅代表作者独立观点，不代表早读课立场。如需转载，请联系原作者。,
