当界面被设计得足够美观时，用户往往会容忍一些较为轻微、影响较小的可用性问题。   1995 年，日立设计中心的研究员 Massaki Kurosu 和 Kaori Kashimura 通过 26 种不同的 ATM 交互界面对 252 位参与者进行详细的用户体验测试，并对界面中表观可用性的决定因素（比如数字键布局、操作流程等）进行了评估。结果发现，这些因素中很大一部分对真实可用性的影响微乎其微，反而界面美观度对真实可用性的影响出乎预料的大。 注：文献中的数据表明，表观可用性的决定因素对真实可用性的影响系数大多在 0.000-0.310 之间，而界面美观度这个数据达到了 0.589。 设计案例用代码简化交互  正面影响来说，将界面设计得足够美观，其作用是毋庸质疑的，每个设计师都应该朝着这个方向不断努力，用户对好看的界面中一些轻微的可用性问题会相当宽容。 应用案例 1：Everest 官方主页  页面中项目列表的滚动使用了一种极其酷炫的方式，动画自然流畅不拖沓，虽然整个页面利用率和操作效率没有比直接展示在一 ...

  关注数据指标，不仅仅是产品经理或运营的「专利」，作为交互和 UI 设计师也需要掌握这方面的技能，来帮助产出更贴近用户行为的设计。同时，监测产品数据也有 2 个重要作用：一是可以监控产品迭代中的问题点和设计点，运营和市场活动的收入水平等，看看他们目前处于什么状态，也可以为后续产品迭代的方向提供参考帮助。二是通过对数据的挖掘和分析，可以发现新的商业机会和产品爆发点，也就是近两年经常听到的数据增长、用户增长、增长设计的概念。 什么是数据指标？它是对当前业务有参考价值的统计数据，是通过对于业务需求的进一步抽象，并进行数据埋点后，加工出来的一套计算规则，并通过有效的方法论和数据可视化呈现，最终能够解释业务变化和用户行为。当然，不是所有的数据指标都叫指标，只有对当前业务有参考价值的指标才可称作指标，同时要具备：可统计、可分析、可监测的特点。 网页基础指标先了解下流量的概念：分为站外流量来源和站内流量路径。以下就拿电商产品举例。 站外流量：通过其他平台或外界媒体进入到你的店铺就是站外流量。又分为免费和付费，免费有自然流量和搜索流量（比如在百度搜你店铺的名称并点击进入，这就是从 ...

