首页

重新设计东南亚头部在线超市的真实案例

lanlanwork


I. 发现

客户访谈

由于这位甲方的合作态度良好,所以设计师有机会与 SESA 的创始人和产品经理进行了 2-3 次会议。

借此了解了业务目标、用户需求和技术限制等关键问题:

图片

主要问题:

  • 低转化率:杂乱的界面使用户很难浏览商品。
  • 手机端体验不友好:几乎 90% 的用户是通过手机访问网站,但手机版的设计不够理想。
  • 手机端糟糕的界面和体验:目前他们使用的是现有的网站模板,根据目标用户的反馈,缺乏优化而且加载速度很慢。

客户需求

  • 一键式购物
  • 轻松的界面和体验
  • 无缝的商品搜索
  • 折扣和优惠更容易被看到
  • 使用网站时能感觉熟悉而简便

成功指标

  • 增加客单价
  • 增强人们的对品牌的认知感
  • 增加用户和订单数量
  • 无缝的体验
  • 让健康的生活方式更加受欢迎、评价、容易取得,更加有趣而美好
  • 提供并教育用户健康的生活方式,并转化为愉快美好的生活

 

目标人群

根据产品团队提供的数据,整理出了目标人群的特征:

图片

 

II. 构思

人物角色

根据以上信息,整理出了两个完全不同的人物角色:

图片图片

 

故事版

没有区分人物角色的故事版:

图片

目标用户的故事版:

图片

 

体验地图

思考分析用户旅程的五个阶段(探索网站、比较商品、确认下单、完成购买和接收配送)和用户感知的三个方面(行为、思考和感知),制作了体验地图:

图片

将当中的关键信息挑选出来:

图片

 

竞品分析

设计师找到了三家主要竞品,先大概了解他们的特色和优势:

图片图片图片

然后从 Google Play 的评论中寻找竞品的问题,这样就可以思考如何战胜他们:

图片图片

P.S. 评论分析是一种简单有效的竞品分析利器(也可以用来分析自己的产品),具体方法我之前有分享过:别总想着数据分析/用户调研,先把评论分析做了吧!

 

III. 设计

信息导航

先把大致的用户流程确定下来,这样对整个产品就有了一个整体构思:

图片

 

线框图

然后用手画出线框图,定下页面的整体布局:

图片

 

低保真

将线框图手稿用绘图软件细化,制作成低保真方案,用来向客户展示和做用户测试:

图片

图片

 

IV. 完成

可用性测试

找用户做测试时,用的是低保真可交互原型。

根据测试发现的问题,设计师直接将优化方案运用到了高保真方案上,所以下面整理的问题都用高保真方案来配图展示:

  • 1. 自动定位:测试之前用户必须手动搜索位置。
  • 2. 属性选择:由于客户想要一键式购物,所以当用户点击熟悉(通常是重量)右侧的箭头时,可以反转卡片进行详细选择。

图片

  • 3. 促销展示:原本设计了三个促销区,但是测试中发现用户面对大量的信息无法充分理解,所以移除了一部分,只保留了头图和分类优惠。

  • 4. 商品导航:为了避免用户迷路,将商品分类导航放在了所有页面顶部,并且悬停时展示子分类和相关文章。

 

高保真

图片

 

响应式

这个网站需要具备很高的响应式能力,不论在 PC 端还是手机端,都能轻松使用。

但由于 PC 端和手机端的尺寸相差太大了,所以不得不使用断点(Breakpoint)来判断用户当前处在哪个端,并展示相应的界面。

这个断点的概念在栅格系统很常用到,指的是当界面尺寸缩小或增大到某个(或几个)零界点时,间距大小或其它界面元素发生突变。

图片

上图来源:三种最主流的响应式栅格

 

这个方案的对于移动端的特殊处理包括:

  • 确保商品分类的位置,方便用户记忆
  • 使用汉堡菜单
  • 提供模仿原生 APP 的吸底导航

图片

 

Before&After

最后对比一下优化前后的方案:

图片

图片
图片
图片

图片

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》重新设计东南亚头部在线超市的真实案例

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




原子设计方法论!值得一学的设计思维模式

lanlanwork


1、什么是原子设计?

原子设计是创建设计系统的理论方法,分为原子、分子、组织、模板、页面五个层次。从最基础的原子开始,原子构成分子,分子组成组织,相互协作以创造出更有效的页面。

原子设计借鉴了化学中看待事物的方式,并将其应用在数字产品中。例如我们看的界面是由一些基本的元素组成,文字,颜色和图标等都是一个个原子。

图片

原子设计是一种思维模式,并不特指某一种设计风格或框架。通过原子设计理论,将产品和页面联系为一个有机的整体,其中的每个小元素都发挥着至关重要的作用。

 

2、原子设计方法论: 从原子到产品

原子设计有特定的框架,方便帮助设计师组织思路并在设计过程中作为指导。

 

原子

原子指化学反应不可再分的基本微粒,虽然基础但会对分子和个体的形成产生很大的影响。

同理在设计中,原子是构成设计的最基础的元素,可以是一个icon、一种字体…本身不具备特有的功能但这些基础元素同样值得重视。

图片

 

分子

分子由原子构成,以一定的次序和排列方式结合成分子。回到设计中,多个设计元素组合在一起,也会创造出一种新东西——具有明确功能性的组件

图片

原子设计强大的地方在于,可以为分子(组件)的创造分配时间,以确保组件具有明确的意义和功能。

 

组织

不同的分子组合形成组织,在设计中各种不同的组件组合在一起,形成一个完整的功能模块,例如在首页轮播图模块,有图像、文字等元素,还有按钮、导航箭头等组件。

利用组织这个概念能帮助设计师建立模块化意识,对页面结构有更深入的理解。

图片

 

模板

通过元素、组件和功能模块的相互关联,从而得到产品的模板即产品框架,也可以理解为产品的低保真线框图。

图片

在这个阶段,产品的信息架构和可视化的层次结构变得非常重要。产品页面、搜索结果页、主页等都有各自的模板,会显示内容的结构和基本的原型,方便后期使用。

 

页面

在模板基础上,继续添加需要的细节,最终会形成完整的页面,即产品的高保真原型。

这个阶段中需要注意的是,页面中所有的占位符尽可能提供真实的内容——真实的图像、真实的文案。

图片

对于完成的页面,我们可以利用原子设计的灵活性来调整和优化页面设计。

比如当有某些地方的设计没有达到预期,可以灵活调整页面中的某个分子或组织模块来实现想要的效果。

 

3、原子设计的优势

灵活性和适应性

原子设计是在设计过程中构建事物的方式,但它并不限制对环境变化做出反应的自由。

通过为产品中的每种类型的内容创建组件和模式,获得一个灵活的系统。模板为产品的一致性提供了一定的支撑,后期既可以按这些模板原型快速设计,也可以根据需求灵活调整。

原子设计相当于将设计内容纳入到一个模式里,组成的页面不仅拥有准确的内容,并能以最好的样式展现出来。

图片

 

系统模式

