《有效设计方法》- GUI内训设计系列

   工作多年后，已见过无数设计作品，除了小部分精致之作，大部分是中庸，甚至拙略的；其实有一点很重要的问题就是“设计的基础”。

 

     纵观现在的GUI设计师，除了部分是平面设计专业，更多的是近似专业甚至跨界设计师，如来自动画、计算机、理工科甚至医护工作者专业。但是不管什么身份背景学历学科，最影响设计的质量的就是平面设计基础和对GUI软硬件规范的掌握水平，当然还需要其他辅助的知识储备。

 

     今天就来谈几个GUI中需要考虑的问题，希望大家通过这些要点的学习，能够重新审视自己的作品，也作为以后设计中的一个参考。

 

 

1、分辨率与尺寸

GUI为屏幕而生的界面，要求设计师理解屏幕像素（Px）和分辨率（dpi）的关系。DPI：Dots Per Inch 每英寸点数，传统web设计为72dpi，所以如果你是在设计web界面记得先调整为此值，见过不少初级设计师使用软件时未初始化此值而造成设计错误。

 

为了保证在显示器中的尺寸合理统一，熟记那些常用的显示器分辨率尺寸，并记住第一屏高度，做到分屏心中有数。只有在搭好框架的前提下才能保证设计无差错。

 

 

2、参考线

参考线有无形和有形之分，无形在脑海，有形在软件中；当你无法做到100%准确，那么就应该使用参考线辅助来。

它就像是你手里的一把直尺。经常看到很多同学通过眼睛来对齐，其实是很有可能出现问题的，高要求设计质量，就要让参考线发挥作用；

 

 

3、栅格处理

GUI栅格系统从平面设计的栅格系统中发展而来。GUI设计中常见有960Grid System(12栅格和16栅格),12Grid System,1200Grid System；设计的目的一个是更好的排版参考，一个是用于多尺寸的适配。

 

 

 

4、考虑自适应式和响应式

区别与其他媒体，显示器诸多尺寸型号，将考验你的设计作品适应能力。

这里有两个适应概念：

 

自适应，是在不改变布局结构和样式的情况下，自动匹配宽度去适应内容。设计的时候只需要考虑宽度变化后，文本换行和模块比例的情况。

 

响应式，是通过前端技术分段匹配样式，达到通过改变布局样式来适应内容

设计的时候优先从手机端开始（即最小尺寸开始设计）然后将模块重新发布到大尺寸显示器中，分段设计去适应；

 

 

 

 

5、灰度建稿

颜色是视觉设计中最重要的一点也是最容易带偏设计思路的一环。GUI设计是针对用户需求的功能做界面，我们可以在不确定主视觉的情况下用灰度来设计，通过灰度深浅来搭配布局，展示强弱关系；简单说就是等于将原型转化为黑白设计稿，再完成填色和创意。

它的好处一个是避免色彩的干扰浪费时间，提高效率，同时还能友好的面对色盲人群。

 

 

6、字体可识别

我们经常遇到的几个问题：字体太小了看不见，和背景太近似看不见，没有层级一片全一个颜色。解决这些问题其实很简单。

 

首先，Web设计时中文系统字体最大不应超过16号（部分老旧设备会产生锯齿问题），最小不应低于12号（影响阅读），英文可以最小11号为底线；移动端设计时最小正文不应小于24pt；

 

其次，坚决让文字和它的底色形成强烈对比，可以改变颜色或者描边等。

最后，通过字体深浅或字号区分层级，通过间距区分段落和行距，文字层级按照主次应逐级递减（减弱字号或颜色）。

 

 

7、颜色系统与WEB色技巧

提前考虑好符合品牌颜色或者产品颜色的主辅色调，安排好色彩比例（影响版面中的感受）。 利用颜色让界面有情感。

 

 

例外尽管现在大部分设备都支持百万色彩，但是从设计的原则上要考虑兼容，以256基础颜色为标准去使用颜色，让低色彩之处的设备可以正常显示

例子：颜色＃223B88 可以转变为 #22BB88而差别细微，同时可以书写为#2B8。

色盘与WEB取颜器

 

8、图标设计

应熟知常用图标尺寸 16x16、24、32、64、128等…，在此范围内可以绘制图形，同等尺寸中图形尺寸允许差异，大部分都仍然用图形占位尺寸导出为佳，方便修改更新也适合前端开发优化。利用一些公认的绘制方法，也可以提高你的图标精度。

 

 

 

9、像素精确

由于计算机屏幕是由像素点组成，要求我们所做的图形要有清晰的边缘，对应像素的大小，如果不注意，会造成虚化的边缘，可以通过工具来控制，最后也要对设计稿作检查；这种情况特别多出现在制作icon等图形上

 

 

 

10、空间留白

设计师都知道留白，可是作为设计师的你是否在实施过程中都忘记了这一点了？

 

留白也要按照统一的规格，比如左右空间对称，上下留白间距大于左右留白的间距才能达到平衡。

 

 

 

 

11、斐波那契螺旋线

斐波那契螺旋线，也称“黄金螺旋”，是根据斐波那契数列画出来的螺旋曲线，自然界中存在许多斐波那契螺旋线的图案，是自然界最完美的经典黄金比例。斐波那契螺旋线，以斐波那契数为边的正方形拼成的长方形，然后在正方形里面画一个90度的扇形，连起来的弧线就是斐波那契螺旋线。它

可以作为制图布局参考，也可以用来设计高精度图标

 

斐波那契螺旋线构图

 

斐波那契螺旋线设计页面与图标

 

实践中还有许多的设计方法，我们后续再介绍，同时，我们也可以从需要优秀作品中得到启发，但不要盲目学习，再没有提高自己设计质量的时候，看到的自己觉得很好的设计可能只是假象，我们需要参考成功设计作品。

 

希望这期可以为大家带来设计质量上的提升。