时间: 2021-07-30 10:12:52 人气: 12 评论: 0
本文是接前两篇文章，来给大家讲解一下关于体验设计的一些问题，enjoy~
我们拿一些非常小的细节元素来说，大家平时怎么去绘制一个按钮，是否通过形状工具直接画一个差不多大小的按钮就可以了呢？这里有很多细节大家要注意。
当你在2倍图设计时，尽量数值能够被4整除例如36、32、28、24、20等，为什么要被4整除呢，因为2太小，如果整个页面的基数是2的话**非常碎，2的倍数太多，页面布局**显得没有规律。3的话是奇数，对于显示和运算都不友好所以我们选择4为基数进行设计计算。
直角和全圆角就不讲了，主要是半圆角。对于不同尺寸大小的按钮，设置成一样的圆角数值是不行的。那应该如何设定呢，我先来看看一些产品中的规律。
大家发现了啥没有，有明显大小的按钮，半圆角率就**有明显区别甚至刚好是两倍，但如果按钮放大两倍后圆角曲率不变就**让大的那个按钮圆角看起来更大。如果没有明显面积区别的按钮通常圆角曲率也**有2/4/6/8这样的间隔来设置，由于按钮尺寸大小因素影响很多，所以一般不做很严谨的规律，只要不非常突兀就可以.
一般按钮内部通常**有一些元素比如图标、文字、动效，以及其结合形态。例如图标和文字结合，图标需要有切图属性，所以尺寸**比实际图标尺寸更大，四周的留白也就越多。并且我们在设定图标、文字和按钮三者之间的关系时，需要进行一些计算，尽量让其三者的上下左右间距为4的倍数，但由于实际情况的限制我们也可以使用2的倍数。
有一点要注意的是，切图属性的存在**让实际视觉产生平衡偏差，所以我们要以实际视觉为主，让整体内容往左偏移一些。另外文字在默认状态下是有上下的空白间距的，这里如果为和开发说明，就**造成实际效果的偏差，所以如果大家在sketch里做的话一定要在输入完文字之后，再将行高的数值调整到和文字大小一致。
那么根据这些不同场景的按钮样式，我们就可以在组件库中作出更多复用性高的组件了，不仅仅是图标、文字、动效的结合，按钮状态、文字字数都可以做进组件库。
首先有以下功能：头像、昵称、简介、级别、关注、分析、浏览数、**按钮。
这些通常是在个人中心，所以一般也就3种布局，左对齐、居中对齐、右对齐。三种布局有他的优点和缺点，左对齐也是一种比较常规的对齐方式，信息靠左，行动靠右。居中对齐让信息更聚焦更有归属感但占用篇幅过高，功能扩展性较弱。右对齐弱化头像但比较新颖，缺点依旧是功能扩展性不高。那我们先选择左对齐来讲一讲信息布局中的细节。
在使用方面比硬栅格更加灵活，可扩展性更强，很多产品**提到栅格这个概念，但是移动端毕竟不是web，页面篇幅大，使用硬栅格确实**让页面更加美观有规律。但是移动端使用硬栅格，个人觉得性价比不高，应为单个页面承载的内容量少了很多，并且硬栅格在这里并没有什么优势，反而**造成千篇一律的东西出来。
所以我建议大家使用软栅格就可以，但是软栅格也没那么简单，我们先来看一下airbnb和得到两个产品，他们使用软栅格的规律，airbnb使用了6位基础倍数进行布局，得到使用了5。这里我是以1倍图的尺寸进行了测量。
什么是软栅格呢，就是以一个固定的基础倍数进行信息间隔排版的策略。通常我们都**使用这个基础数的倍数进行设计，如果是1倍图，我们通常**使用2、3、4、5、6等，有同学**问，为什么这里可以用奇数？在1倍图中用奇数没什么大问题，并且我们的目的是让页面呈现规律、能够让页面的信息完美的呈现，所以是否是奇数并没有什么影响。
软栅格也需要讲究倍数的规律使用，如果你选择了2、3这样的偏小的数值，那么要注意的是尽量不要让倍数的种类过多，比如2、4、6、8…18、20、22这样就太多了，页面也就**没有什么规律，比较碎。所以你看到像上面两个产品他们的间距数量并不是很多。如果有需要我们可以加入一些特殊的间距，但这些都需要在库中进行记录。
这是本篇文章最想和大家聊的内容，因为探索这些问题实在太有趣了，设计师最大的成就感就是你设计的产品被用户使用，并且收到了非常多的正面反馈以及对业务的提升，特别是一个好的功能、好的流程、好的信息架构能够给用户带来丝滑般的自然感受。接下来我们就来聊一聊
简单讲就是信息、功能的分类和导航。如果你想去图书馆找一本《三国演义》你**怎么去找？
当你已进入图书馆后首先**在书架上找各种图书的分类，设计类、语言类、文学类、科学类、国内名著、国外小说……当你找到国内小说，然后你再来看你要找的书是属于古代、近代、现代还是当代？当然你还有另外一种找法，那就是直接问店内工作人员，相当于搜索。
好的信息架构能够让用户快速找到自己想要找的内容和功能，进入首页后就明白这个产品的用途和关键信息，所以一个好的信息架构重要性就不言而喻了。
在做信息架构之前我们必须了解用户心智。比如购物车这个概念，它是一个用来装商品的容器，所以在做交互设计的时候要记住，商品是“放进去”和“拿出来”的，再比如消息盒子，消息是用来接收的，是一种通知类似于收到一封信、一句话。一首歌曲的播放可以是磁带的转动或者停止、可以是唱针的放下和抬起，所以系统要根据不同的功能特性和人的预期进行实现设计。
接下来我们先看看一个信息架构做的不太好的案例，第一个：转转（之前版本的，现在好了），从下方的图中大家觉得左边的汉堡按钮点击之后**发生什么，在我们的认知中这是一个汉堡导航的按钮，那么点击时候左侧应该**滑出一个抽屉的模块，承载着一些功能。
但其实当我们点击后却是一个页面的跳转，然后到了商品分类的界面，但是你又**发现这个功能底部tab已经有了，优先级非常高，那么这里的功能入口其实真的没什么必要，而且还用错了，现在版本是改了。
这虽然是一个小问题，但是我们也发现了当你的设计与用户的预期、习惯不一致后用户**产生疑惑，一旦程度严重、次数多了就**让用户的满意度大幅下降。
再来看另一个产品-想去，其实这个产品的定位非常好，是一个卖设计师自己设计的品牌物件的平台，包包、服装之类。如果做的好，这个产品的格调是很不错的，只可惜了他的信息架构犹如….我们来具体看看吧。
首先映入眼帘的是他的首页，首页是一个大大的专题图**。我们刚才说了，好的信息架构能够让你一进去就知道这个产品是干什么的，但是目前来看好像有点失败。首页放一个大专题图真的暴殄天物了。
再来看底部的标签分类，设计师和逛两个维度我们都可以理解，在没有看之前我猜测设计师板块的内容应该是不同风格设计师的分类或者一些大流量大ip品牌的推荐，逛的板块类似于发现，有很多用户晒买到的物品或者是设计师设计该物件的一些ugc、pgc的内容，这样一个社区、一个平台也算可以**活起来了，但是让我惊讶的发现他们好像并没有这么做在设计师板块是各种设计品的分类，点进去之后才是各个设计品牌的创始人介绍，问题又来了。
站在用户的角度，决定我是否去下单购买因素有商品的美观度、质量的好坏、创作的过程、设计师水平等，但是在这个分类下我只看到了设计师的头像和简单的风格描述，这让用户如何去选择他想要购买的商品呢？
我再忍一忍，继续点进去，发现依旧还是没有让我看到具体的商品，这对于用户来说打击实在太大了，依旧是设计师的描述，往下拉之后再看，还是没有相关的商品，只有一些图**，那些图**我不知道是否可点，点击之后才发现原来商品藏的那么深，好吧，原来这些设计师的设计作品卖不出去是有原因的。
切换到逛的界面，是一个类似首页的内容，这才有点像首页不是吗？
所以为什么老年人对触屏智能手机接受率低，就是因为他们习惯了按键式的，并且老年人的习惯与认知没有年轻人转变的那么快。我们需要了解用户，洞悉用户心智，我们才能设计出符合用户预期的产品来。
分为封闭式卡**分类与开放式卡**分类。
封闭式卡**分类这样的分类都是基于业务和战略层面的从上至下的做法，有预先定义好的分类标签，用户只需要把卡**上的信息归类到这些分类下即可，这样我们就可以知道用户是如何进行信息分类的，这样对照我们目前的信息分类可以进行对比。缺点是分类已固定，无法探索更加自由的用户心智。
开放式卡**分类属于从下至上的方法，只提供信息和功能让用户自己进行分类并且对类目进行命名。这样就可以更好的探索用户是如何进行自由分类了，但是这样做的缺点也比较大，耗费的时间和精力**很多，用户对这些功能以及目的不同，分类的方法也不同。
无论是开放还是封闭，都需要注意的是在用户进行分类过程中观察用户对哪些信息的不确定和疑惑要及时记录下来，可以先放置在边上稍后再分。最好可以一边分类一边问用户这样分类的原因，因为时间久了用户很容易忘记当初为什么这样分类。特别是在开放分类的时候我们一定不能直接使用用户的分类去直接使用在产品中。
大家发现无论是开放还是封闭都有一定的局限性，所以我们在实际的使用过程中**讲两者结合去做，分两组用户去进行分类，这样得到的结果也可以互相验证，结合我们自己的假设，让设计模型更加接近用户的心智模型。
大家在做信息架构的时候也有很多问题，比如各个分类是否都是独立的系统，怎样进行层级的划分，划分层级的节点是什么是一个字段还是一个页面？新增的功能是否可以整合在原有的信息架构中还是要单独拿出来？
首先我们来讲她的几种类型：
（1）树状结构
这是一种很常见的结构，每个节点都是存在父子级的关系，比如云集，底部分成了5个分类每个大分类，分别是特卖、**市、发现、商城和我的，每一个分类下是该分类承载的诸多相关的功能和信息，我们先记录为a、a-1、a-1-1这样进行说明，比如首页a有很多的功能，比如a-分类、a-特买、a-品牌团，a-分类下又有a-分类-推荐、a-分类-服饰内衣等等。
那么父级下的子级内容一定是与父级强相关的，这样用户也更容易理解，淘宝首页都是各种产品线的入口、商品的品类、活动的入口还有智能化推荐，微淘也是根据智能化推荐的用户晒单内容等等，所以信息架构大到整一个产品的大分类，小到一个页面的信息关联。
再举个例子，添加收货地址，这就是一个很典型的树状结构，每一个节点都是独立的，互不影响，用户非常清楚这个结构所要表达的意思。只是相比产品首页的大分类，这个更加微观一些。
（2）矩阵结构
这种结构也称之为并行结构，什么意思呢，就是虽然我有进行了大的分类，但是用户依然可以在不同的分类流程中进行跳转，一些节点甚至是公用的，比如搜索功能，再比如考拉的**出现在首页、我的以及下单等其他流程或者页面中，一个原因是处于业务诉求而呈现的高频率内容，另一个是不同用户需求。上面说了添加收货地址是树状结构，每一个节点都是独立的，所以他们之间并不能互相流转。
（3）自由结构
这种结构属于无规律的自然结构，这样的结构鼓励用户去探索，更加沉浸式，用在娱乐化的产品中较多。比如抖音，b站等等，他们的内容是智能化推荐，他的核心内容从属结构并没有那么明显，比如一个视频的节点非常多，而这些节点并非是父子关系，每个节点可以是一个新的板块。但是这样的结构也需要有一定的控制，比如加入用户体系，关注、收藏等功能，否则用户就很难再次找到相同类似的内容了。
（4）线性结构
这种结构用的不多，一般用户3个或3个以下的简单并且独立的场景，比如keep的忘记密码，每一个步骤都是一个独立的点，并且有递进和条件关系，这样当然让用户更聚焦，而且在这里只能用线性结构去完成。
所以如果需要用户多个步骤填写表单或者完成任务的话，那么就一定需要结合其他的结构一起来，比如二手电子产品的估价表单，页面顶部是步骤条，下方是已经选择过的选项，再下方是正在选择的选项。如果类似这样的功能做成线性的，那一定**出现很多问题，比如之前的信息填写错了、想换一个信息填写，那么必须一步一步退回，所以在这里线性结构就不适用了，而且他也并没有递进和条件的关系在里面。
根据不同的产品调性和用户需求我们**进行不同的架构和布局，比如我们来看消息盒子，为什么都是消息盒子却长的那么不一样呢，因为爹妈（业务与用户）的原因，那基因肯定就不同了，所以大家发现这几个产品有的是顶部进行横向不可滑动的分类，下方是实时消息列表，有的是一级页面都是分类，还有的是顶部横向tab导航分类。
原因就在于这些功能的面对用户、自身功能以及业务诉求的不同，比如抖音它上面将消息分为了与用户强相关的4个类目，并且把私信和系统消息作为一级优先级展示，所以这个社交属性是很强，如果他把实时留言给收起来那么用户之间的联系就**弱化很多，那么产品定位也是一部分原因。
像电商产品，消息最多的无非是活动、物流、店铺推送等，这些东西用户不是需要第一时间关注的，也就没有必要在第一优先级放出来。一般横向的导航组件扩展性比较弱、**有逐级递减的效果明显，但是感知优先级比总想的高，纵向的扩展性更强。
这边就不再赘述导航了，简单的给大家看一张图：
一个好的信息架构除了上述说的内容原则外，最重要的一点就是用户场景，脱离用户场景的信息架构基本就是无药可救。通常我们在做需求设计时，需要将用户场景穷举出来，也就是把所有用户场景的可能性都列举，用户场景怎么来？访谈、问卷、体验地图、个人经验判断等等都可以挖掘。比如我们来看一下电商产品的详情，大家可以脑暴一下，用户进入详情页他想要干什么？也就是他的“作案”动机是什么？
无数的用户场景都**存在于用户的使用过程中，所以有时候为什么产品的需求有问题可能就是因为用户场景考虑不全，比如我们做一个提现的功能，并不是仅仅帮助用户把钱提出来就可以了，用户想要知道余额、提现到哪里、是否有手续费、提现周期是多久、提现金额的是否有限制，如果选择提现银行卡是否支持绑定新卡等等，所以用户场景在架构和流程设计中是非常重要的。这期先写一点点，下期详细写。
总的来说瓶颈就是目前的工作重复性、熟悉度都太高，没有提升的方向感而产生的焦虑。这点我觉得大部分设计师可能都不是真的碰到了瓶颈，只是环境没有对你高要求，所以你对自己也没有高要求，但这往往都是坐井观天而已。有同学也确实来问我过这个问题，他做了5年UI，过来咨询目前UI设计师是否需要**交互、体验等技能，自己遇到了瓶颈，是不是该学习突破下。
我让他发了一些UI界面的作品，但是发现他UI的设计水平依然停留在几年前，这期间他换过一次工作，但是是国企性质的企业（大家都懂）。所以在一个对设计只要能满足领导的要求这样一个环境下，如果对自己没有自律的要求下，很容易掉进去。所以不要说你遇到瓶颈了，先评估一下自己最基本的能力是不是达到市面上高级设计师的标准要求了，如果连图标还没有画统一，就先不要思考要多学其他的技能了。
也有同学**问，那我UI设计基础弱我是不是可以直接转交互。讲道理，大家做这行其实更应该先学交互，再学视觉，只是在前两年UI的门槛低大家都来学，而且交互又有产品经理包了，所以都接触不到交互，但如果你现在0基础要做这行，就一定要先以体验设计、交互思维为基础来学。
那么接下去我也给大家分享一下我个人突破瓶颈的一些经验，其实我觉得瓶颈一直在，而且越学发现越多，哎，人的一生其实都在不断的突破。
首先是质量，如何提高你的设计输出的质量呢？我们先从两个原因来讲：一个是看，一个是做。
那现在很多人大致分为两类：
（1）做：拆解、局部攻破
如果你想设计界面，那么这几点你可以一一攻破，比如如何让图标绘制的美观、统一、表意清晰，再尝试融入品牌基因。比如界面布局，先尝试图**文字较少的信息布局进行练习，上图下文，左图右文等等各种形式的布局，尝试使用软栅格，再到更复杂的信息布局，然后再尝试不同的配色和一些细节。
在进行界面设计的时候，多提出自己的质疑，为什么要使用这个间距、配色、布局，信息除了这样的摆放位置是否还有其他可能，元素设计的样式还有没有其他样式等等。
需要练习到什么程度呢？
自己能够在没有参考的情况下，设计出3种完全不同风格的界面我觉得就可以了，3套界面作品可以连续拿3个站酷编辑基本上你的UI能力第一阶段目标也就达到了。毕竟我们不是要花一年的时间去做这件事，这3套界面尽可能的在1个月左右完成。
（2）看：学**灵感收集与提炼
首先灵感和素材收集方式有很多种，譬如站酷收藏夹、某瓣、eagle等等。如果你们平时习惯好的话尽量在收集的时候将主题、颜色、类型、风格都进行标签化分类，这样找的时候**更加方便。最好进行本地化保存这样如果网站崩了不至于设计level下降2个级别。
当然，光收集肯定是没用的，给大家一个建议就是提炼共类去记忆一些关键点，比如构图、一些排版的技巧，先少量记忆几个，通过练习去强化，再去使用其他的设计手法。界面设计也是一个道理，先把为什么这么做搞清楚，做什么就很简单了。
其次是效率，也就是工具和流程的合理使用。为什么有些人提交一张界面或者画一个小插画需要一天的时间，有些人只要几个小时，画的快不一定画的好，但是现在的需求那么多如果不提升效率，画好也没用。工具并没有好坏但是有是否合适，比如你的同事都是用sketch做图，而你却用xd（单独拿出来说也是一个好工具）、用ps，先不说这些是否能高效出图，同事间的协作效率就**大大降低。
技术是0，思维是1，缺1不可。比如你开一家水果店，你有很好的进货渠道、有很大的流量门面、你对成本利润、耗损都控制的很好，但是你不**运营，你不知道小区周围的主要用户是学生还是大伯大妈还是普通工人，你不知道四周其他水果店的运作方法，你也不知道如何将水果店做大，所以你能够赚钱但一定是有限的。
思维不仅仅局限于我们的设计工作，上次文章我们说到了产品思维（产品价值、用户价值）、用户思维（用户是谁、用户在哪里、用户在干什么、怎么研究用户），思维和眼界也**影响我们整个职业生涯。
不知道大家平时是如何看待自己成长，比如我问几个问题，当你的项目需要推进但是其他同事推诿推进不下去了怎么办？当你很忙但是领导交给了你一个从未接触过的任务怎么办？如果本身不是你的工作却落到了你的头上怎么办？如果几年后设计岗位很少了怎么办？这些灵魂的拷问不知道大家是如何思考的。
先说两个要点：
然后我们再来看上面的几个问题：
（1）当你的项目需要推进但是别人推诿不积极进行不下去怎么办？
先了解一下别人为什么不配合你，是否因为你的方案影响到了别人的利益，先从自身找问题。再来看你的方案对产品和用户的价值是否高、重要度和紧急程度是否高，跨部门或者跨团队协作本身就不简单，环境、背景、阶层、利益关系等都**影响一个需求的推进，所以你要考虑的东西很多，你的尚方宝剑是否足够锋利，将整体推进节点、**议纪要都保存、记录清楚，这样别人再不配合，锅肯定不是你的。
（2）当你很忙但是领导交给了你一个从未接触过的任务怎么办
首先，不要先拒绝领导，领导很可能不知道你现在手头上有多少工作，先将任务拿过来了解一下，想一想领导为什么要交给你做。
其次，将你所有的工作都排列出优先级包括领导给的。
接下去，再评估这个需求对自己的能力提升是否有帮助，如果有，优先级可以往前排一下，然后就可以跟领导进行汇报，毕竟再想完成也要考虑自己的时间和精力问题，导致质量低下那还不如不做。
（3）如果本身不是你的工作却落到了你头上怎么办？
这个问题经常在我们身边发生，其实不用太过于在意谁的工作一定要谁来做，公司买的就是你的时间，只要将优先级安排好，谁做什么都是一样的。而且如果对自己的能力有提升也是不错的，特别是业务能力。
但是这个只限于设计团队内部，如果跨部门还是不要贸然接，否则出了问题就不好交代了。并且在做之前一定要一定要多沟通和报备，避免出现问题，特别是和原本负责这块内容的设计师多沟通。
（4）如果几年后设计岗位很少了怎么办
30多岁的设计师是转行卖水果好还是杂粮饼好？大家总是觉得自己年纪大了在这个行业混不下去了，体力精力都没有小鲜肉来的多，并且自己也没有做到管理岗，在一线做执行真的太累了。
对，如果你30多岁还是在一线做纯执行，那肯定是有问题了。这个年纪要养小孩、要背房贷车贷、加班太晚吃不消、激情消退、身体机能大幅下降，再让你做设计，心有余而力不足了。
所以大家是否有想过，自己的职业生涯到底应该怎么发展，如果你是土豪请略过这条。这个问题面试也经常被问到，你是如何规划你的职业生涯的，我个人一直都觉得，上班一定不是最后的出路，但是不上班不去积累那也一定是不行的，所以大家的上班的目的就是为了不上班，准确的说是给自己打工、实现财务自由，对社**产生更多的价值，有这样的目标就足够了，普通人不要想再多了。
那么上班的这个阶段一定也**有一个积累的过程，但是你的回答不能说3年当上主管5年当上总监，你以为是3年高考5年模拟啊。
再给大家一些建议，就是设计师如果觉得没激情没动力，就去健身、运动，让自己保持阳光和活力。它**让你的思路保持活跃让你的精力保持旺盛，阳光，就是第一生产力。
一定要记住，无论受到什么委屈，心里只要想着这是在为我自己的能力提升而所做的积累，不要吃一点亏就觉得呆不下去了。大家都是成年人了，受的委屈越多你的铠甲才能越坚硬。当然如果遇到非常不公正的待遇一定要挺身而出，我们虽然**隐忍但并不是怂。
以我个人的经验，之前跟大家介绍了我的3年**金成长期，但是我觉得3年有点太长了，必须在两年的时候把以下3点都做到精通：
这三点我们放到下一篇再讲。
（1）人脉的积累
这个是非常重要的，人在社**没有人脉是不行的。我体**特别深刻的是去医院看病，不知道大家是否感同深受，不通过认识的医生去看病，做手术我觉得很难很难，要么就是排长队，可能连病情都**拖延，这是现实。
所以人脉如何积累呢？
在公司、业界中的口碑、能力和影响力，自身牛逼了，身边自然不**是一群乌合，当然你自己情商要过关。人脉不是万能的，但是没有人脉是万万不能的，现在设计师求个职，海投2个月没看见个毛线，如果你身边有很多认识熟悉的设计师，让他们帮投一下简历**事半功倍很多，所以我也跟学员们说以后大家就是各自的人脉，说不定几年之后各位就是一些大厂的管理者。
（2）个人品牌Ip
在互联网时代啥最值钱？就是个人品牌啊！李佳琪的口红、团团的直播、金政基的速写、诺兰的电影、应骏的文章（哈哈）大家发现了嘛。
所以我一直在和同学们讲，你们一定要从现在开始逐渐打造个人ip，虽然我觉得我自己这个ip做的也不怎么样，在设计圈混了几年了也并没有啥大的起色，表示不好意思说这个话题。起初我也是写文和作品在平台逐渐被大家所知，但是几年下来依旧坚持做一些事情，以至于还没被淘汰，归咎于我还是太懒。
从现在开始把自己包装运营一下，先不过多的讲一些细的技巧，首先要让自己觉悟。疯狂的输入和输出一些东西，如果你要写文，那么每天至少看10篇文章，每周至少3本书，写读后感和想法，进行内容提炼、整理和归纳，每天都需要写文。
如果你要做设计，认定一种风格开始疯狂临摹到逐渐原创，坚持6个月。很难，但是有效，各位试着去做吧，6个月之后再来这篇文章下留言自己的成果，如果要寄什么特产感谢我的话私聊就好：D
由于颈椎的关系，不得不先写着么多了，我得去楼下做一个大保健让颈椎放松一下，大家如果觉得对自己有帮助，不妨留言和我交流一下大保健，哦不，体验设计的心得吧！
应骏，人人都是产品经理专栏作家，公众号：应谋鬼计（shejishiyj）
本文由 @应骏 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自Unsplash，基于CC0协议
