首页

UX设计全方案思考与呈现

纯纯


配色/图标什么的是基础吗?

之前一直没有太多关注过如何定义一个 APP 的配色,或者如何画一个漂亮的 icon。曾经的上级指示都是这些基础对商业的不可量化。于是我在思考一个问题,就是没有直观商业价值的设计要素都失去了意义变成了所谓基础的事情吗?

半年前面试字节的时候,面试官问了我有关配色的定义,细节到为什么是这个色值。当时十分震惊于这么细节的问题,之后我就想起了之前有位朋友给我发送过一份有关支付宝「蓝」的定义 pdf,洋洋洒洒几十页就是为了解释他们为啥用这个有点脏的蓝色#108ee9 当主色。

所以其实 APP 的配色/图标与主品牌是一脉相承的,它是品牌的延续与象征。它以最直观的态度传达给用户,这个产品以及品牌的调性,并以此建立最强有力的视觉识别性。所以我觉得它是可以有条件地展示在我们设计方案里的,但一定注意它的篇幅和表达的方式,维度在品牌传达这一层就对了。

至于如何展示和定义你的 APP 配色,一般 2 类情况。

1. 在品牌主视觉配色基础上的适配

这种情况一般适用品牌主视觉方案已经设计完毕,APP 端作为延续。这个时候一般注意配色从 CMYK 模式到 RGB 的转换,所以作为 APP 的配色,具体色值上可以稍作调整,使它更适配于 LED 屏的用户感知与舒适度。

另外可以使用透明度进行色彩分阶段,一般从 0-100% 分为 10 阶就足够我们日常界面设计使用了。

从零到一系列:UX设计全方案思考与呈现

2. 0-1定义APP配色

这种情况下我们从感性和理性 2 个角度去定义颜色。

从感性的角度分析:情绪板应该大家都熟知的了,根据不同的行业和用户定位得到相应的关键词。对应不同的关键词再搜集对应的图片,从图片和自然感知中提炼出主色。

从理性的角度分析:我们把色彩分为对比色、近似色、复合色、单一色、三角对立色和渐变色六种。根据产品的类型和定位,我们决定使用什么样的配色。比如一个年轻大学生专用的社交型 APP,我们可能就倾向更多地使用对比色这样的撞色得到更多潮流与青春的味道。

从零到一系列:UX设计全方案思考与呈现

至于图标的话我就更不用多说了,大家肯定都记得那些非常基础的绘制图标的法则。个人认为图标也不太需要放一个单独的篇幅去展示,除非它有一些新奇有趣的亮点。

界面框架,只是框架而已吗?

在之前的文章中有写过,匹配产品定位的界面框架一旦输出,对整个 APP 之后的迭代与功能设计都有很直接的影响。定义整体的UX 框架方案,是实践设计目标与策略的过程,基本围绕着这 3 个出发点:匹配产品定位、满足业务拓展性、符合舒适度美学 。

1. 定义整体框架

首先我们从宏观角度分析,一方面产品的业务线处于什么情况,是相对独立的业务主线产品(举例:拉勾)?还是平台级产品(里面包含了许多垂直的业务线,举例淘宝)?如果是平台级产品在整体框架设计时就需要考虑跨端跨业务的框架拓展型。

举个例子,就是在定义平台框架的时候要考虑这个框架与容器是不是同时适用于底下的子业务线,同时当这个框架到了 H5、小程序、PC 的时候需要做哪些适配调整,是否都可以很好地进行兼容适配。

另一方面,整体框架设计的类型是否符合设计目标。举个例子,无框式超大留白的框架设计虽然看上去很厉害,但在大部分商业产品中它的实用性却非常低的。假设说我们今天需要做一个电商类的 app,设计目标是希望能够提升业务转化以及购买效率,那么展示效率与功能分区就显得尤为重要,它就更适合一个相对紧凑的卡片式为主的框架设计。

其次从微观的角度来说,遍地就都是细节了。舒适度美学这一说,其实难免有些抽象,我们把它转为相对合理一些的落地原理就会清晰很多,像大家熟知的间距 4 倍数原理、对齐原则等等。但是这些微观的内容不建议大家放到方案展示里,因为它并没有针对单个方案的特殊性,更像一种大众共识。