原子设计鼓励设计师投入时间和精力来创建整个系统,以便在产品设计的最后阶段,能够以一种高效的方式灵活地完成设计工作。

图片

 

更少的组件,更高效的开发

利用原子设计可以确保在项目过程中组件的数量会受到一定的控制,避免团队重复设计同一个组件的多个版本或提供样式差不多的副本。

图片

控制UI组件的数量,带来的好处之一就是开发的效率会变得更高。有了以原子设计方法为基础的理论架构,设计过程的每个环节会紧紧串联在一起,避免混乱。

 

最后

原子设计成为一种用户体验设计方法,以全新的方式带领大家设计每一个元素、组件以及页面,通过这样的方法论有助于设计师构建一个完整的设计系统。

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》原子设计方法论!值得一学的设计思维模式

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



2021 必备的超赞神器,用上它,效率都要提升三倍!!

lanlanwork


图片
上图就是这个神器制作出来的一些效果,之前看Dribble上面有很多类似的设计,现在终于知道它们大部分来源于这个神器。
下面我也找了一些案例,大家一起来看看。
图片
图片
图片
这样看,效果还是真的不错,它支持颜色修改、样式修改,目前一共有11种几何样式。
图片
好了,现在下面正式介绍这个传说中的神器,我相信大家一定会喜欢上的。
图片
上图就是这个神器的基本外貌,一共11种基础类型,当点击其中一个进去后,可以进行编辑。
这里我点击上图中的第二个模式(MIXTAPE)进去。
图片
如果大家英文不好,可以将整个页面翻译成中文,Google自带的翻译
进入这个页面,大家可以根据自己喜欢的风格调整样式,同时还可以修改颜色。
图片

比如我可以选择8X12列和行的几何布局。

图片
对颜色、列和行、开启阴影调整,得到如上效果。
图片

最终可以导出一张高清大图(3240X4860),尺寸是完全够用的。

图片

随便调整下又是一张不错的几何背景,还可以作为作品集封面。好了,关键时刻来了神器的网址已经打包好,大家可以拿去使用。

领取方式如下:添加小编微信,备注:神器699,小编会将下载地址发给你(小编不是机器人,回复会慢一些,大家稍等)。

 

原文地址: 功夫UX(公众号)
作者: 功夫UX

转载请注明:学UI网》2021 必备的超赞神器,用上它,效率都要提升三倍!!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



需求太碎?设计师如何在小业务中提炼价值

lanlanwork


Chapter One .
理清小业务的业务目标

相对于大业务(例如网站改版),小业务因为简单,其业务目标界定常容易被忽略。在日常设计中常会遇见设计师在不知道业务目标是什么、目标模糊、目标不正确的情况,直接从梳理小业务具备哪些功能入手,分析下现状问题后开始制定设计策略,这往往会导致设计出现解决不了关键问题、出现偏差情况。产品功能本身只是满足用户需求和实现业务目标的服务载体,只是策略的表象。理清小业务所承担的业务目标是前提,那么如何理清呢?

 

理清业务目标

小业务目标来自大业务目标,对大业务的业务目标进行一级级向下拆解后,即可获得小业务对应的目标。目标拆解需要遵循MECE原则,拆解方法包含:二分法、过程法、要素法、公式法、矩阵法。(tips:目标的拆解有一定难度)

图片

Dapp设计详情为例,在酷家乐大增长业务背景下,用户活跃和用户留存为核心的目标,设计详情处于设计路径的一个节点,拆解得到设计详情的5个主要业务目标:

  • 设计详情-用户周活跃
  • 设计详情-新用户留存
  • 设计详情-老用户留存
  • 设计详情-内容投稿数
  • 设计详情-内容分享数
图片

业务目标可分为2个类别:

  • 第一类别:符合用户意愿,如活跃、留存,在满足用户需求的情况下可以自然达成;
  • 第二类别:不符合用户意愿,如内容投稿、内容分享,用户不太会主动去完成,需要去创造动机,激励用户进行。

 

Chapter Two .
挖掘小业务关联的用户需求场景

有小业务的业务目标后,第二步就需要给用户提供价值满足用户需求,以此来实现业务目标的达成。梳理清楚小业务服务了哪些用户需求是提供价值的前提,那如何获取用户需求场景呢?

 

用户访谈——获取相关用户需求场景

用户需求场景可以帮我们清晰了解到用户使用产品的原因。用户需求场景可以一句话进行界定,包含四个关键要素,其中需求本身最为核心,需要挖掘出当前诉求和其背后的潜在需求。

“在【某环境下】,【某用户】做了【某事】来满足【某需求】”

图片

用户访谈为了挖掘到更为深入用户需求场景的要素信息。以设计师入行年限分组(1-3年、3-5年、5年以上),每次分组访谈2-3个设计师。梳理出设计详情相关的8个需求场景:

图片

访谈信息整合如下

图片

 

规整用户需求场景

在业务访谈中获取的场景往往都是碎片化的,碎片化场景对设计指导容易出现偏差,需要把场景结构化,为后续的方案设计提供依据。我把获得的场景按照设计师设计流程进行规整,按设计前、设计中、设计后三个阶段进行划分。

图片

以上梳理了设计详情相关的用户需求场景,再来看原设计详情只基础满足了资料管理和方案展示的2个单一场景,在设计师的整个设计流程中只占了一部分。从设计层面来看,该2个场景局限在方案设计大场景中,设计更多做的是对其方案设计操作的体验优化,在原有较好操作体验的现状下,其对给用户创造价值上没有很大增量。再从以上业务目标来看,2个单一场景很难去促使用户对内容进行分享和投稿。

 

Chapter Three .
梳理产品功能矩阵

在理清小业务的业务目标和需求场景后,下一步就是按照场景去梳理产品能力。

 

小业务功能现状分析

老版app设计详情的功能进行初步的现状分析,设计详情包含渲染、图文编辑、图片管理、投稿、分享5个主要功能。从需求场景来看,多个场景无法实现,如营销、谈单;从业务目标来看,通过当前功能有较大的优化空间,如当前投稿很难让用户知道投稿有什么价值。

图片

 

产品能力梳理

分析现状发现功能不足以支撑用户需求场景,有获取功能2个方向:

  1. 挖掘现有能力:可以扩大梳理范围,从小业务所在的上一级业务到整个平台,一级级往上梳理场景对应的现有功能。
  2. 打造新能力:围绕场景,打造出新的功能

图片

挖掘平台上现有能力,可对业务的能力价值最大化利用,与其他业务形成互通,实现1+1大于2的业务价值。亦可围绕场景打造新能力,可反推产品去发倔新功能。

以下是设计详情涉及所有场景的产品功能矩阵,从平台获取到了很多全新的能力,以及对原有的能力进行了能力拓展。

图片

 

Chapter Four .
拆解每个场景的设计目标和策略

在梳理出产品能力后,需要通过设计策略把产品能力有效组织起来,让用户快速感知快速上手使用。设计策略推导自设计目标,那如何得到设计目标?

基于用户需求场景将行为事件拆分,提炼行为事件再推导出设计目标,再基于设计目标给出设计策略。