发现问题的本质是动手设计的第一步   提出有意义问题的能力是UX设计师能力中一项基本但经常被忽视的技能。实际在整个项目过程中提出的问题数量与最终设计输出的质量之间存在明显的相关性。这不仅仅是设计创造，而是关于需求和问题的理解，在分析理解的基础上，产出解决方案是显而易见的。为了理解手头的挑战，UX设计师必须在项目流程的每个阶段提出正确的问题。实际这些问题对跨行业，不同设备和人物角色的项目都非常有用。   所有的问题可分为六个阶段进行： 项目启动大会时为了使交付团队和利益相关者围绕愿景和项目计划保持一致，设计师可以提出恰当的问题，这些问题和见解可以让团队从以后开始设计基础知识 我们的目标是解决什么问题或需求？ 产品/系统需要做什么？ 什么是商机？（例如，获客，拉新，留存，收入，转介绍等） 什么是关键绩效指标（KPI）？ 我们还能如何定义这个项目的成功？ 谁是用户或客户？ 为什么这对他们很重要？ 他们为什么关心？ 用户试图做什么？ 他们的痛点是什么？ 我们如何通过此设计流程吸引用户？ 是否有任何限制（技术，业务等）？ 我们如何比竞争对手更好？ 我们可 ...

  你在做饭的时候，发现油盐酱醋被放到了东南西北5米外的桌子上，你会怎么想？当你发现从家走到超市的路被堵住了，你必须要走两倍的路才能到超市，你会怎么想？在做一个任务的时候，当然希望可以顺利地完成，不希望中途被打断或被阻碍，产品设计也是一样。 网上超市的例子先来看一个场景：当在网上超市搜索一件商品时，刚好超市中没有这件商品，这时候你会给用户怎样的提示呢? 第一种方案：直接告诉用户抱歉，我们这没有这件商品。 第二种方案：告诉用户我们这没有这件商品，但是有类似的其他商品推荐给你。 对于用户来说，第二种方案当然体验更佳。 不仅可以在用户失落的时候给一些安慰，还可以在用户可能打错字的时候进行容错，把用户其实要搜的商品推荐出来。缩短了用户购买产品的行为路径，提高了下单率，为商家带来更多利润。 关于外卖的例子图中的历史订单是在A家购买的外卖记录，后来到了公司也想定同品牌的连锁店外卖，为了方便直接从订单记录中点击「再来一单」，这时候提示我 「已经超过了配送范围，并给我推送了在公司地址配送范围内的同品牌连锁店。」 这种推荐设计不仅方便了下单购买，也节省了重新搜索店铺选择商品下单的行为 ...

  政府网站设计，区别于平时接触的企业站设计有很大的差异性。不论是从功能、业务、设计布局上，政府网站更加严谨、庄重和规范。或许在设计企业站时，可以运用的设计手法有很多，设计规范也没有那么拘谨，可设计的范畴相对较大，设计衍生和创新的空间也更大。但是一个优秀的政府网站，在严格遵守设计规范以及政策文件指引下，在有限的空间内做出不一样的创新时，就更具挑战。 如何做好政府网站设计，如何设计出一个标杆性政府网站？下文将从政策指引、设计趋势、设计原则、设计目标以及设计方法五个方面进行剖析和探讨。 政策指引  所涉及到的所有政府网站UI页面设计，都需要严格遵循国办47号文要求。国办47号文，从展现、布局、栏目、频道、专题5个方面，对政府网站设计提出规范性要求。其中在页面设计展现最直接，在设计沟通确认过程中最容易失误的几点，也是国办47号文一开头就重点强调的几点： 政府网站应简洁明了，清新大气，保持统一风格，符合万维网联盟（W3C）的相关标准规范要求。  这一点主要是为了规范部分项目在设计过程中，过于追求创新，导致首页和各个频道页或其他页面风格 ...

  什么是可用性？任何与人可以发生交互的产品都应该是可用的，就一般产品而言，可用性被定义为目标用户可以轻松使用产品来实现特定目标。 ISO9241/11中的定义是：一个产品可以被特定的用户在特定的场景中，有效、高效并且满意得达成特定目标的程度。 人机交互专家 Jakob Nielsen 将可用性框架的定义为： 可学习性：初次接触这个设计时，用户完成基本任务的难易程度？效率：用户了解了设计之后，能多快地完成任务？可记忆性：当用户一段时间没有使用产品后，是否能轻松地恢复到之前的熟练程度？错误：用户犯了多少错误，错误严重程度如何？用户能否从错误中轻易地复原？满意度：用户对产品的主观满意度，这个设计让用户感觉如何？ 什么是可用性测试？可用性测试，大多用于网站或移动应用的设计评估，其实也可以用于智能硬件的完整体验流程，通常会邀请目标受众群体中的真实用户，在特定场景下通过产品完成典型的任务。 在真实的使用过程中观察用户的实际操作情况，详细记录并分析用户在使用产品中遇到的问题，目的是发现产品中存在的可用性问题，收集定性和定量数据帮助产品改进，并确定目标用户对产品的满意度。 简单来 ...

  在文字编排中如何使行高、行长看上去更舒适 行高字号的设置字号就是字体的大小，文字从大标题H1-H7、小标题、正文、注释都要配置相对应的字号。网页字号中，最小中文字号是12，英文是10。页面的字号可以4为基数进行递增的，最好采用偶数。像14号字的正文和13号字的注释，这种比较小的字可以不以4为基数来做。不管怎么去定义字号，只要视觉上美观大方并具有关联性，采用哪种规则去约束它都可以。另外所有的字体都要调试出深色和浅色两种配色，并分别应用在白色底色和黑色底色当中。黑色底色展示效果不好就不做展示了。 根据需求随意组合当定义好字号，标题和正文就可以根据实际项目需求进行自由搭配了。在给标题和正文选择字号时要注意它们之间的对比关系，字号差异越大它们的层级关系就越明显，但它们之间的差异又不能太大，差异过大会影响整体的视觉平衡性，给人一种不和谐不自然的感觉。例如：标题字号20px搭配正文字号12px；标题字号24px搭配正文字号16px。选用哪种标题搭配哪种正文也是由设计师的美感决定的。 英文的行高在设置文本行高的之前，需要理解一下“行高”与“行间距”的差别。前端DIV+CSS和 ...

  侧边导航栏、分页的方法 侧边导航栏侧边导航栏就是固定在侧边或从侧边划出的导航栏，一般应用在企业网站的触发型导航栏上，或后台页面/系统的左侧功能性导航栏上。侧边导航栏的方向是根据业务需求来做调整的，方向在那边就往哪边对齐。对设计的理解和审美决定了周围要留多少的空白。 绘制矩形框矩形框的高度可以随着屏幕高度的变化而变化，所以不需要考虑。那只定义矩形框的宽度就行了，宽度分别是：小（240px）、中（280px）、大（320px）。当决定采用哪种尺寸后，就要定义矩形框与内容之间的距离了。下图所示的例子是以中等尺寸来做参考的。 文本行高文字的行高是由鼠标状态（Hover）的高度来确定的，Hover的高度有多高，文字的行高就有多高。但要注意的是，侧边导航栏的文本左右多留一下白，不能使导航栏看上去太紧凑，给人感觉太压抑，就会显得不是很美观了。 层级划分因为侧边导航栏中有树形结构，一个主级别可以分散为多个子级别，所以就需要划分一下层级。划分层级的方法也有很多，可以改变字号、改变颜色、改变字形、改变距离。采用哪种方法还是要看具体需求，像那种需要想突出层级且对比强烈的需求，可以采用 ...

  不管是下拉菜单还是导航菜单，都是设计语言部分中的基础部分中的某个组成部分。当这些组件按照功能和需求整合到一起，就生成了新的页面或用户界面。 了解下拉菜单下拉菜单有两种样式，分别是主菜单和二级菜单。它也是由按钮、菜单栏、鼠标状态（Hover）组成的。 真正整合成组件时，组件会有三种不同的尺寸（大中小），被配置不同的高度，不同的颜色和不同的曲率。 绘制矩形框绘制下拉菜单的矩形框，要定义它的高度和宽度。下拉菜单框的高度是根据内容的增加而随之变化的，而它的宽度是受里面字数影响的。字数的最大宽度定下来，才能定下矩形框的宽度。一般情况下，菜单中的功能名称不会超过9个字，利用7±定律得知，超过9个字不易理解和阅读（易读性），所以这里的矩形框的宽度，不过超过9个字符。那如果下拉菜单中的功能名称，超过9个字，如下图所示。 文本行高添加文本内容，就是在下拉菜单里添加文字。当用7±2定律得知最大字符数不能超过9个字符后，就说明下拉菜单里的文字的宽度定好了，接下来就要定文字的行高了。文字的宽度和行高都计算好，就可以绘制文字与矩形框之间的间距了。文字的行高是由鼠标状态（Hover）的高度 ...

  一个简单的按钮需要经历无数次推敲，才能整合为设计语言 网格基数的设置这里的网格不是平面设计中的网格系统，是包含在绘图工具中的网格功能，虽然它俩在本质上是相同的。用绘图工具绘制网格能帮助我们约束模块，使模块的比例存在一定的关系。如下图尺寸大小为137x31的按钮A，和尺寸大小为128x32的按钮B，尺寸大小为137x31的按钮A是不规范的，宽137和高31是不存在比例关系的。而尺寸大小为128x32的按钮B就是规范的，宽128和高32不仅是倍数关系（128/32=4倍），而且两个数都可以整除，在全局中设的基数4（32/4=8，128/4=32，这里的4为基数）。 网格基数绘制一个按钮的第一步，就是设置网格基数。如果网格基数不设置4px而设置3px，那画一个高度为45px的时间选择器时，得知右面“上”的图标高度就是45/2=22.5px，这里出了小数点，22.5px中包含7个网格位，并多出了1.5个px，即22.5-21（3x7网格位）=1.5px的空位，1.5px<3px。所以网格基数设置为3px它是不规范的。在下图中也做出了相应的解释。把图上按钮中为“上” ...

  在用户体验界面设计中，因交互需求而发生的动效设计，例如：loading、转场、点击反馈等。现在越来越多专业化UX交互动效软件助力实现html在手机上的实时操作反馈。在ae常用的技能点有： 缓动 交互动效的初衷是为了给产品带来舒适的用户体验，那么从本质上每一个交互动效的过渡都应该遵从物理曲线与缓动原则，比如下拉的重力感、过场的缓入缓出，避免产品像机器般给用户带来生硬的感受。 AE应用 选中关键帧—-动画>关键帧辅助>缓动 | animation>keyframe assistant>easy ease （或点击关键帧右键>关键帧辅助>缓动） 图形编辑器>使视图适应所有曲线>拖动端点调整曲线 | Graph Editor > Fit all graphs to view 遮罩 遮罩功能可以解决许多你想不到的动效问题，达到一个比如魔术化的效果，也是MG动画转场常用功能之一。简单理解来说，就是将动效分为2层（底层是展示图，顶层是遮罩），通过改变的遮罩大小，我们可以看到底层展示图的不同部分。 AE应用 选中形 ...

  交互设计之父的阿兰·库珀最为人熟知的或许就是这句“除非有更好的选择，否则就遵从标准”了，在交互设计领域有很多经过了时间的验证的法则定律被认作了标准， 费茨定律（Fitts’ Law）费茨定律（Fitts’ Law）简介费茨定律是由保罗·费茨（Paul M. Fitts）博士，在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的，时间是1954年。该定律被用来预测从任意一点到目标中心位置所需时间的数学模型，在人机交互（HCI）和设计领域的影响却最为广泛和深远。 费茨定律指的是：使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。用数学公式表达为：时间 T = a + b log2(D/S+1)。如下图：上图中，T指的是：移动设备所需时长；a、b指的是：经验参数，它们依赖于具体的指点设备的物理特性，以及操作人员和环境等因素；D指的是：设备起始位置和目标位置之间的距离；S指的是：目标区域的面积大小。 费茨定律（Fitts’ Law）在设计中的应用（1）按钮等可点击区域在合理的范围之内越大越容易点击，反之， ...