从零到一系列:UX设计全方案思考与呈现

△ 多说无益,直接上最终的效果图,方便大家参考

2. 具体容器解析

我们特地把单独的容器部分拿出来解析,是因为自定义容器是展示核心业务最主要思考呈现,同时还可以配合运营做很多提升业务效率的配置。在做具体设计的时候,我们需要区分「端上固定」模块和「运营配置」模块之间的差别。

「端上固定」模块

顾名思义就是开发端上需要写死的模块。写死的模块意味着,无论一个配图还是一句文案,也只有开发童鞋修改后通过发版才能实现内容变更。一般适用于相对固定的产品功能以及 UGC 用户生产内容。比如:拉勾上传简历功能、斗鱼的直播间列表。

「运营配置」模块

相对「端上固定」,「运营配置」就不需要跟着发版,可以随时后台上传替换模块内的内容,适用于需要 PGC 生产的内容。说到这里很多童鞋可能马上就联想到 banner,弹窗的运营位了,但其实除了这些之外还有很多容器模块是需要灵活配置为「运营配置」模块才能更有效地提升运营业务价值。

我们可以这样来区分「运营配置」模块类型。

一种是纯运营配置模块,即设计与开发输出框架、定好配置字段限制之后,运营可以独立完成后台配置的。比如:资讯 app 0-1 前期的资讯列表内容。

另一种是运营设计配合模块,即需要设计配合运营输出一定的设计图才可以进行后台配置的。比如:常见的 banner、弹窗、热门推荐专题等。

在 0-1 的设计方案中,更推荐大家展示「运营配置」模块的内容与解析,因为 0-1 是个以拉新为主的阶段,运营显得尤为重要,所以我们的设计需要侧重考虑整体的运营效率与转化。

从零到一系列:UX设计全方案思考与呈现

如何展示亮点设计?

在我们概述完大部分的整体思考路径与设计方案后,我们需要由面到点,从全局提炼细节,突出自己的设计方案亮点。

而如何提炼这个亮点呢?是挑一个我设计的最好看的界面呢?还是直接放最复杂的那个流程?以下是推荐选择的亮点设计:

1. 完成理论实践,并可以量化价值的设计case

大家应该都了解,一些和设计息息相关的数据 UV/PV/GMV/ 相关业务指标等,以及一系列在实践中很好应用来解释设计方案的理论支撑比如 5W1H、GSM 与五度分析……这些数据和理论是支撑我们设计更饱满更有说服力的重要支点。

虽然在 0-1 的项目里,我们基本不太用得上优化数据比对(因为产品初期用户数量少,产品体验路径也是一直处于不断试错阶段),但是我们还是可以借用上文所述的一些方法论或者 A/B test 来完成我们的方案思考过程展示。

从零到一系列:UX设计全方案思考与呈现

那些你在完成践行设计策略完成设计目标时获得的数据指标要提前预知,养成习惯之后,你就可以快速轻松地察觉到哪里有可以做 A/B test、进行埋点数据比对的地方了。

2. 影响上中下游环节的设计case

除了对业务提升价值的项目外,我们有时候也需要注意对品牌设计、产品、运营、技术等上中下游造成影响力的设计项目。通常这类设计大部分也都是设计自驱发起的,能起到提升各方人效和业务效率的作用。

举例的话,我能马上联想到的就是多方协作的大型线上组件库,可以参考阿里的 Ant design、滴滴的魔方,在之后的版本拓展中甚至可以延展成功能更加强大的多方协作 UX 设计资源中心。

从零到一系列:UX设计全方案思考与呈现

规范与组件库的定义真的备受关注?

感觉近期面过的 80% 的公司都对组件库的定义非常关注,所以我们要做的不仅仅只是放一个视觉规范或者组件库的全景图,而需要对组件库进行拆解。



文章来源:优设(土拨鼠)   作者:Nana的设计锦囊



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


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

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


界面交互动效核心知识的分类与总结

纯纯