图片

Dapp设计详情受制于移动端能力,只涉及设计详情中5个相关场景,其设计目标和设计策略的拆解结果如下

图片

拆解出设计目标后,基于目标分析产品现状得到存在的设计问题。为什么要基于目标分析现状?首先需要明确什么是问题,问题是导致目标和现状不一致的原因。只有明确了目标才可以理性分析与现状存在多少问题。在日常中时常看到设计师会直接得到问题,很多情况是默认假设了一个预设目标,但这目标得到不严谨、不全面,容易导致得到的问题本身也出现偏差。设计策略基于设计目标或问题得出,其最终都来自设计目标。

图片

对老版Dapp设计详情现状进行了分析,得到了问题:

图片

 

Chapter Five .
设计策略落地

在上一步得到设计策略后,围绕着设计策略是设计方案。本段将不全部展开说明,只选3个关键点讲述设计方案的思考

 

设计详情框架的设计

Dapp设计详情涉及5个场景的承载及产品功能繁多,设计三步思考:

第一步:简化功能认知,对功能结构化,以场景的维度重组织功能,并以场景打造功能集合的认知,建立场景能力区;

第二步:梳理场景共同涉及的内容,作为联系的载体承载场景的放置,设计详情中展示态的方案涉及到了5个场景中的4个场景;

第三步:提取场景中即时性和高优先级功能,打造快捷功能区

框架如下:

图片

建立框架后,填充具体的能力和内容。如场景入口放置于底部,并根据场景优先级做了主次的区分。

图片

设计详情框架建立后,打造细分场景中的设计。

 

营销获客场景设计

营销场景的设计,将营销组成拆分为可营销内容、营销的渠道、渠道内容展现三大类,就可以清晰去梳理出现有的功能,以及可从内容、渠道各自去拓展挖掘。内容和渠道清晰后,再传达各渠道提供的价值激励用户去触发行为。

图片

 

谈单场景设计

谈单场景关键在方案详情上,谈单面对不同情况,存在多种内容形式去展示方案。在上面内容梳理中最主要是3个内容:图文方案、全屋漫游、渲染图册。在方案详情中,头部承载了全屋漫游、图册,如图文方案过于繁琐可直接点击全屋漫游图进行讲解,亦可点击封面进入图册直接图片说明。图文详情加上了房间切换的导航,可快速切换到需要讲解的地方。

 

Chapter Six .
上线验证

上线后数据平稳后观测,设计详情的周活提升了89%,每个场景下的功能数据都得到显著的提升(tips:有部分数据因技术原因没有采集到)。除了改版了Dapp侧的设计详情,后续对PCweb侧的设计详情进行迭代,同样起到不错的结果。数据的结果验证了方法的可行,并起到了积极的效果。

图片

 

Chapter Seven .
思考小结

以上是我应用这套设计方法去做了块小业务优化,反向推动进入产品迭代,上线后取得了不错的成绩。在本次赋能后,对小业务中多了一些感悟

  • 小业务是大业务的缩影,可以作为去赋能大业务前沿验证的实验田,大概率可以快速验证自己的想法,即使方向错了因为小业务改动影响面也小
  • 因知识广度和深度的限制,不是所有设计师都可以一开始就可以把控大业务,小业务可作为打磨设计深度专业度,一些小业务的复杂度并不低于大业务
  • 该设计方法同样适用于大业务,但方法是死的,不是所有情况都套用,得需要把握重点灵活应用
  • 不要总想着搞个大新闻,在能力未被业务方认可时,小业务的赋能可以成为一个很好的发声口
  • 不要轻视小业务,有可能是你根本还不了解

以上内容,感谢阅读!

 

原文链接:酷家乐用户体验设计(公众号)

作者:小波

转载请注明:学UI网》需求太碎?设计师如何在小业务中提炼价值

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


B端设计也“好色”

ui设计分享达人


我们需要什么样的配色方案?


B端的系统的主色代表着一个系统的气质,与所在行业、产品的定位、用户群体都有一定的关系。前面调研了众多竟品及市场前沿配色方案,目的就是期望从它们身上找出共性,引领我们的系统找到最适合的方案,这是知彼。

光有“知彼”是不够的,我们还要清晰的知道自己是谁?这样我们才可以说我们的配色方案是最适合我们的,有理有据的方案。


B端系统的真正使用人群比较复杂,具有年龄跨度大,文化水平参差不等,从事行业广泛等特点。



源于自然之美的色调,突显灵活性与再生的创意!


依据彩通色彩研究所专家的说法,纽约时装周2021春夏季的色彩强调我们渴望能激发出巧思与创意的色彩,这些色彩的百搭性质穿越季节,容许更多的选择自由,适于表达原创的风格,也足够灵活来适应现代新的更片断化的生活方式 。

“2021春夏的色调呈现出大自然,强调我们渴望拥有全年皆宜的灵活色彩,这一季的色彩充满道地真实的感觉,这种感觉对色彩而言愈来愈重要,同时结合了某种程度的舒适与轻松感,并散发出活力,激励振奋我们的心情”


说到这里“主题色”如何来选择?


色彩对于人的大脑的冲击力大于造型,比如淘宝,我们会记忆起淘宝的主色是橙色;色彩是影响人类视觉思维的重要因素,色彩能直观的体现产品的性格和气质,所以选择一款适合产品的主色很重要。


我们的用户在更替,如何让产品年轻化、品牌年轻化是现在几乎所有企业都在思考的问题,新的用户群体从小接受的教育和喜好决定着产品的发展方向。

比如:我们这次颜色升级中律动、青春活力是核心关键词,而蓝色则可以让产品视觉符号得到延续。



对于主题色的选择指标有哪些?


通过关键词图片像素化提取颜色,同时参考B端产品颜色流行趋势和当年的年度流行色,以及竟品颜色分析结果,获取蓝色的色相、纯度、明度范围。


2020潘通年度颜色经典蓝(19-4052 Classic Blue),颜色值为#174A7B(H207 S81 B48)

2021潘通年度颜色搭配色鸟舍系列中19-4151Skydiver,颜色值为#02569D(H207 S99 B62)


假设:竟品的主题色蓝色的色相范围为205-225;纯度的范围为70-96,平均值为86;明度的范围为70-98,平均值为88,B端产品流行趋势的主色也多是蓝色系,色相范围为200-232;纯度的平均值为70;明度的平均值为68。



色彩的使用范围及色阶有哪些?


色彩的应用场景包括:关键行动点,操作状态、重要信息高亮,图形化等场景;针对这些使用场景只有一个色值是不能满足所有场景使用的,所以我们要建立主题色的不同色阶来满足不同场景下颜色的使用。以建立色彩层级,或传达信息,或强化界面层级。


在色彩系统中,常使用 Tints and shades 系统来建立调色板,通过在颜色上面增加白色,或者增加黑色,来改变它的明度和饱和度,形成同色系的调色板,在符合无障标准的区域,选择不同明度饱和度的色彩,形成有梯度、有层级的彩色调色板。



