UI设计师应该如何描述设计风格

2016-10-31    分享达人

 蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务 

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

很多时候视觉设计师会纠结于文字对齐、线条、高斯模糊等视觉表现,甚至沉醉于 icon 的转角角度。面对于需求方或工程师的质疑只能说「这样更好看、这样更合适」之类的话,这些理由在以显性数字指标为衡量标准的团队中则显得苍白无力。

 

坦白讲,想要讲清楚这些的确是一件不容易的事情。今天在大多数互联网公司,设计师不需要搞艺术,需要的是解决问题,而纯粹的从感性角度出发很难证明它能解决问题。随着移动端对于视觉表现力要求的降低,视觉设计师需要更加理性的分析问题,而视觉表现只是解决问题的一种手段。这种环境的变化也势必要求视觉设计师主动进化,而对于那些还在以视觉表现力谋生的设计师处境将会变得越来越难。这也是为什么我在周刊中总是不断强调设计思路的原因。

 

回到我们今天的主题,我想正好接这个机会聊一聊关于如何讲述设计风格的一些想法。


为什么要用这个颜色,为什么要用线条、模糊、留白、卡片、阴影

 

首先,大家不要被带到沟里。如果你但对针对每一问题进行解答,每一个答案可能都是可有可无。视觉风格讲的其实是一个整体感受,这就需要我们从更高一个层面来解释这个问题。

 

我们需要先对问题做一下拆解,到底「时尚、简洁」的风格是什么。每个人对时尚、简洁的理解可能不同,但如果要挑选几个满足要求的 app,相信大家的理解偏差不会太大,有了这些我们就有了达成一致的基础。

 

接下来我们就需要对这些 apps 进行视觉风格上的拆分,来看看到底是哪些视觉表现让大家觉得它们是时尚、简洁的。我们可以依据经验对视觉表现划分几个维度(比如以下几个),接下来我将以购物应用为例,从以上几个维度来示意分析的方法。


1. 整体色系

2. 图片风格

3. 字体字号

4. 全局图标

5. 模块设计

6.  操作引导

 


01. 

首先是应用整体色系的使用。如果你曾经分析过几款设计得很优秀的APP你会发现他们对于颜色的使用是非常谨慎的。除去文本颜色,绝大部分都只会用到34个颜色用于突出信息的层次。这个环节能够帮助我们确定两个点,一是哪些颜色是大家认为时尚的;二是除去文本颜色,我们需要23个颜色辅助信息呈现。

01.webp.jpg

02. 

图片是 APP内信息组成重要元素,它的风格会很大程度上影响整体风格。我们可以主要对挑选的几款 APPbanner 图和商品图进行风格抽取。banner上大家基本都使用了干净背景图片叠加文字的橱窗效果,其中多数使用图

02.webp.jpg

文居中对齐的方式进行排版。

在商品图上,大家基本都选择了棚拍图片或白底抠图。即背景干净的商品主图。

03.webp.jpg

03. 

文字是也是 APP 界面中最重要的信息组成部分,可能也是占用篇幅最多的部分。我们常常听大家说某个产品的信息模块看上去很简洁、舒服、重点突出,这其中靠的就是文字排版。一般来说我们会核心关注标题、辅助信息、突出信息以及引导信息的字体字号,通过设计对信息进行分层呈现,希望借此来引导用户的视觉焦点。

对挑选的几款 APP 的信息模块进行字体、字号、颜色、行高进行拆解分析,你会发现它们是有共性的。

 04.webp.jpg

 

04. 

每款APP都需要一套易于识别的 icon来辅助信息展示。虽然在这一块设计师的话语权更强,但我也见过不少因为icon的设计风格而吵得不可开交。就拿是填色icon还是线条 icon来说,我们把准备的几款 APP拉出来看一下就知道了。就当前情况来看,线条icon更符合大家对于时尚、简洁的理解。

05.webp.jpg

 

05. 

这里提到的模块概念比较泛,通常我们称之为卡片、瓦片,对于它的风格定义我们也很容易从备选 apps 中找出设计的规律。其实我们在团队里对 Detail 这种页面也进行了区域划分,作为不同模块进行设计。拿顶部的 Bar 来说,提出去掉背景这事儿当时也讨论了好久。在那个阶段我们对于 Detail 页面的设计要求是通透和沉浸,在进行了多轮梳理和用户访谈并给出结论后业务方也很快的接受了这个设计改动。

06.webp.jpg

06. 

所有操作最终都希望被引导到我们想要去的地方,有的是商品购买、有的是发布信息。通常这张页面上会有多个行动点,作为设计师我们希望行动点有主次之分,重点突出最核心的操作(比如购买)。有些需求方恨不得每一个行动点(购买、购物车、分享、收藏)都让用户第一时间看到,我相信不少设计师都应该遇到过类似问题。但如果站在简洁的角度出发,我们分析一下备选的几款APP主次分离的概念就很容易讲的清楚了。

07.webp.jpg

以上我只是挑选了6个比较常见的维度进行了一次演示。事实上设计风格还有很多很细节的部分,但方法和案例我相信大家应该已经了解了。

 

通过一轮梳理,我们会找到影响设计风格的关键因素(如下图所例)。告诉需求方们,这些点形成了我们的设计风格。至于它是如何体现设计这次的设计风格,我们可以依据以上的分析给出一些结论。严格来说以上提到的方法是面向需求方的解决问题的方法,事实上真如何看待「时尚、简洁」不是我们来决定的。同样的内容我们应该交给用户来决策,如果有时间不妨邀请一波典型用户来进行焦点小组的访谈。看看他们眼中的「时尚、简洁」是怎样的。

 08.webp.jpg

 

分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档