一.  什么是界面交互动效?

界面交互动效是展现界面间的转换和界面内元素变化的交互反馈。而效果就表现在触发与结束的过程中,表现清晰的层级关系,自然的引出与结束。交互动效有着承上启下的重要作用。

二. 界面交互动效是用来干什么的?

  • 让用户清晰地感受到当前所处场景和层级关系。
  • 多种UI元素之间的相互转换。
  • 给用户制造惊喜感使用户愉悦。

三. 界面交互动效五大注意点

  • 避免动效过于花哨、酷炫、标新立。
  • 在效率型应用中,过度、无意义的动画只会阻塞任务流程。
  • 动作动效不超过1秒。
  • 用户专注内容时,不要用吸引注意的动画去打扰。
  • 出现频率高的操作动效,避免用户反感,延迟操作时间。

四. 如何设置缓动曲线与时间让动效更加自然,可以看下面的一些总结

  • linear曲线(匀速运动)除了一些特殊场景如加载、很少被使用。
  • easeIn(先缓后快)使用场景较少,主要在掉落、中使用。
  • easeInOut(头尾缓、中间快)通常在轮转切换的动画中使用,这类动画的触发对象与运动对象并不是同一个元素。
  • easeOut(先快后缓)最常见的效果,其触发对象与运动对象往往是同一个。主要用在展开、收起、出现、移动等动画中。当不知道用哪个缓动曲线时,用这个一般不会错。
  • 曲度主要表现运动过程的力的大小,曲度越大,启示力或阻力越大。
  • 回弹则表现的是运动的剧烈程度及对象的质地。
  • 运动时间一般都控制在0.3s-0.8s之间,过长的时间会让人感觉拖沓,不自然。

超全面!界面交互动效核心知识的分类与总结

五. 界面交互动效如果以动效的表现属性来分可以分为两种

第一种:为衔接类型动画

主要针对不同界面直接的衔接,为带来更流畅的操作观感所做的设计,弥补两个界面直接的差异所带来的用户感知落差。

第二种:特效类动画

特效的核心目的是为了吸引用户的注意力,提高信息敏感度,在游戏界面设计当中使用更为广泛,能够带来更加绚丽的动态画面。

六.界面交互动效如果以界面的维度来说可以分为以下两类

第一类:界面内的交互动效

在一个界面内的交互动效特别多,例如点击加号出现下拉菜单,出现浮层动画提示,点击舵式导航出现选择类型和遮罩,点击按钮出现评论点赞,当前页面的展开收起,加载等等。如下图所示:

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

超全面!界面交互动效核心知识的分类与总结

第二类:界面间的交互动效

几个界面之间的的交互动效通常是平缓过渡到下一页。常见的有以下几类:

超全面!界面交互动效核心知识的分类与总结

△ 硬切到下一页

超全面!界面交互动效核心知识的分类与总结

△ 下一页从右往左推入(上一页从左往右推出)

超全面!界面交互动效核心知识的分类与总结

△  下一页从下往上弹出

超全面!界面交互动效核心知识的分类与总结

△  上一页的元素过渡到下一页

总结:

  • 动效创意方面的创新要依据用户的认知模型。单纯很炫很酷的动效如果脱离了用户的认知模型,那么这样的交互动效对于整个产品来说是有害的。
  • 做界面交互动效的目的是为了更好地落地。如何更好地高效地表现我们设计的动效。同时使得我们制作的动效可以很好的运用到实现落地中,这是很重要的,不然所有的一切都是海市蜃楼。
文章来源:优设  作者:程远

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


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

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


超长篇干货!如何从交互维度量化用户体验?

高劲

这篇文章,和大家分享一些在产品和交互设计中的一些自己的方法。

怎样才算一个好的交互设计方案?做好这5个维度就够了!

高劲

经过一些项目经验,结合几个方法论,我整理出了一个评估交互方案完整性的方法,也可以作为前期考虑方案的分析方式。下面就来介绍一下,希望能给大家帮助和启发。

快速提升 UI 设计效果的 7 个小技巧

高劲