B端产品中光有“主角”是不够的,还要有“配角” 所以我们还要看一下辅助颜色是如何定义的?


辅助色是为了帮助页面区分状态和层级而设立的颜色,主要包括图表类仪表盘颜色和功能色,通过合理的颜色传递产品正确的信息,让其信息传达更明确清晰。


辅助色的作用是配合衬托产品主色调,在不同的产品中,辅助色运用的策略是不同的,比如我们在竟品调研中发现,辅助色经常是取自主色的邻近色、对比色和互补色等。


仪表盘配色:通过对竟品的分析可得知,优秀的仪表盘的配色有多系列及低纯度的特点,多系列配色是为了满足用户个性化的需求,而低纯度是考虑用户在长时间使用产品,色彩对其心理的影响。


功能色:这类颜色在系统一般不会随意更改,而且特定的语义一般都有固定的色相,只需改变其纯度和明度,使其视觉上符合主色的气质,使其搭配和谐。


1.通过默认主题色选择辅助色及默认仪表盘颜色

我们以默认主题色为#467FEA(H 219 S 70 B 92) 为起始点,S(饱和度)、B(明度)保持不变,H(色相)以180°为起点,以15°为增量或减量标准,生成24色色板。这个色板是我们选取辅助色的重要依据。



以邻近色、互补色、对比色为原则选择丰富的颜色


邻近色:在色相环中,相差15°的颜色为邻近色,凡在60°范围内的颜色都属于邻近色的范围,主色和邻近色的色系组成的搭配,可以在同一个色调中构建出丰富的视觉层次感和质感,赋予不同的功能含义,信息表达明确,和谐统一感很好,视觉上的趣味性,颜色的搭配显得很柔和。


对比色: 在色相环中,角度相差120°-180°之间的色彩,这里使用了120°为角度来选择对比色。


互补色: 在色相环中成180°角的两种颜色,互为补色;主色可以和其互补色的两个色彩的搭配,该色彩可以为邻近色,例如:蓝色和黄色、橙色的搭配;这种搭配既能保持互补色搭配强烈的对比度,区分关键信息,次要信息,又能增加视觉上的趣味性,色彩看上去丰富多彩。


例如:蓝色作为主色,互补色黄色作为辅助色应用在图表、图标和标签上,再选择黄色的邻近色橙色作为另外一个辅助色,应用在不同的关键信息上,有助于用户更好的阅读产品的功能和内容。



获得辅助色-9色相


通过邻近色、互补色和对比色的选择,我们从24色色相环中得到了9色相色环,9色相色盘优化后将做为图表的仪表盘颜色和语义类的功能色出现页面设计中。


校正辅助颜色


虽然我们保持相同的饱和度和明度,使用科学的方法得到了较为合适的色相,但由于色彩本身自带感官明度属性,导致在视觉感受上的感官体验并不同频。


黄色、绿色的明度即发光度较高,蓝色就稍微偏暗一些,导致色板看起来不一致,为了让不同色相看起来更加协调,需要调整色板的明度和饱和度,以保证视觉感官体验同频且更加和谐舒适。


校正后的颜色主要用于功能色和仪表盘颜色。




从辅助色中提取功能色及仪表盘色系


通过对竟品的分析总结同时结合默认主题色分析得出的9色色环,归纳分离,最后形成系统的默认仪表盘颜色。


功能色的目的是明确信息及状态,比如成功、出错、失败、提醒、链接等;功能色的选取需要遵守用户对色彩的基本认知,结合分析得出的9色色环,颜色校正,得出系统功能色。




辅助色的色阶


为了度量不同的可视化从高到低的数值,我们仪表盘颜色远远不够,所有为了保证视觉上的统一性,我们需要加入辅助色的明度色阶来区分数据层级。


同时我们产品有深色和浅色两种模式,由于视觉对比的原因,在深色的场景看下看的颜色,和浅色场景下看到的颜色是两种感受,深色场景下颜色会发亮,所以为了保持视觉上统一,我们也需要加入辅助色的色阶。


辅助色色阶建立方法与主色的色阶建立方法一致,使用 Tints and shades 系统,通过在颜色上面增加白色,或者增加黑色,来改变它的明度和饱和度,形成同色系的调色板。



模拟方案一主色、辅助色及消色汇总


通过以上分析我们得出模拟的主题色、仪表盘颜色、功能色及消色。为了方便记忆,我们分别给颜色取了名字和编号,命名方式采用植物色彩命名,这也是200多年前颜色数值出来之前的命名方式,最早见于1814 年出版的《维尔纳色彩命名法》



本期交流就先到这里,希望这个配色的思路能够帮到大家,感谢大家的耐心观看!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:Evan绘酷设计

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



当你设计时,你应该思考些什么

ui设计分享达人

作为设计师的我们总会在自己的闲暇时间去做设计有关的练习,那么我们到底有没有深入思考过我们怎么去练习以及如何思考才是最有效的呢?也许有的人练习了很久发现自己的进步速度很缓慢,有的人练习的不多,但每次输出的作品质量跟上次相比却提升很多。那么其中的差异到底是出现在哪些方面呢,我之前也一直在思考这方面的问题。现在将自己领悟出来的一些方法分享给大家,希望能够起到一些帮助。



前言:什么是最有效的学习方式


在开始正文之前,我希望大家能够理解什么是最有效的学习方式。在当前的大环境下,各个平台学习类的教程或者文章层出不穷,我们似乎总是有学不完的知识,每天也都在积极地学习,当时看完觉得收获颇丰,但一天工作下来也许看过的东西就忘了50%,甚至过了一周后发现自己已经什么都忘了。


那么你有没有思考过为什么会产生这样的结果呢?对于自身的学习和思考方式我们是不是还有待改进的方法?我们可以先来了解一下学习金字塔这个模型:

学习金字塔是美国缅因州的国家训练实验室研究成果


从图上我们可以看出,我们平常用的最多的听讲或者阅读的学习内容留存率[两周以后还能记住内容的多少]仅仅只占5%~10%这个区间,而讨论/实践/教授给他人等这种需要自身参与性强的学习内容留存率则高达50%-90%,平常通过阅读等获取信息很容易遗忘的原因也有一部分在于此。


不难发现,前四类的学习行为都是属于被动输入型学习,而后三类学习行为则是属于主动输出型学习这也就是常说的“最有效的输入方式就是输出”。


因此要想提高听讲或者阅读的学习内容停留率,我们需要将被动输入转化成主动输出,即我们在进行这类活动时需要调动大脑积极思考,将大脑接触到的信息与我们已经掌握的知识产生关联去想一下我看了这些内容可以运用在哪些方面以及怎么去运用,并在最后真正用于实践[经历过实践去输出你才会发现那些潜在性的问题]。我们才能更为有效地去消化一篇文章或教程。好了,希望大家看完能积极思考一下本文所阐述的内容,能够拥有一些不一样的收获就是我写这篇文章最大心愿。那么接下来进入正题。



01 明确自己的设计目的


做任何事情都应该拥有一定的目的,因此我们在开始一项设计练习时,第一件需要做的就是确定我们的练习目的,即你通过这次练习想要表达什么,这种表达可以是技法的展现或者说内心情感的表达,只有明确当前的目的性,你才能有更精准的方向。

但很多人会发现即使自己设立了目的却总是会因为各种原因而中途放弃掉,那么能让我们去坚持完成目的的核心是什么呢,就是去量化你的目的和设立明确的截止日期。量化目标就是要将你的大目标分解到具体每一天应该完成的小任务,这样拆解不仅降低了目标的难度,也能清楚知道每天该做什么,有明确截止日期的话就能避免拖延。


比如拿“在一个月内我的练习目的是做电影界面的设计“和”在1月1日至1月30日期间我要完成30张电影界面“相比,显而易见后者的目标更具象,更具操作性。只要我保证每天一张界面,即可在规定时间内完成任务,偶尔如果遇到特殊事件也能及时弥补落下的部分。前者模糊不清的目标很容易让我们三天打鱼两天晒网,一张界面也是练习,一百张界面也是练习,也许一个月下来发现自己就做了那么几张界面,完全达不到练习效果。



02 目标的确立要跳出我们的舒适区


很多人会说,我确立了明确的目标啊,也有在坚持练习,可一段时间下来却感觉自己的能力没有很明显的提高。这有可能就是你的目标建立出了问题。那么怎样的目的才能最有效地提升我们自身的能力呢,在我看来跳出自身舒适区去建立目标效果才是最正确的。

舒适区指的是一个人所表现的心理状态和习惯性的行为模式,人会在这种状态或模式中感到舒适。舒适区,又称为心理舒适区


如果你发现你每次确立的目标自己都能够很轻松愉快地完成的话,那么你可能只是一直在自己的舒适区内做着重复性的工作, 对自身的能力提升并不会出现显著变化,也就是常说的那句话“你不是有五年工作经验,而是把一个经验用了五年!“

跳出舒适区,指的是来到学习区,去有意识地练习那些你了解过,但是不能熟练应用的技能。例如你对界面的设计已经比较熟练了,但是你对交互动效这一部分仍然感到比较陌生,那么如果继续坚持界面练习可能只是简单在堆积你的练习数量,这时你更应该去尝试一下界面的一些交互效果并将其制作出来。


这样你就可以将你已经掌握的知识与并不熟练的知识连接起来,从而能够更高效地学习和吸收新的知识。前期尽量选择简单的效果练习,循序渐进,以此来建立你的自信心,不要急于求成而误入恐慌区,妄想在几天之内就能够做出和从业几年的大神一样的高难度复杂效果,那样不仅学习效果差,还会打击你的自信心,造成反效果。



03 多看的重要性以及怎样去看


相信大家对于多看这一点已经是耳熟能详的词汇了,曾经也听过很多次大神分享,无一不提及多看多练这种类似的话。那么你有没有深入思考过为什么很多高手都在提及这一点呢,我们所谓的看和他们的看是否说的是一个概念呢?

牛顿曾说“我之所以比别人看得远一些,是因为我站在巨人的肩膀上”,那么在我的理解范围内,多看即是站在巨人的世界里看设计。


在诸如国内网站站酷/UI中国以及外国网站dribbble/behance等平台上,我们可以找到很多优秀的设计作品(在看的过程中可以不要只是局限于UI设计,可以更多地看看首页的其他作品,能够最大限度地提高你的审美),遇见好的作品我们不要只停留在视觉表面,要学会去分析好的设计,以及与我们自身所做的界面产生对比。


分析最直接的方式就是自我提问。这个设计我为什么会觉得它好看,是颜色的搭配吸引了我,还是版式的设计非常合理,又或者是整体的配图非常和谐?”当然,你还可以更近一步——“颜色的搭配是哪里吸引了我,是对比色用得非常合理,还是整体色彩的占比非常平衡,又或者说是颜色的明度和饱和度搭配得非常好看?“


最重要的是要联想到自己已经掌握的知识,将你发现的好的方面与自己的知识进行结合。“如果我下次在做界面练习的时候,我该怎么去使用这种色彩搭配,如果换成其它颜色,我有没有能力将它搭配得像这样和谐美观?“

 

这样自我提问的方式最终目的是将好的东西内化为自己的知识,否则你看再多的东西,也只是你每天所接触的信息而已,过眼即忘,并不能有效转化成为你的设计认知。当然,你要将那么好看的设计都收进你的素材库里,好记性不如烂笔头,建立素材库就是为了让我们更好地去复习我们曾经欣赏和思考过的东西。

自己的eagle资料库



04 不找参考的设计都是耍流氓


毕加索曾说过这样一句话:好的设计师借鉴,伟大的设计师偷。乔布斯也曾说过类似的话。举个例子,我们可以先看左边一个比较古老的界面-施乐公司70年代的界面,再看右边乔布斯拿来改进的做的macintosh界面:

以及经过改良后的macintosh界面,然后比尔盖茨在看过这个设计后而做出的关于微软的界面

看了上面两幅对比图,我们可以发现,伟大的人在创作时也需要找参考,但他们都是尽量吸收参考好的部分,然后加入自己的思考和理解,去创造更好的东西。他们并不是说凭空就可以创造出经典的东西。


所以说,找参考是设计过程中非常关键的一个步骤,在找参考的过程中,就相当于你在和其他优秀的设计师对话。因为一个设计师的脑容量是没法与全世界设计师的脑容量相比的。虽然参考不一定是你做设计的标准,但却能对你的创意和设计带来一定的方向和灵感。因此我们在开始一项新的设计目标前找参考,去观察别人的作品是怎样表现的,他们设计的东西出彩的地方在哪里,和我心中所想的有哪些不一样,我该怎么在我的设计中去融合那些出彩的东西。


只有当你找到足够多的参考,你的心中才会有一定的衡量的标准,才会知道好的设计和坏的设计差距在哪里。最终体现在你所做的设计上。也许有人会说,有的厉害设计师感觉都不怎么找参考,那是因为他们的脑海中已经积累了足够的参考来让他们自由调动。



05 你在设计时是否做到了专注


我们可以做一个小实验,在自己手机上下一个Forest[番茄时钟],设定两个小时的设计练习时间,看看在这个持续时间内你有多少次会情不自禁地拿起手机看消息。(我在做这个测试的时候会发现有很多次都会无意识拿起手机看信息),由此可见我们即使是在练习时间内也会存在很多浪费时间的小动作,如果丢掉这些小动作,我们在有限时间内的产出将会大大提升。

我也是在前些日子看《深度工作》这本书时才意识到专注工作的重要性。书中说:想要迅速掌握困难的技能,你必须高度专注,不能有任何干扰。高质量工作产出=时间x专注度。而现实中的我们往往是花费了很多时间,却由于自己的专注度很低,导致整体效率和产出都大打折扣。我想这也能解释为什么都是在同样的时间内,每个个体的成长度都不一样,成长快的人会把单位时间的效率发挥到极致。