在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候,我们大多只需要进行有限度的微调,即可达到颇为不错的效果。在之前,我已经撰写了很多实用的 UI & UX 优化小贴士(看完文章在文末获取),这篇文章继续增加 7 条实用的建议,一起来看看吧!

B端设计基础指南:网格系统

高劲

B端设计基础指南:网格系统

从3个方面,帮你掌握时间显示的设计细节

纯纯

背景

“时间”作为人机交互界面中经常出现的元素,本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现,关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的,这是出于怎样的考虑呢?今天我们就来聊一聊,如何在产品设计中把握“时间”显示的诀窍,让其在页面中发挥最大的作用。

“时间”元素的分类

按照“时间”元素在页面中的出现场景和所起到的作用,可以大致归为以下几类:

A. 事件的关键构成要素

时间作为描述整个事件的重要组成部分,缺失后会对原本所要传达的内容产生严重的影响,进而影响用户的使用预期和结果,比方说用户可能不能以一个较低的价格完成商品购买,或错过了产品发布会的时间。

从3个方面,帮你掌握时间显示的设计细节

B. 行为的时间标记

指用户本人作为行为主体或行为的接收对象,在某一动作发生后为其所打上的时间标记,比方说“我”购买商品下单的时间或收到一封邮件的时间。

从3个方面,帮你掌握时间显示的设计细节

C. 内容的附属信息

用户在使用产品进行内容消费时,时间作为该条内容的附属信息,起到补充说明的作用,比方说一条短视频或新闻的发布时间。

从3个方面,帮你掌握时间显示的设计细节

在上面的案例中,我们会发现“时间”在对应场景里所发挥的作用不同,用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时,要根据具体场景和用户诉求判断“时间”元素的重要性和优先级,通常情况下:时间作为事件的关键构成要素>行为的时间标记>内容的附属信息,之后再思考用什么样的设计形式去展示来达到我们的目标。

“时间”的呈现方式和运用技巧

在讨论“时间”元素的设计之前,我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度,类似我们高中物理时学过的“时刻”和”时间间隔“的概念。

拿开会举例子:“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点,而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段;但是,我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。

通过上面的例子我们可以发下,同样是描述一件事情,运用不同的时间点、时间段的方式去表达,意思一样但却传递出不一样的情感,并且两者存在如下的“换算”关系:

1)时间段加上定语会变成时间点(但同样是时间点,“下午 6:00”是绝对时间,而“1.5 小时后”是相对时间,刚好对应到我们设计时两种时间戳类型);

2)两个时间点之间则表示时间段。

所以,我们在平时表达或设计时,要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点?还是想描述其所持续的时间过程?之后我们再针对不同语境去选取合适的文案和呈现方式。

从3个方面,帮你掌握时间显示的设计细节

时间的呈现方式离不开:时间戳类型、时间显示格式、时间颗粒度。其中,时间颗粒度指的是描述时间的最小单位,往往颗粒度越细,给用户传达的确定感越强(如转账时间是 12 日 15:15:20),对用户的激励作用越明显(如距抢购结束仅剩 00 时 01 分 23.6 秒)。

1. 绝对时间戳

绝对时间可理解为事物发生时的确切时间,由具体日期(年、月、日)和时间(时、分、秒)组成。使用绝对时间戳的优势是信息传达精准,显得正式,给人确定感和安全感,同时排布规整,便于形成认知习惯;但缺点是内容显示过长不利于阅读,并且占用空间较大。

从3个方面,帮你掌握时间显示的设计细节

在时间显示格式的选择上,为了避免混淆,推荐使用文字格式或“-”分隔符来分隔日期,而“/”分隔符在不同国家有不同的展示顺序习惯,容易造成误解,尽量少用。

从3个方面,帮你掌握时间显示的设计细节

时间颗粒度的选择依情况而定,一般场景总结如下:

从3个方面,帮你掌握时间显示的设计细节

2. 相对时间戳

相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时,距当前时间点的时间差值,多用于 push 通知、信息流产品,侧重强调内容的时效性;而“倒计时”也算相对时间的一种,侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低,不用通过计算来判断时间过去或还剩下多久;缺点是不够精确、正式,并很难衡量两个时间点的临近性。

从3个方面,帮你掌握时间显示的设计细节

在使用相对时间时,要注意格式友好。时间单位可随着时间的推移自动改变;数字不要过多,尽量取整;并且可设置其与绝对时间转换的临界点。

从3个方面,帮你掌握时间显示的设计细节

总结

在设计界面中的“时间”元素时,要遵循场景贴合、便于阅读理解的总体原则;之后根据场景和目标,再选取合适的“时间”呈现方式(包括时间戳类型、时间显示格式、时间颗粒度)。

当时间作为“A.事件的关键构成要素”时

一般情况下使用绝对时间,并且要看是为了强调某一关键时间节点,还是侧重表达整个持续过程。此外,选用关联场景的文案或者运用倒计时(相对时间)的形式,可一定程度上促进用户更加集中注意力,提升对信息的关注度,并达到特殊的激励作用和转化效果。

当时间作为“B.行为的时间标记”时

该场景通常是为了追求确定感,通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点(段)去查找、回顾相应内容,因此大多数采用绝对时间,时间颗粒度依具体情况而定。

当时间作为“C.内容的附属信息”时

如果所设计的产品供给内容的更新速度快,用户活跃度高,并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性,那么通常会使用相对时间。部分信息流产品(比如新闻资讯类、社区类)会在列表页使用相对时间,在详情页使用绝对时间,时间颗粒度也是依情况而定;并且会随着时间推移,在某一时间节点前把相对时间转换为绝对时间。

文章来源:优设 (VMIC UED)

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


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

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


复杂UI界面的8个核心设计法则

纯纯

复杂应用大多情况下是偏专业和B端的一些UI界面,它们大多出现在桌面端使用环境,并且终端用户类型多样,涉及流程、链条、业务也大多呈现出多变复杂的特征。这篇文章,来自UX设计领域的顶级存在NNGroup,作者为凯特·卡普兰。

到底什么是复杂应用?

我们之前将「复杂应用」界定为特定专业领域当中,需要经过广泛培训之后使用的,有着非结构化目标、非线性工作流程的任何应用程序。这个概念可能听起来有点抽象,不过这么说你可能会 更容易理解:从科学研究到专业人员,诸如金融分析师,它们常用的那些专业软件应用。这类应用通常有着这些特点:

  • 为有专业知识和训练有素的用户提供支持
  • 帮助用户浏览、管理大型数据库,并提供高级的数据分析和处理的功能
  • 通过可变和多样的基础任务功能来解决问题或者达成目标
  • 需要在多个角色、工具、平台之间进行协作或者切换
  • 可以用来减轻高影响力/高价值任务的风险,降低损失

尽管不同的复杂应用之间差异很大,但是他们的共同点是,专业的从业人员对于这类工具有着极强的依赖性。

考虑到设计师和开发者在面对这类工具的时候的挑战,我梳理总结了 8 个复杂应用的设计原则和指南。

1、采用边做边学的用户流程

很多研究表明,对于复杂的应用和工具,用户更加青睐可以立刻上手开始使用而不受它复杂度影响的那类工具。

与大量的教程、文档、帮助和设置说明相比,能够立刻开始的任务和项目,对于用户有着莫大的吸引力。这种现象被称为「活跃用户悖论」。

虽然在专业领域当中,倚靠摸索和试错学习是不恰当也不安全的,但是一定程度的边做边学是必须的,因为不可能在培训和手册当中涵盖所有的使用场景。

所以,在设计的时候应该提供「跳过教程」的直接上手的偏好设置,同时进行相应的安全性设置,避免新手的莽撞操作导致损失。比如可以限制这个阶段的用户执行长流程多任务的操作,让控制面板实时显示操作结果或者预览结果,这样用户无需执行全部操作就可以知道大概的结果。

顶级团队出品:复杂UI界面的8个核心设计法则

在 Salesforce 控制面板当中,就可以实时预览面板编辑的效果。

2、为用户提供有效的方法和建议