因此在每次给自己规定设计练习时间的过程中,尽量找一个安静不受打扰的环境,将手机设置成番茄时钟模式,保持高度的注意力去完成自己的练习目标,你会发现你比平时用了更少的时间却做出了更好的东西。



06 对于规范的理解


我们应该知道,UI设计不同于绘画以及平面设计,它是基于一定限制而进行的设计活动,而这些限制我们称之为设计规范。就像你在开始游戏之前需要知道游戏规则一样,我们在开始设计前也是必须要了解相应的设计规范的。比如状态栏的高度,底部图标的大小,间距的大小,字号的规范等,在这里不做详细解读。也许刚入行的人会觉得设计规范限制了设计的发挥性,但其实规范只是让你能够朝着一个统一的方向和保持基本数值的准确性,但却依然能够给设计很大的发挥空间。就像之前看到的一段话:[此处将其做成了一个图片]

也许看完这个你更能理解规范对于UI的一种作用,盒子就像我们的手机,展示空间就那么大,你需要在一定的限制内发挥你最大的能力去做出好的设计。

 

因此,当我们在练习app界面时,心中一定要有自己的一套规范(不论是否做出来),执行过程中严格按照定义的基础规范来,从而更能够高效地完成练习任务和保证界面的统一性。


07 学会建立自己的界面走查表


就像在学校时,老师总是强调我们试卷答题完成后一定要进行自我检查去排除一些不该犯的错误。同理,设计也是一样,每当我们初步完成了设计界面后,我觉得最重要的也是进行自我检查,排除一些界面常见的错误。当然,我说的走查并不是单纯看文字等显而易见的错误,而是按照一个优秀的界面要求去走查我们的界面:


设计风格统一了吗?

界面的整体设计风格是否统一,符合产品调性。颜色的使用/图标的设计风格/圆角大小的统一等;

图片是否清晰?有无版权?

你在整个设计界面所使用的图片是否是高清的,有无模糊或者水印,图片是否会构成侵权等,一个低质量的图片会瞬间让你的界面下降了一个档次;


信息层级拉开了吗?

做的界面整体的字号大小是否有重点区分,能不能清晰地看出文字的层级关系,元素间距有没有符合各层级的对比关系;


投影用对了吗?

你的投影考虑了环境色的影响吗,如果用纯黑的投影会让整个投影看起来非常沉重;


你的界面有呼吸感吗?

你的界面看起来会不会很拥挤?不要堆得满满的,注意留白以保持元素的呼吸感,从而让界面更耐看;


对齐了吗?

不论你是工作几年还是刚入行的新人,都一定不要忽略这个问题。左对齐右对对齐以及居中对齐。说起来很简单,但不要因为这个错误的发生而让别人质疑你的专业性;


以上列举了一些部分常见的界面问题走查,还有更多的界面基本问题值得大家去留意。我认为走查表的建立还是应该基于自身的经验来制定,那样不仅会更符合你的设计风格,更会让你走查起来更加高效。刚入行的同学的话可以多看看高手关于界面精度提升的一些建议来作为自己的走查参考。



08 不要闭门造车,走出去


相信通过走查表的建立会让你发现一部分的问题,但碍于自己的审美水平以及理解能力,我们很难去完全找出自己的问题。也就是说,当我们通过走查表纠正了一些常见问题后,我们要学会向大神们去请教问题。


通过你认识的一些大神或者在设计群里发出自己的界面,让其他更厉害的人去发现你界面的其它问题,这样会让你意识到一些你不曾发现的问题,从而提高你的判断能力和界面水平,督促自己的进步。当然,不要把请教别人当成一件理所当然的事情,学会向那些给你提出界面修改意见的人们说一声谢谢。(在这里也谢谢曾经帮助过我的那些可爱的人们~)

写在最后:少熬夜多锻炼,注意身体健康


在这里想向广大辛苦奋斗的设计师们说一句,每次做完设计练习还有时间就多多锻炼吧,身体从来就是我们奋斗的本钱,只有身体健康才能更好地作图呢。所用时间的长短从来不是衡量一个人厉害的标准,熬夜不一定代表就能够做出更好的界面,专注和高效才是我们应该学会的方式,希望大家在新的一年能够用更少的时间做出更精致的界面。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:进击的M

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

重新设计东南亚头部在线超市的真实案例

lanlanwork


I. 发现

客户访谈

由于这位甲方的合作态度良好,所以设计师有机会与 SESA 的创始人和产品经理进行了 2-3 次会议。

借此了解了业务目标、用户需求和技术限制等关键问题:

图片

主要问题:

  • 低转化率:杂乱的界面使用户很难浏览商品。
  • 手机端体验不友好:几乎 90% 的用户是通过手机访问网站,但手机版的设计不够理想。
  • 手机端糟糕的界面和体验:目前他们使用的是现有的网站模板,根据目标用户的反馈,缺乏优化而且加载速度很慢。

客户需求

  • 一键式购物
  • 轻松的界面和体验
  • 无缝的商品搜索
  • 折扣和优惠更容易被看到
  • 使用网站时能感觉熟悉而简便

成功指标

  • 增加客单价
  • 增强人们的对品牌的认知感
  • 增加用户和订单数量
  • 无缝的体验
  • 让健康的生活方式更加受欢迎、评价、容易取得,更加有趣而美好
  • 提供并教育用户健康的生活方式,并转化为愉快美好的生活

 

目标人群

根据产品团队提供的数据,整理出了目标人群的特征:

图片

 

II. 构思

人物角色

根据以上信息,整理出了两个完全不同的人物角色:

图片图片

 

故事版

没有区分人物角色的故事版:

图片

目标用户的故事版:

图片

 

体验地图

思考分析用户旅程的五个阶段(探索网站、比较商品、确认下单、完成购买和接收配送)和用户感知的三个方面(行为、思考和感知),制作了体验地图:

图片

将当中的关键信息挑选出来:

图片

 

竞品分析

设计师找到了三家主要竞品,先大概了解他们的特色和优势:

图片图片图片

然后从 Google Play 的评论中寻找竞品的问题,这样就可以思考如何战胜他们:

图片图片

P.S. 评论分析是一种简单有效的竞品分析利器(也可以用来分析自己的产品),具体方法我之前有分享过:别总想着数据分析/用户调研,先把评论分析做了吧!

 

III. 设计

信息导航

先把大致的用户流程确定下来,这样对整个产品就有了一个整体构思:

图片

 

线框图

然后用手画出线框图,定下页面的整体布局:

图片

 

低保真

将线框图手稿用绘图软件细化,制作成低保真方案,用来向客户展示和做用户测试:

图片

图片

 

IV. 完成

可用性测试

找用户做测试时,用的是低保真可交互原型。

根据测试发现的问题,设计师直接将优化方案运用到了高保真方案上,所以下面整理的问题都用高保真方案来配图展示:

  • 1. 自动定位:测试之前用户必须手动搜索位置。
  • 2. 属性选择:由于客户想要一键式购物,所以当用户点击熟悉(通常是重量)右侧的箭头时,可以反转卡片进行详细选择。