绝大多数用户都不是进阶的专家级用户,他们在绝大多数时候会使用基础但是效率没那么高的操作和执行方案。很多用户形成习惯之后,通常不会主动做出改变,而这在日积月累之后导致大量的时间浪费,效率低下。

值得一提的是,这个时候依赖冗长的文档和教程其实很难达成效果,更合理的方式是结合用户所处的上下文环境,通过界面工具提示的方式,适时地告知用户「有更高效方便的方法」。

通常,可以使用悬停提示,或者是弹出式工具提示来实现这一功能。

顶级团队出品:复杂UI界面的8个核心设计法则

ArcMap 是一款地理信息系统类工具,它通常会通过上下文环境下的信息引导,来帮助用户了解技巧。

3、提供灵活而流畅的功能路径

复杂的应用程序,通常会有很多功能是分散的而非线性的,不同的功能组合起来可以实现特定的功能。在这类工具当中,用户日常可能也不是很确切知道最终的目标是什么,而需要通过数据分析来逐步推进,同时,在知道确切目标的情况下,也应该可以遵循不同的路径灵活地达成目标。

设计师这些应用的时候,设计师应该避免使用固定、唯一、 僵化的实现路径,迫使用户必循严格按照某一固定路径来做事情。一方面,允许用户跳过某个步骤,或者回滚到更早的路径,另一方面,允许用户遵循不同的方式和路径来达成目标。

顶级团队出品:复杂UI界面的8个核心设计法则

比如万事达卡的自助服务就可以通过交互式的图表来引导用户完成不同的任务。

4、 帮助用户跟踪行为和思考过程

复杂的任务,通常意味着它需要很多步骤,不同的环节,而在实际的应用场景中,某个分析步骤耗费几个小时甚至几天,都是有可能的。在高度复杂的现实生活中,某个步骤可能会换人接手,可能会因为硬件、 网络等问题而暂停甚至丢失,这也意味着「可追溯性」是很重要的。

所以,在这样的复杂应用当中,应该允许用户在使用过程中,可以便捷清晰地记录、保存、 导出内容和记录,允许用户中断,中断后可以恢复特定的任务。在任务进行过程中可以进行注释、保存相关的说明。

顶级团队出品:复杂UI界面的8个核心设计法则

在决策建模软件TreeAge 当中,用户可以在分析和建模过程中进行开放式的注释,可以后续在底部快速访问这些笔记。

5、可以协调多工具并且在工作空间之间转换

复杂的应用通常还会面临一个状况,就是工具本身的不足,用户需要在多个工作空间上使用工具和内容的时候,它需要具备切换的功能。对于不具备的功能,应用程序应该允许使用第三方的应用来作为补充。

比如当软件不支持某个操作的时候,应该允许用户从线上的其他数据库中获取并导出数据来使用,可以依托外部文档作为支持,允许用户在应用中做注释和评论。

减轻工作负担的一个要点,是尽量使用通用的API、接口和标准,尽量兼容行业标准软件,比如 Excel、Powerpoint ,尽量使用标准格式,等等。

顶级团队出品:复杂UI界面的8个核心设计法则

微软的商业分析软件 PowerBI 就提供了标准化的导出和复制功能,非常方便

6、减少混乱而不影响功能

复杂应用通常旨在保持泛用性。使用场景多样,多种不同的功能,一家汽车生产厂家,可能会和蜜蜂养殖机构采用同样的工具和软件来监测机器故障。但是,这种泛用性的另外一面,就是混乱性。复杂的应用可能会同时兼顾到基础型的小白用户和进阶型的专家用户,而后者用到的功能很小概率会被基础用户用到。

所以,设计者需要在不降低功能性的情况下,基于应用场景、 用户需求来进行简化和优化,在保持功能完整易用的前提之下,降低复杂度和混乱度。

分阶段和层级展现就是一种降低混乱度但是不影响功能性的一种常见策略。当用户进行到特定任务、特定阶段、特等级别之后,再呈现特定功能,是有效的设计方法。

顶级团队出品:复杂UI界面的8个核心设计法则

7、主次信息之间要能平稳过渡