图片

  • 3. 促销展示:原本设计了三个促销区,但是测试中发现用户面对大量的信息无法充分理解,所以移除了一部分,只保留了头图和分类优惠。

  • 4. 商品导航:为了避免用户迷路,将商品分类导航放在了所有页面顶部,并且悬停时展示子分类和相关文章。

 

高保真

图片

 

响应式

这个网站需要具备很高的响应式能力,不论在 PC 端还是手机端,都能轻松使用。

但由于 PC 端和手机端的尺寸相差太大了,所以不得不使用断点(Breakpoint)来判断用户当前处在哪个端,并展示相应的界面。

这个断点的概念在栅格系统很常用到,指的是当界面尺寸缩小或增大到某个(或几个)零界点时,间距大小或其它界面元素发生突变。

图片

上图来源:三种最主流的响应式栅格

 

这个方案的对于移动端的特殊处理包括:

  • 确保商品分类的位置,方便用户记忆
  • 使用汉堡菜单
  • 提供模仿原生 APP 的吸底导航

图片

 

Before&After

最后对比一下优化前后的方案:

图片

图片
图片
图片

图片

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》重新设计东南亚头部在线超市的真实案例

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




UI&UE实用方法论 | 一直被错用的米勒法则(7±2)

lanlanwork


因为「米勒法则」研究的是人类大脑的短期记忆量,而导航菜单、金刚区这些场景,是侧重用户识别,而不是侧重用户记忆。试想你作为用户的时候,你会去记导航菜单的名称吗,哪怕是短暂地记下来(就像我们记短信中的验证码,然后到另一个应用中输入的场景一样,短暂地记住)?我想大部分的人在这些场景中,应该都是所见所得、过眼云烟的吧。

并且“导航菜单的设计旨在用户识别而不是用户记忆”这个观点,在UX研究咨询公司 Nielsen Norman Group(NN/g 尼尔森诺曼集团)的“web可用性”一文中也有指出。

所以以上导航菜单、金刚区的案例,产品可能确实也是有在控制菜单项目的数量,但更多应该是出于对「希克定律」的考量,而不是「米勒法则」(我之前也有在《交互四策略实现希克定律》一文中说过:用户的决策能力会跟随选项数量的增长而降低,给用户非常多的选择,约等于没给用户选择)。

这些案例完全是强行反推,给套了个「米勒法则」的结论…实属不妥…那我就来谈谈,我对「米勒法则」的理解以及它在产品设计中的用途。

 

01、「米勒定律」在研究什么

米勒在1956年《心理学评论》刊中的《神奇的数字7±2:我们处理信息能力的一些限制(The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information)》一文中,首次提出「米勒定律」。但该文只算是一篇阐述学术观点的文章,不算严格意义上的论文。

米勒在文中引用了实验者记忆变化音调的实验,发现人们在短时间内可以很好地记忆并复述5~6位的信息,随着收到的信息位数增多,记忆出错的概率也在不断增加。但因为实验者存在个体差异,最终的信息记忆量基本都能在该基础上再浮动2~3位。所以得出了“人的大脑在短期记忆中最多可以记住大约7±2个信息团”的结论。

但因为该实验与文章不属于正式的科研研究和论文,所以后来的科研学者又对“人类短期记忆上限”进行了更多的实验研究,最后形成了很多种学说。有坚持7±2的守旧派;有认为最佳短期记忆信息团为4±1的创新派;也有认为“人类的最佳短期记忆不应该被束缚于一个固定数值区间”的不站队派(确实 NN/g 尼尔森诺曼集团也说过,用户的短期记忆能力存在较大的个体差异,前25%的人群比尾部25%的人群会好大约2.4倍)。

但不论怎么说,这些实验都明确表明了:人的短期记忆存在上限,只是对具体能记住的信息团数量存在分歧。

基于这个结论,我们在设计产品时,该如何加以运用呢?

 

02、在人机交互中的运用

NN/g 尼尔森诺曼集团基于「米勒法则」,提出了以下几则设计指南参考:

  • · 响应时间必须足够快,以便用户在等待下一页加载时不会忘记他们正在做什么;(体验侧)
  • · 更改访问链接的颜色,以便用户不会忘记他们已经单击过哪里;(UI+交互侧)
  • · 不要让用户去记优惠券代码,而是该将优惠信息置入短信或邮件中的链接,通过链接自动将优惠券转移到用户的购物车中。这样可以让计算机承担记住晦涩代码的负担;(交互侧)
  • · 在用户可能需要帮助的场景显示“用户帮助”功能,这样他们就不必前往单独的帮助功能区去记步骤,然后再回来解决手头的问题。(交互侧)

你会发现,实际上专业团队对「米勒法则」的理解,基本都在于如何解决“人的短期记忆上限”问题,并没有去纠结,到底是7±2,还是4±1…

并且我在 NN/g 团队每一条设计指南的后面都标注了该条指南作用的侧重向,发现大多都体现在交互侧。因为「米勒法则」研究的是人的短期记忆极限,在视觉表现层其实很少会运用到。视觉更多强调的是“从识别到操作”,这并不是「米勒法则」的研究内容。

举一些切实的例子吧,基于「米勒法则」而诞生的产品交互中,我们最常接触到的就是移动设备自动获取短信验证码,方便用户一键填充;通过图像识别用户的银行卡号,减轻用户记忆负担。

这一类有关用户短时记忆的场景,为减轻用户记忆负担而诞生的交互形式,才是真正的基于「米勒法则」。

现在你明白了吗?因为「米勒法则」中提到了短时记忆极限量为7±2个信息团,让许多人都去关注数字了,而忽略了「米勒法则」到底在研究什么。然而这个数值,迄今为止,在科研领域依然还存在着分歧。

 

03、关于「米勒定律」的拓展与延伸

3.1 拆解与再组合  

米勒在他发表的文章中也提到了:虽然短时记忆存在上限,但是人们的大脑也总是在努力寻找其他方式拓宽这个极限,例如拆解与再组合。

在前面米勒让实验者记忆变化音调的实验中,就有人通过自主拆解、再组合信息形成信息团的形式,来增加自己最终记住的单位信息数。

基于此,前面图像识别用户的银行卡号的示例,如果因为技术受限而无法实现,我们也可以通过拆解卡号为“4位一个信息团”的方式,来方便用户记忆、输入与校验。这样在体验方面也是一种弥补。

 

3.2 让用户放弃记忆  

要将用户的记忆负担减轻到极限,那就干脆让用户放弃记忆。

例如苹果基于自己的云管理与密钥技术,在识别到用户在创建密码时,会自动填充强密码,强密码复杂混乱到很难被人脑记忆。

一方面加强了密码的安全性;另一方面,搭载其他技术手段来减轻用户的记忆负担,不再纠结于用户究竟能记住多少个、多少位的密码,直接将用户需要记忆的内容减轻至0,这也许才是真正基于「米勒定律」而创造出来的产品设计吧。

 

04、写在最后

其实这篇文章我认为更多是写给交互和体验设计师看的,如果你着手的功能有涉及到用户记忆的场景,不防可以参考一下这些减轻用户记忆负担的案例,还有NN/g的设计指南。