即使降低了混乱度,在复杂应用当中,信息量可能依然是过载的。通常,对于这种情况可以通过区分信息层级的主次来进行快速的区分,不过,从交互上来说,这可能依然不够。

对于诸如控制面板一样的界面,用户可能需要时刻查看面板上的信息,需要了解次级信息但是又不能离开界面,这就体现出主次信息之间的过渡呈现的重要性了。

一般而言,使用类似与悬停显示的方式,能够比较柔和地将次级信息呈现出来,允许用户查看详细的定量数据。下面这个案例当中就是,悬停显示更多次级信息。

顶级团队出品:复杂UI界面的8个核心设计法则

8、在视觉上突出关键信息

复杂应用通常在界面上包含由大量的信息,而这个时候关键性的数据如果不在视觉上做突出显示,会被用户错过。通过视觉区分、提示警报的方式,让用户及时注意到,才有可能规避可能存在的问题。

值得注意的是,让关键信息和元素凸显的方式,并不一定非得是使用鲜艳的色彩和较粗的字体,简单的放大呈现,使用图形化的元素辅助提示,或者是提供足够的留白都可以达到目的,就像下面的案例一样:

顶级团队出品:复杂UI界面的8个核心设计法则

结论

复杂的应用多种多样,支持的服务和功能也千差万别,但是无论如何呈现,此类复杂应用的设计都是非常挑战设计师的设计功底的,需要设计师了解业务,了解用户,并且能够通过设计更好地提供服务。

文章来源:优设(陈子木)   作者:Kate Kaplan

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


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

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


干货|交互设计中的「有效反馈」7大准则!

seo达人


准则 1.  Timely —— 找准时机,即时反馈

在用户操作后尽快 / 立即给予反馈是最有效的。即时反馈有助于帮助用户养成正确的操作习惯,或纠正用户的不当操作。

如果反馈内容需要较长时间的加载,也可以给用户设计一些有特点的 / 情感化的加载状态,缓解用户等待的不耐烦,又可以传达一定的品牌调性

例如:知乎 App 在加载内容的过程中,增加了 IP 形象的动态效果:

图片

 

准则 2.  Specific —— 具体分析,差异对待

在设计交互反馈时,不仅仅要给出正确或错误的判断结果,同时也应该考虑到用户的个性化需求,针对不同类型、场景、地区的用户提供差异性引导和服务。

例如:大众点评、高德地图可以根据用户的位置,在用户开始使用产品时就推送个性化信息:

图片

 

准则 3.  Balanced —— 正负反馈,穿插结合

通常来说,正面的反馈会激发用户的自信等积极情绪,因此我们更习惯使用正面反馈。但是一些不得不使用负面反馈的时候,我们可以在其中穿插一些正面的消息,减少或缓解用户的因负面反馈带来的消极情绪。

这就好像是别人跟你说:“ 坏消息是……,但是,这样做的好处是…… ”,坏消息不可避免,但加上一点转折,就会让他人心里稍微舒服一些。

例如:美团单车在你骑完车之后,需要支付费用时提示你可以购买单车套餐,虽然是在劝用户花钱,但看上去依旧很友善,其中的话术包括:“本次骑行免费”,“当前已是最优价格”:

图片

 

准则 4.  Instructive —— 提示下步,指引行动

有效的反馈会主动多引导一步,对用户的下一步行动给出清晰的、正确的、指导性的意见,有助于驱动用户继续做出有效操作。

很多 App 在截屏之后都会给出下一步分享的路径引导:

图片

 

准则 5.  Emotional —— 情感属性,引起共鸣

有科学依据证实,人脑会更容易被附带情绪的信息所吸引。用户更有可能会注意那些看上去承载了一些情绪的反馈,从而也更有可能改变其行为方式。

例如:虽然只是一个提醒弹窗,QQ 音乐会员到期的续费提醒文案却经过精心的设计,由各类歌名组成的一句话,每天的到期提醒都不同:

图片

 

准则 6.  Traceable —— 可被溯源,可供反馈

一些特殊情况下的、有重大意义的反馈可以被追溯到其根本原因,可以提供给用户进行申诉和询问的渠道,供用户进行反馈。