但好像现在「米勒定律」被很多UI设计师用成套路了…然而你发现了吗,文中「米勒定律」的案例,与视觉、与“7±2”很少存在关联。

如果文章开头导航菜单、金刚区的例子,你硬要说是参考了神奇数字7±2,我认为勉强也算行吧(嗯…勉强算)。

因为虽然我认为其设计理论更多是建立于「希克定律」之上的,但「希克定律」告诉我们要减少展示给用户的选项数量,却并没有给出一个建议值。如果你希望在某些场合给你的设计一些立足点(大家懂的),你如果说结合了「希克定律」与神奇数字7±2,我认为比直接说基于「米勒定律」要更内行一些。

 

原文地址:UCD耍家(公众号)

作者:Howiet

转载请注明:学UI网》UI&UE实用方法论 | 一直被错用的米勒法则(7±2)

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



单色配色你真的会用吗?(实操篇)

lanlanwork


01 单色配色实操

图片

选择基色“H:255 S:100 B:100”的深蓝色为背景。

然后绘制两个正圆,调整底对齐:

图片

图片

图片

大圆颜色调整为和背景相同的颜色,透明度降低至0;调整小圆的颜色,色相(H)和亮度(B)保持不变,降低饱和度(S)为80%。

图片

为了让颜色混合更融洽,给主体执行“效果—模糊—高斯模糊”;再执行“效果—纹理—颗粒”添加质感。

图片

最后添加文案排版,方案一就设计好了。

可以看到本案例精简了色彩层级,色调干净统一且稳定。利用两款同色相颜色的渐变层次变化,产生了低对比度的和谐美感。

图片

使用同样的方法还可以设计出其他方案:

图片

图片

 

02 单色配色实操

第二个方案把英文作为主体。从“视图”菜单中打开“符号”面板,选择英文点击“新建”按钮,把英文设置为新符号。

图片

接着画出圆形外框,执行“效果—3D—凸出与斜角”命令,设定旋转角度和凸出深度:

图片

点击“贴图”进入贴图视窗,勾选“三维模型不可见”,表面选择“4/4”,符号找到新建的英文符号,勾选“缩放以适合”将文字缩放成适合的大小:

图片

背景选择“H:255 S:100 H:100”的深蓝色作为基色。把英文图形执行“对象-扩展外观”,双击进入图形中分别给文字和背景填色,保持色相(H)不变,调整饱和度(S)和亮度(B)的数值。

图片

使用相同的方法制作出其他英文圆环,并填充颜色:

图片

最后加入文字排版,设计完成。

图片

可以看到此方案虽然选择了多个颜色,但通过单色搭配可以得到统一协调的视觉效果。

图片

使用同样的方法还可以设计出其他方案:

图片

图片

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》单色配色你真的会用吗?(实操篇)

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



金刚区也要考虑交互,不只是画图标而已

lanlanwork


金刚区是什么,想必大家都有所了解。

没有的话看这张图就懂了:

图片

图片来源:淘宝首页

 

我在微信上搜了一下,发现大部分讨论金刚区设计的文章,都是在讲怎么画图标。

但是我自己在使用各大 APP 的过程中,发现很多金刚区并不是那么好用,而且这跟图标好不好看无关。

金刚区设计不好,会对我的使用造成直接影响:

  1. 不够清晰易懂根本不想去看
  2. 首次使用找不到需要的内容
  3. 下次使用记不住图标的样子
  4. 图标设计得怪怪的不好理解

我今天就来总结一下,对于金刚区设计的交互/体验思考:

  • 数量
  • 顺序
  • 颜色
  • 样式

 

数量

金刚区里有多少项比较合适?

这其实是米勒法则(Miller’s Role)的典型运用了。

如果你还不太了解米勒法则,看看下面这张图里的词语:

图片

现在,半分钟回忆一下,你记住了多少个?

……

大部分人能记住 5~9 个。

米勒的研究发现,普通人的工作记忆(Working Memory)只有 7±2 个信息块。

如果给的信息超出了这个数字,大部分人也只能记住这么多。

所以说,金刚区里的图标数量,最好也维持在这个数,否则就是对用户的记忆能力要求过高了。

通常来,4 个图标很轻松,说 6 个图标是比较理想的,8~9 个就有点吃力了,10 个就超纲了。

例如支付宝这个就过分了,好在这只是工具类产品,复杂一点也没办法:

图片

 

顺序

人们在看阅读文字时,视线轨迹是之字形:

图片

人们在阅读表格时,视线轨迹是除草机形:

图片

上图来源:这样设计表格,看着真难受!

 

虽然金刚区的眼动图我没有,但第一步肯定是从左上角开始往右扫。

图片

所以,用户最有可能使用的图标,应该从左到右排在最上面一行,最不常用的可以排在右下角。

例如美团外卖这个设计,看着就挺合理。不但把重要内容放在第一行,而且还做了很大的视觉区分:

图片

不过一些不愁流量的 APP 会选择把黄金位置用做商业宣传,难免损失点易用性。

 

颜色

仿真图标

如果追求质感,多半会使用物品本身的颜色,例如每日优鲜这个:

图片

这种图标就没什么颜色好讨论了,注意一下整体和谐就好。

 

数量较少

如果图标数量不多可以使用一个颜色,那么颜色上,同样没什么好讨论的。

例如 QQ 音乐:

图片

 

数量适中

如果图标数量在 7 个左右或以内,那么可以每种颜色的图标都来一个,这样用户也能记住大概什么颜色代表什么。

例如京东这样:

图片

 

数量很多

图标数量远超过 7 时,就不可能每种颜色来一个了,否则颜色都不够用了。

如果还是想要划分颜色,可以将类型作为依据,这样用户在寻找图标时会比较有方向。

当然,其实也可以简单点,干脆都一个颜色,例如联通手机营业厅:

图片

 

样式

底框

一些产品为了统一感,会用圆圈或者圆角矩形,把所有图标都框起来。

这样视觉上是好处理了,但交互上很不推荐,因为会大大降低图标的识别度,眨眼一看都长一样。

这种底框在主流产品里已经很少见了,不过这么做的设计师还是不少,至少站酷上可以找到很多:

图片

这种图标数量少,有颜色区分还好,如果数量多又一个颜色,那就很难辨认了。

 

风格

纵观常见的金刚区图标,通常不外乎四种样式:线条、形状、2D、3D、仿真。

图片

联通手机营业厅

 

图片

QQ音乐

 

图片

京东

 

图片

美团外卖

 

图片

每日优鲜

 

任何样式都能让用户识别和记忆,但是不同的样式给人的感官不同。

真实性越高的视觉样式,就越容易给人高级的感觉;相反真实性越低的视觉样式,越容易给人简单边界的感觉。

 

总结

我发现做设计时,从不同的角度会带来截然不同的思考。

今天这篇分析,算是一个以交互体验为主,融合了一些视觉角度,希望带给大家一些灵感~

如果你还有什么 idea,欢迎在评论区探讨~

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》金刚区也要考虑交互,不只是画图标而已

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档