例如:电商平台和外卖平台都会在用户下单或退单之后,提供商品物流的详细信息,在查看购买的商品的当前状态时,并可以追溯到商品所在的各个历史环节:

图片

再比如,高德打车如果发现用户的行程订单金额与预估金额差距较大时,会给用户发短信提示,并给出客服和投诉渠道:

图片

 

准则 7.  Less is more —— 质量优先,减少数量

在这个信息过载而注意力稀缺的时代,好的反馈在于质量,不在于数量。有时数量越多,反而会对用户造成不必要的负担。用户并不需要给出很多反馈或者记录生活中一切信息的产品,而是需要能够帮他们理出头绪、提出有效解决方案、呈现有用信息的产品。

以上这 7 大准则,来源于我们日常工作中的积累和沉淀,对于设计产品的交互反馈具备较高的指导意义,希望对你有启发。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》干货|交互设计中的「有效反馈」7大准则!

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



案例锦囊|交互设计中「情感化」设计优秀案例(二)

seo达人



1.  本能层 —— 感官刺激

对于本能层,设计师需要在符合功能需求的前提下,尽可能的给用户带来听觉、视觉、触觉的感官刺激,极力去促成用户与产品的 “一见钟情”。

 

案例 1  App Store 的卡片推荐做的很有新意,比如:把吉祥物(品牌形象)是小熊的工具收集到了一起,并取名为:熊帮手。

图片

 

案例 2  微博长按点赞按钮,可以选择不同的点赞状态。图标还是动态的,很有趣。

图片

 

案例 3  淘宝双十一预热,首页的 icon 变成了 “今晚 20 点双 11 抢预售”的字样,烘托氛围又打了广告。

图片

 

案例 4  微信拨打语音的界面,在等待好友接听的过程中,可以看到好友朋友圈的图片,缓解用户等待时的无聊,也为即将进行的语音聊天提供了话题。

图片

 

2. 行为层 —— 细节引导

对于行为层,设计师需对用户的行为进行预判和引导,利用细节处理打动用户,让用户对产品产生信任感和依赖感。

 

案例 1  :当苹果公司发现用户最近在官方渠道购买了新的 iPhone ,老 iPhone 的设置页面就会给出提示,让用户为新的 iPhone 做好数据迁移准备。

图片

 

案例 2  iOS 系统后台在看缩略效果时,会将用户的敏感、私密的信息的 App 页面进行模糊处理,保护用户的隐私安全。

图片

 

案例 3  :在屏幕很暗的情况下,打开微信支付二维码,屏幕会瞬间亮起,便于商家扫码付款。

图片

 

案例 4  货拉拉在展示搬家车辆详细信息时,使用了剖面图,并模拟了不同搬家场景下的家具内容,让用户更好估算车辆空间。

图片

 

3. 反思层 —— 认知共鸣

对于反思层,设计师要调动用户最深层的记忆和感知,将视觉效果、产品功能和用户认知紧密结合,形成用户对于产品和品牌的深刻认知。

 

案例 1  FigJam 是一款来自 Figma 的多人协作在线白板工具,可以进行头脑风暴、绘制流程、多人协同标记等。里面也有很多人性化的小功能,比如:当两个人同时长按 “H” 键时,就会出现 highfive(击掌的动效),非常适合当设计师达成共识时使用:

图片

 

案例 2  小睡眠 App 发现学生时代的我们经常会在枯燥的课堂上睡觉,所以准备了各种课堂讲解、校长发言、领导开会的声音作为催眠、助眠的音乐,让人会心一笑。

图片

 

案例 3  饿了么在异常天气下通过在界面上增加天气的元素,让用户看到外卖小哥的辛苦,使用视觉和内容共情,唤起用户的同理心,降低用户因外卖迟到而做的投诉和差评。

图片

 

案例 4  QQ音乐上线了宠物功能,一共有五个品种的宠物让用户可以选择领取,多听歌能喂饱宠物,然后送它出去参加演唱会或者和好友进行互动。

图片

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》案例锦囊|交互设计中「情感化」设计优秀案例(二)

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

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

存档