首页

如何给界面做减法,实现B端设计提效效果?|北京蓝蓝UI设计公司

分享达人

首先看我们这次改版的对象:

如何给界面做减法,实现B端设计提效效果?

光凭第一印象,整体效果是还不错的,落实到每个局部的话,布局也是合理的,可以看到是有设计的细节在里面.jpg。

但是,再多看几眼,就会发现整体的效果似乎有点不和谐,但又找不出来问题具体在哪,不知道怎么改下去。问题的根源就是 —— 过度设计。

我们强调过很多次,表盘页的设计是作品集项目中最重要的页面,因为观看者对整体视觉和设计水准的印象是通过它建立起来的,不管你分析怎么写,我们首先关注的肯定也是设计的效果。

但重要不代表需要过度倾注和堆叠视觉元素,过度的设计会让界面看起来有 “飞机” 敢,不仅不真实的印象产生了,还会显得业余不够自信。同时任何项目中表盘页过度设计都会对整个项目造成负担,后续的页面要怎么设计才能不和它产生隔阂,保持一致性。

下面,我们根据原页面进行分析,来找出问题并优化:

问题 1:导航栏的图标

导航的顶部 LOGO 描边没有太大必要,以及图标的设计在这个尺寸下非常的局促,因为细节较多,不仅复杂性提升了,也缺乏图形辨识。

所以改动中,将多余的背景去掉,再简化图标本身的样式。


如何给界面做减法,实现B端设计提效效果?

问题 2:顶栏的设计

顶部栏本身设计单看是没有问题的,但是作为全局栏目和导航栏颜色缺乏区分,而且用了投影来强化层次,就让这个模块的权重被过度放大。

所以我们去掉了背景色,并适当增高栏目的高度,让局部更舒展。

如何给界面做减法,实现B端设计提效效果?

问题 3:统计数字的问题

统计数字在作品展示里用特殊字体很常见,因为要用更美观的字体来呈现重要的信息。但任何页面中的信息权重都要保持阶梯性,不能让加粗、深色、特殊字体几个要素作用在过多的信息上,这就让画面显得非常的“吵”。

所以要对字重和色彩做控制,创造对比来降低视觉的压力。

如何给界面做减法,实现B端设计提效效果?

问题 4:图表的应用

原图中的图表应用有一定的问题,第一个柱状的堆叠类型并不是太符合实际数据应用,下方的环形图中起始位置显然不对,并且色彩比较混乱。

所以是答案对它们做出优化,并调整了一些小细节。

如何给界面做减法,实现B端设计提效效果?

问题 5:配图类型选择

在引导卡片中,用的扁平插画素材一方面不高级,另一方面内容太碎,再加上用奇怪的字体和倾斜,使得这个卡片看起来非常别扭。

改动中替换新的图片素材(临时找的,理解意思就行),同时使用一般黑体的标题,以及增加背景色,来形成新的卡片样式。

如何给界面做减法,实现B端设计提效效果?

问题 6:装饰图标应用

在快速入口和日程模块中,都有使用装饰图标,显然大家也能理解他们对于目前的语境来讲还是细节过多了,所以需要做一些调整,让它们简化。

如何给界面做减法,实现B端设计提效效果?

最后,再加上一些细节的小改动,最终的样式就完成了。


如何给界面做减法,实现B端设计提效效果?

表盘的设计一定要在最后做检查,一些设计感强的元素是否有必要这么做,尤其是类似图标元素,做得很花哨是否对信息的识别能带来帮助?如果不行,那就可以果断的放弃。

表盘页的设计感来自 —— 全局元素和色彩的控制,而不是单一某个局部内容的加强。

文章来源:优设
作者:酸梅干超人

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

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

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

用户体验设计流程

雪涛

用户体验设计流程


虽说用户体验是主观的,但对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由研究实验来认识,并通过良好设计去改善的。用户体验设计(User Experience Design,通常简称UX Design)就是以提升用户体验为目标的一套设计流程。为什么用户体验设计如此重要呢?因为随着科技进步,当功能的实现不再成为挑战时,产品的设计和体验就成为了赢得市场竞争的关键因素。



由于系统软件糟糕的UI设计(菜单排布问题)所导致的误操作,美国居民受到导弹袭击的惊吓



· 美国Forester的一项研究发现,针对UX投入的每1美元,能够带来2~100美元的收益。


· Amazon把按钮文字从“注册(register)”改成“继续(continue)”之后,销售增长了3亿元。


· McAfee重新设计UI之后,客服电话减少了90%。· Airbnb的Mike Gebbia认为,公司从接近失败到获得100亿美元市值,最大因素要归功于UX


UX究竟在设计些什么 

广义的用户体验设计,是包含了内容功能设计,信息架构设计,用户界面设计,交互设计,视觉设计,语言设计,动效设计,音效设计,在一定程度上涵盖了产品物理外观设计(工业设计),平面/包装设计,空间设计,服务流程设计等。它意味着一个高度交叉综合的领域,涉及到人与产品系统或服务发生关系并产生体验的所有触点。一般或狭义的UX Design,则主要作为与UI Design区分,多用于互联网软件(或消费电子等)行业基于屏幕的设计,包含信息框架设计,用户交互设计,可用性研究等。这里的UI Design偏重于视觉上的设计。而在现实中我们也经常把UX等同于“交互”。





用户体验设计的核心和本质,就是研究目标用户在特定场景下的思维方式和行为模式,通过设计提供产品或服务的完整流程,去影响用户的主观体验。可见用户研究在整个UX流程当中的重要性。而认知心理学(Cognitive Psychology)则是用户体验设计的理论基础和科学依据。它是一门研究认知及行为背后之心智处理(包括思维、 决定、推理和一些动机和情感的程度)的心理科学。这门科学包括了广泛的研究领域,旨在研究记忆、注意、感知、知识表征、推理、创造力,及问题解决的运作。相关的还有人体工学(Ergonomics)与人因工程学(Human Factors Engineering),是研究人和机器、环境的相互作用及其合理结合,使设计的机器和环境系统适合人的生理及心理等特点,达到提高效率、安全、健康和舒适目的的一门科学。可用性(Usability)的概念最早出现于1979年,远比唐·诺曼在1993年提出的“用户体验”概念要早。可用性的ISO定义是“用户在特定环境下完成指定目标的效果、效率和满意度”(ISO 9241-11),而用户体验指“用户与产品、服务、设备或环境交互时各方面的体验和感受”。可用性的范畴比用户体验窄,它聚焦于任务完成。而用户体验是外观呈现、功能组合、系统性能和交互行为等因素的综合结果。




上图将用户体验细分为工具性(Utility)、可用性(Usability)、合意性(Desirability)和品牌体验(Brand Experience),最内部的圆代表最基础的用户体验。


用户体验 / 产品设计的流程与方法


以用户为中心的设计(User-Centered Design,简称UCD)概括了用户体验设计的典型流程和方法学。以用户为中心的设计思想非常简单:在设计开发产品的每一个步骤中,都要把用户列入考虑范围。从前期的用户研究需求挖掘,到后期的用户测试设计验证,都要围绕目标用户群来进行。



在UCD设计流程的每个阶段,都有多种不同的方法来帮助我们达到目的。

用研分析:


· 单独访谈(Individual Interviews):一对一的用户讨论,让你了解某个用户是如何工作,使你知道用户的感受,想要什么和他的经历。


· 焦点小组(Focus Groups):组织一组的用户进行讨论,让你更了解用户的理解、想法、态度和想要什么。


· 关键利益人访谈(Stakeholders Interview)


· 情境访谈(Contextual Inquiry or Field Study):走进用户的现实环境,让你了解你的用户的工作方式,生活环境等等情况。


· 日记研究(Diary Study):日记研究可以让用户记录自己的进程,研究者以非打扰的视角探查用户的体验。


· 问卷调研(Questionnaire Study):利用网上或纸张的问题list对用户进行发放填写,从而收集用户对产品的需求建议。


· 任务分析(Task Analysis):通过任务分析了解用户使用产品时的目标和操作方式,习惯(GOMS模型)。


· 用例分析(Use Case Analysis)


· 卡片分类(Card Sorting)、树形图测试(Tree Testing):观察用户是如何理解内容和组织信息,用来帮助你的产品更合理地组织信息。· 竞品分析(Competitive Analysis)、标杆分析法(Benchmarking)· 桌面研究(Desktop Research)、市场研究(Market Research)· 用户角色模型(Personas):构建一个虚构的人来代表特定目标用户群组,设计团队围绕这个虚拟人物设计开发产品。


· 用户体验旅程图(User/Customer Journey Mapping or Experience Mapping):从用户角度出发,以叙述故事的方式描述用户使用产品或接受服务的体验情况,以可视化图形的方式展示,从中发现用户在整个使用过程中的痛点和满意点,最后提炼出产品或服务中的优化点、设计的机会点。


· 态度研究(Attitudinal Research)和行为研究(Behavioural Research)


· 定性研究(Qualitative Research)和定量研究(Quantitative Research)



设计阶段:


· 脑力风暴(Brainstorming Ideation)


· 概念草图(Concept Sketching)


· 思维导图(Mind Mapping)· 交互流程(User Interaction Flow)


· 信息架构(Information Architecture):对功能内容进行高度概括的统筹规划、设计安排。


· 情景与故事版设计(Scenario & Storyboard Design):情景是指特定用户如何使用产品完成特定目标的简短故事。故事板是连续的一系列草图,用视觉的方式表现用户如何使用产品,形式上类似漫画分镜。


· 线框图(Wireframing)


· 低保真原型与高保真原型(Lo-fi & Hi-fi Prototyping)


· 纸质原型(Paper Prototype)


· 视频原型(Video Prototype):通过视频来演示用户如何与产品系统进行交互。


· 绿野仙踪原型(Wizard of oz Prototype):使用角色扮演来模拟用户如何与产品系统进行交互。


· 可交互原型(Interactive Prototype)


· 视觉设计(Visual Design)


· 设计模式(Design Patterns)、设计语言(Design Language)、设计规范(Design Guidelines)与设计体系(Design System)


· 标注文档(Design Spec)


· 动效设计(Animation Design)


· 参与式设计(Participatory Design):将终端使用者或利益相关者带入设计流程中。


· 共情/移情/同理心设计(Empathic Design):将设计师带入使用者情境中进行观察设计。


· 平行设计(Parallel Design):对同一个产品进行分开的设计,从而比较选择一个最佳方案。



评估验证:


· 启发式评估(Heuristic Evaluation):由一组行内专家依据尼尔森十大原则对产品进行可用性检查。


· 专家评审(Expert Inspection)


· 可用性测试(Usability Testing):邀请用户来试用你的产品,有任务性的完成测试,从而达到评估的目的。分为Moderated和Unmoderated,In-person或Remote。


· 组内测试(Within-Subject Testing)与组间测试(Between-Subject Testing)


· 游击式调研(Guerrilla Research):便宜、快速地得到大致的用户反馈。


· 问卷调查(Surveys):利用网上或纸张的问题list对用户进行发放填写,从而收集用户对产品的反馈意见。


· CSAT(Customer Satisfaction Score)与NPS(Net Promoter Score)


· 眼动追踪(Eye Tracking)和热力图(Heat Map)


· 点击流分析(Clickstream Analysis)


· 产品漏斗(Product Funnel)和使用情况分析(Usage Analytics)


· 统计学分析(Statistical Analysis)


· A/B测试:在同一时间维度,分别让相似的目标人群随机的访问产品的不同版本,收集各群组的用户体验数据和业务数据,最后分析、评估出最好版本,正式采用。




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


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

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

高级设计师才会的设计思维,31个细节帮你深入了解

分享达人

1. 并不存在单一的设计过程

设计过程被描述为多个阶段,每个阶段都包含不同的活动来完成该阶段,它没有统一的标准流程,每个公司和设计师都有自己的流程版本。

尽管存在多个流程,但一般流程和阶段类似于以下内容:

了解问题:初步了解问题。观察、采访和倾听用户。

定义问题:解释和定义要解决的问题。

构思:通过头脑风暴产生尽可能多的想法。

原型设计:构建原型并与其他人分享( 再次缩小解决方案空间,为实验阶段 )。

测试:测试可能的解决方案、实施、改进或重新设计。

2. 设计思维是传统解法和创造性设计过程的结合

传统的问题解决采取有条不紊而又科学的形式。该过程从一个问题开始,定义要采取的步骤以及达到解决方案的工具或方法。

设计思维是一种创造性的策略,可以产生创造性的未来结果和/或创造性的问题解决方式,它应该被认为是一种以解决方案为中心的思维策略。

它通常被描述为一种创造性、主观和感性的对许多大型组织的分析逻辑( 布朗,2008 年 ),或作为分析和创造性推理模式的组合( 邓恩 & 马丁,2006 年;利特卡,2015 年 )。

3. 设计思维是问题解法的进阶

设计思维来源于常规问题解决方法,常规问题解法是设计思维的基础。

从解决问题到设计思维,Liedtka (2013)

结果发现,设计思维实际上也是一个解决问题的过程,而不仅仅是一个创新过程( 利特卡,2013)

一个例子是,丰田采用设计思维从头开始分析其西海岸的一个客户联络中心,在重新设计过程中,组建了一个由一线呼叫代表、软件工程师、业务主管和变革代理组成的跨职能团队,这一举动最终改变了客户和员工的服务中心体验。

4. 从起床到入睡,你都在解决问题

我们每天都会遇到问题,但是当我们解决同样的问题时,它们就成了例行公事( 似乎已经忘记它们是问题了 ),我们甚至都没有意识到正在解决这些问题。例如,我的办公室在 30 分钟路程之外,该怎么到达那里?开车、坐火车或巴士到目的地;除非车子轮胎被刺破,否则你就需要弄清楚如何到达办公室。

5. “设计思维”术语的产生

1990 年代,IDEO 的 David Kelley 和 Tim Brown 与 Roger Martin 共同创造了特定术语:“设计思维”,并将多年来酝酿的方法和想法封装成一个统一的概念。

6. 工程设计思维现在被称为设计思维

设计思维是以人为中心、开放式、基于问题的方法论。这种方法最初是为了改变工程教育中的教学方式,而工程师处理和解决问题的方式有其设计思维的基础。

7. 设计思维的历史早已出现(2000 年)

设计思维一词可以追溯到 1987 年 Peter Rowe 的著作:“设计思维。” 他描述工程师和建筑师处理问题的方法有很大不同。

90 年代初,认知科学家 Don Norman 加入 Apple 团队,担任他们的用户体验架构师,这使他成为第一个在职位中包含 UX 的人。他提出了“用户体验设计”这个术语,因为他想“涵盖人们对系统体验的所有方面,包括工业设计、图形、界面、物理交互和手册。” 从那时起,这些领域中的每一个都将用户体验,扩展到了自己的专业领域。

8. “棘手的”设计思维

设计思维在解决“棘手问题”时特别有用。

棘手问题的特征

“棘手问题”一词是由设计理论家 Horst Rittel 在 1972 年创造的,用来描述本质上非常模糊 \ 特别棘手的问题。棘手问题,有很多未知因素,没有确定的解决方案。问题或解决方案可能与另一个棘手的问题有关,因此这是一个需要设计思维的持续过程。贫困、饥饿和气候变化是一些现代的棘手问题。

9. 设计思维不仅限于数字化设计的应用

设计主题的范围是普遍的,因为 设计思维可以应用于人类经验的任何领域。

它可以用于:

符号和视觉传达:这包括平面设计的传统工作,如排版和广告、书籍和杂志制作、科学插图、摄影、电影、电视和计算机显示。

材料:这包括对日常用品的形式和视觉外观的传统关注 —— 服装、家用物品、工具、仪器、机械和车辆。

人类活动和组织性服务:包括对物流的传统管理关注,结合物质资源、工具和人类低效的序列和时间表,以达到特定的目标。

复杂的系统或环境:生活、工作、娱乐和学习。这包括系统工程、建筑和城市规划的传统关注点,或复杂整体部分的功能分析及其随后在层次结构中的集成。

10. 设计思维不仅限于设计师的实践

设计思维起源于设计师的培训和专业实践,但这些原则可以被每个人实践并扩展到每个活动领域。(布朗,2013 年)

在企业中,设计过程可以为企业环境中的问题解决带来创新思维。它还可以用于医疗保健,通过向护士、医生和管理人员教授设计思维技术,我们可以激励相关从业者贡献新的想法。

11. 了解问题是第一

不管是什么设计,理解和研究问题是必不可少的,因为我们能够从其出发,从而进行以用户为中心的设计。

设计思维的最早阶段是搞懂你能带来的情感价值。设计思维方法迫使你停留在提问与质疑阶段,而不是准确定义出问题后进入下一阶段。我们都有过快进入解决方案模式的倾向,所以设计思维方法迫使你真实地存在于这个不清楚、有时还非常混乱的时刻,从而使你对要解决的问题产生更好的理解。(利特克,2013)

12. 设计思维需要两种不同的思维

传统的问题解决涉及提出一个解决方案,但设计思维首先使我们发散,试图为问题生成各种可能的替代解决方案。然后让我们进行收敛性思维,缩小多种可能性,找到单一的最佳解决方案。

13. 设计思维是可以传授和学习的,它不是一种人格特质

根据利特卡和奥美 (2011) 的说法,设计思维的全部意义在于学习一种新的、系统的解决问题的方法。正如我们思考创造力一样,即使是设计思维也可以通过实践来教授和改进。

14. 设计过程不是线性的

设计过程从来都不是线性的,它由多次失败和迭代组成(布朗,2018)。

首先,设计师试图将问题与过去的类似案例联系起来。如果这种方法不能提供任何解决方案,下一步就是使用知识和创造力作为一种实验思维形式来产生新的想法。使用决策矩阵对这些想法进行评估,从而会产生被进一步分析和测试的解决方案。如果成功,它将被实施。如果不成功,则需要重新表述问题,并重复该过程。这是一个迭代过程,即循环方法。

这一持续不断的重新再设计过程,源于和客户亲密接触的洞察。

15. 调研是设计思维非常重要的工具

学习设计思维不仅仅意味着学习一套新的工具。它还意味着:学习收集和分析大量数据;学习挖掘对象可能的形态而不是自主认为他是什么;学习管理不确定感,以及与许多新的伙伴合作( 利特卡和奥美,2011)。你可以进行的研究类型分为三类:生成性研究、评估性研究和验证性研究。

16. “要么很快失败,要么经常失败”

一种常见的表述 —— 实际上是设计思维的另一种视角 —— 即设计师应该预料到会“很快失败或经常失败”(布朗,2009)。

当过程早期发生故障时,例如被拒绝的原型,实质上它可以为有效解决方案提供关键见解。这种观点与传统的先形成理论,再检验正误的方式相矛盾。

17. 公司正在将设计思维作为解决问题的核心方法

Airbnb、Braun 和百事可乐等多元化公司都在 采用设计思维并将其作为核心战略。例如,IBM 为全球旗下的 44 个设计工作室聘请了 1600 名设计师,并且正在培训数以万计的设计师员工建立深度创新能力 ( O'Keefe, 2017 )

18. 以人为本的思维

设计思维为我们解决问题添加了以人为本的元素。当我们试图通过牢记人们的想法来解决问题,并使用基于直接观察乃至访谈的研究时,我们便会捕捉到与消费者需求一致的意外见解和创新。

19. 可观的商业价值

它有助于将成功的产品更快地推向市场,最终节省企业资金。
IBM 的健康和人类服务组织的设计思维实践,通过有效使用设计和设计思维帮助企业将缺陷数量减少了 50% 以上。这种更高效的工作流程导致计算出的 ROI 超过 300%。

20. 对复杂问题的作用性

由于复杂的问题从来不能被所有人完全理解,因此在尝试设计解决方案时,处理歧义和多个并发的思路方向的能力是至关重要的素质。

设计思维通过综合和归纳思维,帮助实现质的飞跃。它允许通过解构来测试约束,并允许通过多样性思维和批评思维,来拥抱和探索歧义。

消费者通常不知道他们有什么问题需要解决,或者他们无法用语言表达出来。只有经过仔细观察,设计者才能根据真实消费者行为中看到的东西来识别问题,而不是简单地根据对消费者的想法来确定问题。这有助于定义模棱两可的问题,并找到解决方案。

21. 别名:跳脱框架的思维

该方法鼓励“跳出框架思考”(“疯狂的想法”);它蔑视显而易见的事物并采用更具实验性的方法。
在早期的流程阶段鼓励大胆的想法,以产生创造性的解决方案。使用它是为了让设计师可以尝试开发新的不受约束的思维方式,或对常见问题的创新解觉方法。

22. 设计思想家的特征

根据大多数设计学院的说法,具备特定特质的人能够更好地发挥设计思维的作用。

同理心:从多个角度想象世界 —— 同事、甲方客户、实际使用者和消费者的角度。要成为更好的同理心,必须倾听和观察他人的行为,注意并获得洞察力。

综合思维:重要的是不仅要有分析能力,而且要能够提出新颖的解决方案,还要凭直觉。

乐观:除非你相信有解决方案,否则在遇到挑战且解决方案遇到瓶颈时,你可能会放弃。

实验主义:重大创新并非来自渐进式调整。设计思想家以创造性的方式提出问题并探索限制因素,并朝着全新的方向发展。

协作:产品、服务和体验日益复杂,因此必须拥有一支具有不同背景的团队,以帮助从多个角度看待问题。

23. 有助于对抗某些偏见

当我们想到一个问题的多种解决方案时,对我们解决问题会非常有帮助,因此“功能固定性”阻止了我们以新颖的方式使用旧工具解决新问题。想要摆脱功能固定,首先是要让人们可以使用“改造后的衣架进入上锁的汽车”。这也是盗贼第一次可以用信用卡撬开简单的弹簧门锁。

24. 实用

为了帮助设计师利用文科和技术理论,整合多个领域的知识以找到创新的解决方案,我们采用设计思维来获得洞察力。该方法侧重于可视化和操作,因而帮助我们更容易地了解实际解法,而不仅仅是理论模型。

25. 执行

第一批美国公司在 2000 年代初期开始实施设计思维,这一概念引起了德国投资者 Hasso Plattner 的兴趣,他于 2006 年资助创建了两所设计学校(d.schools),其中一所位于波茨坦大学(德国),另一所位于美国斯坦福大学。由于两所学校都成功地为大型组织提供了高管设计思维培训,因此该研究重点关注这些国家,以寻找早期实施者。

26. 团队思考

设计思维通常涉及希望参与整个设计和开发过程的庞大利益相关者团队。

观点、才能和经验的多样性被认为是注入新思维的部分重要来源。多样性确保通过融合不同的观点、技能和知识来产生创意(卡振思,2018 年;萨梅和德拉赫-扎哈维,2013 年)。设计思维的协作方法和工具可帮助团队以积极的方式利用他们的差异。

决策是平等的,因为每个成员的意见都被征求和使用(卡尔格伦等,2016)。

27. 不需要花哨的技术原型

当 IDEO 去 Apple 展示他们的鼠标时,它不是什么花哨的设备,而是一个用胶带粘起来的原型。

低保真原型制作起来既快速又便宜( 想想几分钟和几分钱 ),但可以从用户和同事那里得到有用的反馈,这符合快速验证、廉价试错的原则。为每个想法投入尽可能少的资源意味着前期投入的时间和金钱更少。此外,将多个原型带到现场进行测试为用户提供了比较的基础参考,同时也有助于揭示某些需求。

28. 过程强调心态和行动

为了创新,设计思维意识到认知和行动对创新过程很重要。认知包括接受度、乐观和创造性的信心( 凯莉 & 凯莉,2013;郑,2018),而行动包括快速原型设计、旅程地图和假设浮现( 假设浮现:assumption surfacing,这是一种评估技术,涉及写出潜在的假设和反假设。)( 卡尔格伦等,2016;利特卡,2015)

29. 在组织中实施设计思维的挑战

如果领导层不欢迎风险、模棱两可和风格的改变,实施起来就会变得更加困难。它会被管理者“质疑”其具体指标

沃尔特斯 ( 2011 ) 声称,由于设计思维的模糊性,它与组织文化相冲突。

据受访者称,在日常业务中使用设计思维之所以不会是最优选项, 因为它是资源密集型的,增加了工作量。( 丽莎等,2016)

在医疗保健等规避风险的行业和公司中,“经常和早点失败”的方法被认为是非常困难的。

30. 设计思维的问题

许多设计师反对设计思维这一观点,设计思维不仅关乎一个过程,而且关乎改变思维过程并提高人们可能提出的解决方案的创造力。

“设计思维”的推广已被大型全球公司用来增加业务。不过,在更广泛的设计世界中,我甚至会说“设计思维”的过度宣传导致了所提供设计质量的下降。—— Yasushi Kusume

弗吉尼亚理工大学科学、技术和社会助理教授 Lee Vinsel 在《设计思维运动是荒谬的》中写道,“归根结底,设计思维与设计无关。这与文科无关。这与任何有意义的创新无关。如果这意味着重大的社会变革,那肯定不是关于“社会创新”。这是关于商业化的。”

31. 为什么需要共情

观察人们的行为以及他们如何与环境互动,可以为你提供有关人们想法和感受的线索。

你可能认为你知道问题所在,但只有通过观察才能了解消费者真正需要什么。

宜家派设计师到人们家中,观测他们的互动行为来了解他们的需求。这将使设计者能够推断这些经历的无形含义,以发现洞察。这些洞察提供创新解决方案的构思方向。而事实上,最好的解决方案来自于对人类行为的最佳洞察。

Good Kitchen 是一家为老年人和体弱者提供膳食的社会服务机构。起初的问题似乎是设计不当的膳食菜单。然后设计思维揭示了无数问题,所有问题都源于服务本身的性质。因此,经由对服务进行了彻底改革的之后,最终提高了客户和员工的满意度(利特卡,2014)


作者:用尽晴天
链接:https://www.zcool.com.cn/article/ZMTUyODUzNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

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

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

这篇导流条设计方法,让我打开了新思路

分享达人

// 写在前面


端到端导流是指在产品矩阵体系内引导优质产品的用户使用另外一款产品,带来使用量的提升,从而实现用户规模提升的一种增长手段。随业务快速增长,有驾从百度汽车频道衍伸出了有驾小程序、M站、PC站以及APP等多纬度的产品矩阵,依托各端流量实现矩阵产品间的导流,逐步积累用户规模,是有驾目前获客渠道中占比最高的方式。本文将以有驾导流体验升级的项目为例,分享导流增长探索的设计思路与实践经验。



// 为什么要做导流


导流的目的

对于业务本身而言,随着移动互联网流量红利期的结束,获取新用户的成本越来越高,不管是新产品还是成熟型产品,都需要通过导流的手段来持续扩充新用户。其次,对于有驾产品生态而言,需要各端产品间的相互联动,协同发挥优势,实现流量价值最大化。


导流的优势

  • 成本低,相较于投放、活动等渠道流量获取方式,矩阵导流成本低;

  • 高意向,用户购车意向明确更容易实现商业转化;

  • 可共享,用户数据及行为关联互通。


// 如何做好导流设计


1.问题分析

通过梳理核心场景的4种导流条,发现各个场景导流形式各异,用户缺乏统一认知,导流引导语单一内容吸引力弱。在用户在浏览页面时,点击功能入口或想要继续查看更多内容,需要下载APP才能继续阻碍用户浏览

  • 缺乏统一认知:视觉表达形式不成体系,用户感知不够;

  • 内容吸引力弱:内容单一缺乏吸引力,用户没有点击欲望;

  • 阻碍用户浏览:打断用户正常使用功能,影响用户体验。



从导流链路的用户行为来看,整个流程下载路径过长,发现用户流失较大的转化点:

  • 从小程序落地页到下载页:在进入小程序浏览页面时,用户没有注意到导流条就滑走了;

  • 点击导流条进入下载页:点击导流条会先调起导流弹窗,点击确认后再进入到下载页,用户未选择下载就退出了。



2.明确设计方向

针对导流现状缺乏统一认知,内容吸引力弱、阻碍用户浏览、下载路径过长的问题,我们搭建了一个完整的导流链路图,根据用户增长模型,把用户生命周期各节点的用户行为与产品触点一一罗列出来,找到增长路径的设计机会点。



通过以上的问题分析,如何建立用户和产品的链接,保障友好的体验,是本次导流升级要解决的问题。根据用户关键行为,我们可以将整个导流链路拆分为3个阶段来挖掘主要机会点:

  • 下载前:兴趣激发导流吸引,建立用户稳定认知;

  • 下载中:强化用户转化动机,刺激用户完成下载;

  • 下载后:保障还原体验畅通,提升首次使用体验。



下面将分别介绍导流下载前阶段的设计落地实践,以及下载中、下载后阶段的延伸设计思考。


// 下载前


1.强化触点吸引

是否能成功引起用户注意,是转化开始的第一步,统一的视觉风格和满足用户诉求的内容,有利于增强导流条的吸引力。


1)收敛导流条类型

针对【阻碍用户浏览】打断用户正常使用功能、用户没有跳转预期的体验问题,下线了阻断式和截断式两种体验不友好的导流类型,将原来4种导流类型收敛为2种,仅保留通用导流条和功能延展导流条,基于这2种导流形态进行深入的设计探索。



2)建立通用视觉标准

针对【缺乏统一认知】视觉表达形式不成体系、用户感知不够的视觉问题,建立了通用导流条标准化规范。统一视觉形态,优化为页面内通栏嵌入式,同时融入品牌色强化用户感知,根据页面布局制定了不同的展示规则。



上线后,内嵌导流条在展现受限的情况下,导流转化数据与改版前基本持平,为了进一步提升导流的点击效果,开始探索场景化定制提转的设计方向。


3)定制场景化内容

针对【内容吸引力弱】内容单一缺乏吸引力、用户没有点击欲望的内容问题,在通用标准化形态的基础上,根据不同场景用户诉求点,丰富导流内容。分别从内容定制、按钮文案优化、以及氛围强化3个方向验证对转化的影响。

  • 内容定制:丰富导流利益点、场景化内容更能激发用户兴趣,促进转化达成;

  • 按钮文案:转化按钮文案导向性明确、内容与导流利益点匹配,可以助力按钮转化提升;

  • 氛围强化:导流样式上适度弱化氛围、样式更倾向于原生功能,有助于提升导流条点击。



2.拓展场景扩量

复利通用标准导流条的成功经验,应用到功能延展类导流条中继续验证有效性,从产品价值点出发,挖掘高流量场景的机会点从而带来转化增量。


1)价值传递

根据小程序和APP两端各自的不同点,分别从功能差异及体验差异两个方向进行优化。

  • APP特有功能:APP完善的功能体验可以更好满足用户诉求,例如参配浏览场景下,引导用户体验搜索及横屏查看的高频功能,对于导流转化有正向帮助;

  • 各端体验差异:小程序和APP两端体验存在差异,例如图片浏览场景下,APP清晰流畅的浏览体验及放大全屏查看图片的交互体验,能够刺激用户转化。



2)价值延续

当用户完成核心内容消费后,是否可以引导用户去APP继续浏览更多相关内容,进而引导用户下载呢?

  • 服务透传:平台服务内容传递,例如在内容落地页文末增加品牌广告导流条,帮助用户建立品牌认知;

  • 相关推荐:引导相关内容消费,例如在文章或视频页增加相关推荐导流条,引导用户浏览更多相似内容。




// 下载中


当用户通过导流条进入到下载流程时,还有哪些手段可以刺激用户激活减少流失呢?

  • 强化下载动机:下载页前置APP落地页内容,例如将通用下载页优化为场景化下载页,给用户超前产品体验吸引转化;

  • 减少用户流失:缩短链路简化流程,例如可在下载中间页完成应用下载,同时退出下载页时增加挽留。




// 下载后


当用户在应用商店下载完成后,我们还能做哪些提升首次启动APP的体验呢?

  • 还原链路畅通:提升场景还原成功率,减少频繁提示信息干扰;

  • 建立用户心智:引导新用户探索功能,根据用户兴趣推荐适合的内容。


以上内容是下载中和下载后阶段导流优化方向的一些延伸设计思考,为大家提供可以继续探索的方向。



// 写在最后


总结一下本篇文章关于导流的体验设计要点:

  • 全链路洞察,对导流链路进行拆解,通过盘点导流链路的用户行为,明确每个节点的设计方向;

  • 降低广告干扰性,减少用户浏览过程中的阻断感,适度弱化广告氛围;

  • 用户的视角引导,让用户专注于产品本身传递的价值,引领用户完成对产品的探索从而完成下载激活。


希望以上的设计思考,可以带给大家一些启发。


作者:百度MEUX
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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


为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好

分享达人

画面平衡是一个很基本的设计理念,但很多朋友在平时的作品中容易忽视这个点。彩云在星球中帮不少朋友看过作品集,发现最多的问题之一就是画面平衡没做好,我觉得只要把这个基本问题解决了,作品就能提升一个档次。

用户本能地会对不平衡的设计感到厌烦,如何在画面中创造一个有吸引力的平衡?是本篇文章要分享的内容。

为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好

平衡是一个作品中最重要的元素之一。平衡中的对称关系能够创造平衡与和谐,这种平衡状态直观上能够让用户感到舒适。

人体是垂直对称的,我们的视觉接收也与之相对应。我们喜欢物体在垂直轴上保持平衡,直觉上总是倾向于平衡一种力量与另一种力量。

为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好

在设计环境中,平衡是基于元素的视觉重量,而视觉重量是用户对图像的注意力范围。如果画面是平衡的,用户会下意识地感到舒适。画面平衡被认为是其元素在视觉上的比例安排。

如何让一个页面看起来平衡?

一、对称(静态)平衡

最常见的平衡例子就是使用对称。

在潜意识层面上,对称的视觉能让人愉悦,能让画面看起来和谐有条理。对称的平衡是通过在水平或垂直的中轴两侧均匀放置元素来创造的。也就是说,画面中间假想线的两边实际上是彼此的镜像。有些人认为对称的平衡是无聊和可预测的,但它经受住了时间的考验,到现在仍然是在页面上创造舒适和稳健感觉的最好方法之一。

为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好二、不对称(动态)平衡

两侧重量不相同的元素构成具有不对称平衡。

动态平衡通常会比静态平衡更有设计感,让画面不至于呆板在缺乏平衡的情况下,我们的目光会条件反射性地开始寻找平衡点,这是一个很好的机会,可以将注意力吸引到页面上可能还没被注意到的部分。页面重点就应该放在这里——抓住用户的注意力,就像产品的生命线一样。

为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好

比如一般这样去“配重”的元素会是一个按钮或者标题。

重要信息(或者是行动按钮)就是我们需要去配重的价值元素。

不对称的现象越严重,用户就越想找出其中的原因(检查配重)。人们本能地比平时更仔细地研究这样的画面。然而,这里需要注意分寸,过于古怪的构图并不总是能被很好的感知。

三、径向平衡

为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好平衡中的另一种类型,特点是视觉元素从一个共同的中心点放射出来。径向平衡在设计中不常用。它的优点是,注意力很容易找到并保持一个焦点——恰好就在它的中心,这通常是构图中最引人注目的部分。

四、马赛克平衡

这是一种平衡中的混乱,就像 Jackson Pollock的画作一样。这样的组成没有突出的焦点,所有的元素都有同样的视觉重量。没有层次,乍一看,画面就像视觉噪音,但所有元素又相互匹配,形成一个连贯的整体。

(彩云注:这是一种比较高阶的设计平衡处理手法,用的好可以让画面非常具有设计感,但把握不好的话,就会非常凌乱。所以,我们平时能看到很多大师的作品看似一些简单图形的使用,但就是好看,轮到自己设计的时候就会发现,越简单的设计似乎越难设计好。)

为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好

五、视觉平衡的秘密?

当谈到构图中的重量平衡时,他们经常将其与物理世界中的重量进行比较:重力、杠杆、重量和支点。我们的大脑和眼睛感知平衡的方式非常类似于力学定律。我们很容易把一幅画想象成一个在某一点上平衡的平面,就像一个天平。如果我们在图像的边缘添加一个元素,它就会失去平衡,有必要修复它。元素是否是一组色调、颜色还是点并不重要,目标是找到图像的视觉“重心”,即图像的重心。

不幸的是,没有精确的方法来确定一个物体的视觉质量。一般来说,设计师依赖于他们的直觉。不过,下面这些有用的观察可能会有所帮助:

1)大小

大的物体总是更重。

2)形状

不规则形状比规则形状的元素轻。

3)颜色

暖色比冷色重。

为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好

4)色调

深色物体比浅色物体重。

5)图案

带有图案的元素显得更重。

6)3D

带有纹理贴图的元素显得更重。

为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好

7)位置

物体离中心越远,其视觉重量越大。

8)方向

垂直元素比水平元素更重。

9)密度

许多小元素可以抵消一个大元素。

为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好

10)内部复杂性

物体内部越复杂,视觉重量更大。

11)填充空间关系

正形空间比负形空间更重。

12)对重量的感知

照片中的哑铃看起来会比一只钢笔更重。

六、总结

当使用对称时,作品看起来可以更加的专业和有科学性。其中,静态对称的作品显得更加有专业精神和严肃的;而动态对称的设计方法则能吸引用户的兴趣,表达出个性和创造力,能让用户集中注意力。

作者:彩云sky
来源:人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

博博

提到网页设计,最先想到的是当今主流的韩国设计和扁平化设计,当然个性化排版、视频代替文本、全屏大视野、滚动视差、多平台全适应等设计形式已经进入了我们的视野。西方简单、功能性的美学精神”少即是多”这一设计理念攻占了我们的大脑,很多时候,在开始做设计之前脑子里会来回浮现这些风格的设计。那么,怎样在主流设计方式中做出有自己特色的网站呢?我们从以下几点介绍在大环境下提升网站设计形式的方法。

那么,怎样在主流设计方式中作出自己的特色呢?我们从以下几点介绍些提升网站设计形式的方法:


> 赋予民族文化特点


在众多的设计师追逐主流风格的同时,民族文化感觉的设计越来越少,不光在国内,在世界各地都出现了这样的情况。当然不可否认还有很多设计师在为民族设计而努力。下面这几个站点虽然只有简单的设计和动态效果,但是却有一种非常淳朴的民族风格,这也是最吸引人的地方,每个细节都流露出民族的特点和气氛。不是只有文化性质的网站才能赋予文化设计风格,在商业产品类型的设计推广中同样适用。

日本眼药水网站,将现代工业社会的产物与传统鬼神文化中的五种妖怪以卷轴、插画传统形式展示,与漫天遍地的明星代言广告形成对比,同样是眼干、眼涩、眼疲劳,同样是以办公室、上班族为消费群,文化创意上的突破使人眼前一亮。

http://www.medical-youkai.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法

另辟蹊径谈创新!提升网站设计形式的几种方法

(小编按:那个妹子是我的女神横山美雪,吗?)和风服装店,日本特色的风铃、简约的插画,”和风”,大和民族追求与自然的和谐之美,从这个服装网站上我们可以看到日本设计文化体现了对自然的尊重,反映了朴素美学的内敛性格。

http://hanamichiya.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法

缅甸传统舞蹈音乐合奏网站,缅甸古代戏剧舞蹈,是从缅甸傀儡戏、古典戏剧及阿迎舞等古典艺术中产生的。傀儡戏中的一些节目和各种傀儡角色的不同的舞蹈动作被大量移植到现代缅甸舞中。傀儡舞中”傀儡步”、”傀儡爬跳”等成为现代缅甸舞的基本动作,是文化多样性的辉煌继承。黑白图片和大面积留白的海报设计形式,突出舞蹈者主体,用在网站上更显神秘。

http://www.itwillbeastounding.com/

另辟蹊径谈创新!提升网站设计形式的几种方法

俄罗斯莫斯科大剧院是莫斯科的地标性建筑之一,是莫斯科有名的芭蕾舞与歌剧剧院;是俄罗斯历史最悠久的剧院,享誉天下,是世界上最著名的剧院之一。它不仅继承了欧洲芭蕾的历史传统,更重要的是,在俄罗斯丰富的民族音乐与舞蹈的沃土上,建立和发展了自己的芭蕾体系。将沙俄古典风格融汇于设计版块中,同样大量留白处理给了图片展示更多的空间。

http://www.bolshoi.ru/

另辟蹊径谈创新!提升网站设计形式的几种方法


> 与网站主题相关的高清图片的应用


大面积整站或局部性使用高清图片,在之前设计分享中我们见到了很多案例,这里介绍几个日本以图片展示为主的网站,精致的图片不需要过多的装饰。

坂本龙一是日本当代最让人尊崇的音乐家之一,音乐领域涉猎甚广,在先锋电子乐领域拥有特殊地位。代表作有《Merry Christmas Mr. Lawrence》《末代皇帝》《遮蔽的天空》《桃太郎》《高跟鞋》等,为1992年巴塞罗那奥运会开幕式谱曲并担任指挥……坂本龙一成为”大众明星”的原因,一方面在于他个人对于电子、摇滚、爵士等多重音乐风格极具灵感的把握;另一方面则在于他能在商业、艺术和实验之间找到平衡点,作出既有实验意义又有动听旋律的作品。

http://moonlinx.jp/special_issue/003/

另辟蹊径谈创新!提升网站设计形式的几种方法

另辟蹊径谈创新!提升网站设计形式的几种方法

日本设计强调材料的内在之美,注重与大自然的和谐,珍惜自然材质,这与日本自然资源相对稀缺有很大的关系。日式风格中,回归自然是最大的特色,推崇贴近自然、强调自然主义,让使用者有置身自然的感觉。用产品的工艺制作图片作为网站的主体和背景,拉近了观者与产品的距离。

http://www.ishiyamasenko.co.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

传统工艺美妆店铺,单从cover引导页的图片就能看出该店铺的卖点。特色产品图加上柔美的动态散花效果,为网站加分,导航中加入商城外链可直接在线购物,利于用户体验。

http://www.kazurasei.co.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

日本联合新闻社,社内的场景图片很好的展示要表达的主旨。

http://go-jimbou.info/

另辟蹊径谈创新!提升网站设计形式的几种方法

街区是一个城市的重要标志性特色,将这样杂乱无章的旧街道作为网站通栏头图,配合简介的形式设计,也能很出彩。

另辟蹊径谈创新!提升网站设计形式的几种方法

美宝莲日本网站,将实体店作为网站背景,搭建成实景的巨幅海报展板,这种形式是否比存粹的明星代言更接地气些?!

http://www.maybelline.co.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

对比下面两个日韩服饰类网站,可以看出日本网站在图片选择上更注重产品本身,极具质感和张力的图片真实朴素,力求展示产品与人的关系。而韩国则更注重整体的氛围的搭配,通过环境的营造来提升产品的品味和档次,产品只是搭建系统中的一部分。

http://quael.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法


> 对图片进行特殊处理


图素质量低是我们在设计过程中经常遇到的情况,我们通常用到最多的方法莫过于高斯模糊、柔光、滤色、添加纹理质感,将图片处理成做旧、仿古、年代感、单色……又会是什么效果呢?!

箔工艺,金银箔具有很好的延展性,将金银打展成薄膜状,与绢结合,应用于古代服饰中。此文化再京都有四百余年的历史,现在主要用于文物修复。取箔工艺品的一个局部,重新组合作为整张背景,贴片处理的文字与背景的融合更显古代文化的精妙。

http://www.hiroto-rakusho.com/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

人物素材粗糙的情况下,采用水彩的滤镜效果,背景加入点状网格,极具形势感的箭头做引导,个性十足。

http://www.kanenavi.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法

全日本剑道联合会,网站采用时间轴展示的形式,从1950-2000年每一期获胜者的照片和信息,可以看出由于70年代以前都是黑白照片且像素低,和近期的彩色照片反差较大,所以网站设计成了古朴做旧的年代感风格,加入很多早期照片中的截图作为插画元素,确保了风格统一。

http://www.kendo.or.jp/champ/#/about

另辟蹊径谈创新!提升网站设计形式的几种方法

Daum是韩国最大的门户网站之一,以邮件和社区产品为核心,是韩国第一个电子邮件服务网站Hanmail的前身。牛仔蓝单色照片处理更像电影和动漫场景。

http://www.daum.net/

另辟蹊径谈创新!提升网站设计形式的几种方法

也有整体黑白加入局部彩色色的案例,将复杂图片简化处理,对于简洁的页面设计来说,这是个不错的方法。每个版块都是黑白照片做背景,文字做JS动态移入效果,在图片的某个元素上加入VI主体颜色,故事感很强。

http://www.streetreach.org/

另辟蹊径谈创新!提升网站设计形式的几种方法


> 创意图形化环境的设计


手绘、矢量图形设计的图形场景环境,用在食品、旅游、地图、婴幼儿等方向的设计上更容易拉近消费者,给人放松愉悦的心情。相比图文混排更贴近生活。

狗粮推广网站,将网站设计成宠物乐园,各个品种的狗狗们都有自己的一段视频,内容是狗狗们对几种产品的喜好对比。

http://www.solvida.jp/solpa/#/MainPage/001

另辟蹊径谈创新!提升网站设计形式的几种方法

企划创意公司,技术上只是一个简单的FLASH站,但空间跨越性思维设计却给这个网站带来了不凡的效果。由局部的空间延伸出各种异空间的交汇,加入互动效果而引发的更多惊喜也进一步提升了用户参与度。

http://www.aquacp.com/

另辟蹊径谈创新!提升网站设计形式的几种方法

用3D拼图建造起一个小型城市,4个建筑代表网站要展示的4个心理学的具体分类,建筑物夸张的拟人化动作实现页面跳转。

http://www.soc.nara-u.ac.jp/kokoro/

另辟蹊径谈创新!提升网站设计形式的几种方法

日本儿童专用鸡蛋,此网站将所有产品相关内容装进鸡蛋中,食用后产生的剩余物可大变身继续用于其它物品的生产,循环利用避免环境污染,所以在首页展示上才会有类似瀑布流的大量周边产品展示。网站首页是自动向下播放展示的瀑布流效果,hover及跳转都伴随非常可爱的音乐和动态,恰当音乐的播放和触碰hover的小惊喜也会给网站增添色彩。

http://www.kewpie.co.jp/egg/

另辟蹊径谈创新!提升网站设计形式的几种方法

日本山形放送局的地区地形图,大家都看过现实版的景点手绘地图,该网站也用了这种形式。比较有意思的是他的功能非常强大,是一个可放大缩小的真实版地图,没有跳转,完整的手绘google地形图。以小青蛙作为代言人对每个景区的优势作手绘图形注解,以当前弹出的形式展示该地的历史、自然、观光、社会、祭祀、美食、传统等信息的详细图文、视频解析。

http://www.nhk.or.jp/yamagata/mitekero/

另辟蹊径谈创新!提升网站设计形式的几种方法

九州熊本天草村,用动态图形化完整的对天草村进行了设计演绎,重要景点默认做了动态处理,跳转后都是另一个完整的实景矢量图。对景点中的标志性小建筑做了页面弹出实景详细讲解。

http://www.amakusamura.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法

这种形式在新加坡儿童乐园的设计中也同样得到了使用。

另辟蹊径谈创新!提升网站设计形式的几种方法

设计风格也是体现一个国家文化的重要方式,严寒漫长的冬季成为俄罗斯的标志,在页面上打造一个同色系的冰雪世界,反而使彩色的主体信息更加突出。

另辟蹊径谈创新!提升网站设计形式的几种方法


> 赋予与产品相关的交互形式,重视用户参与性


一个优秀的网站它的交互性也非常重要,拥有好的交互性可以让浏览者有着更高的参与感,并且也能增大网站自身传播效果,还可以提高用户对自己的网站的依赖性和忠诚度。

Panasonic剃须刀产品JS展示站,设计形式与松下电子实现”星罗棋布的网络社会”和”与地球环境共存”的理想呼应,整站的背景都是由动线点组成的动态图形面拼合而成,图片和文字的展示停留在这星罗棋布的空间组合中。此时网站要表达的不仅是展示产品,还有松下文化。

http://panasonic.jp/shaver/lamdash/dna/index.html

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

东京交响乐团,该网站对用户的参与性做到了极致,从网站主内容上没有关于东京交响乐团的图片文字信息,用户可以在页面专属音乐键盘提示的情况下,用独创音乐的新颖形式创作属于自己的个性音乐,并对音乐逐帧做了记录,可以返回欣赏创作成果,并分享到各网站。

http://tokyocitysymphony.com/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

SPECIAL-T 绿茶网站,玩过网游的同学们都知道游戏中做任务有地图寻路功能,该网站采用了这个原理,在大海中建立类似于西游记的龙宫,用户在没有任何导视的情况下,360度无死角在海洋里自由探寻,最终的成果便是在一段时间的遨游后到达网站的终点产品引导页,阐释special的感受。

http://ogreen.special-t.com/en/

另辟蹊径谈创新!提升网站设计形式的几种方法


> 视频与特殊版式的结合


如果你想要一种优雅而直观的产品展示方式,全屏视频网站是一个不错的选择。全屏视频网站能一瞬间点燃人们的好奇心,当然也可能马上让访客失去兴趣,这都取决于你是否能够驾驭这类高大上的设计风格。

日本福祉大学,校园内外学生学习、活动氛围的场景视频作为背景播放展示,视频上一层则是手动切换的内容介绍字幕,一个大学的网站更像是一个微电影展示。

http://www.n-fukushi.ac.jp/lifestyle/

另辟蹊径谈创新!提升网站设计形式的几种方法

Mikihiko Kyobashi 海底摄影记录展示站,整站视频展示配上海洋真实的声音。透过视频看到的海洋不是一汪死水,阳光穿透海面,碧海蓝天,比静态的照片更能展示生命的气息。

http://www.mikihiko.com/

另辟蹊径谈创新!提升网站设计形式的几种方法

bc服装网站,暗色的动态视频做背景,与前层简单的图文排版形成反差,图片hover的3D立体效果令人耳目一新。

http://bananacafe.com.br/

另辟蹊径谈创新!提升网站设计形式的几种方法

图片与视频的混排切换展示,拉伸后展开整站播放效果。

http://getgoingtoday.org/beyond

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

日清食品,微距拍摄的视频,用时间倒数计时的方式,记录在这一碗日清方便面泡好的3分钟内,世界各国家不同肤色年龄的人群品尝日清食品的状态缓慢特写,加入了用各国语言描述倒数计时的声音,视频中间穿插有和日清logo呼应的装饰语言,隐藏在页面下方的时间轴可以找到每一分每一秒的画面祯,时间可自行选择切换到想要的那一帧。

http://www.nissin.com/jp/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法


结语:


以上五点都是当下主流设计中另辟蹊径找创意,简单五点很难将所有好的创意都涵盖在内,除此之外大家肯定也有更好更多的想法。网页设计总是立足于浏览者的审美、文化,以及信息传播的习惯、方式,还有网页开发技术的进步。对于绝大部份网站来说,没有强大的专业力量去研究用户新的习惯和需求,也不可能开发出新的技术功能,只能在一些大型的网站中窥见一些发展的趋势,再从中找到自身可借鉴的地方。这种借鉴如果成为普遍性,那我们也很难在互联网的大潮中有自己的一席之地。网页设计已逐渐往多元化方向发展,更好的创意、更新的想法都来源于我们真实的生活感受,想要我们的网站变得更强大、拥有更好的用户体验,无可厚非,我们应该做的是大胆、大步地去尝试。


作者:ranger

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!






图标定制设计之十:这6种类型的菜单图标和用法,这篇全总结了!

博博

大家好,我是 Clippp。今天为大家分享的是「菜单导航」。一个简单的汉堡菜单就可以包括多种不同的样式,可能有的样式甚至没有官方的名称,但因为样式的差异在功能上这些菜单也会出现差异性。

我们可以通过分析这些样式,来思考不同的样式代表着怎样的设计含义和设计目的,不能因为简单常见而忽视了功能的内核。


汉堡菜单


这6种类型的菜单图标和用法,这篇全总结了!

关键词:横条、多个菜单选项

这个图标的样式简洁易懂,通常位于网页和 App 的上下角,用来告知用户这个按钮之外还有更多内容可以探索。

当产品有多个菜单选项时,考虑使用汉堡图标来显示,但尽可能避免在桌面视图中使用。


垂直三点式菜单


这6种类型的菜单图标和用法,这篇全总结了!

关键词:垂直、内嵌菜单

通常位于屏幕或窗口的右上角或顶部,是用于打开带有附加选项的图标,打开的内容往往是一个较小的内嵌菜单而不是整个全新的页面。


水平三点式菜单


这6种类型的菜单图标和用法,这篇全总结了!

关键词:水平、内嵌菜单、web

水平三点式菜单同样常位于屏幕或窗口的右上角,用于打开菜单或显示相关项的操作。

因为图标样式是水平的,所以更容易在 web 上或者在表格等水平方向中使用。


九宫格菜单


这6种类型的菜单图标和用法,这篇全总结了!

关键词:子分类、子功能

九宫格菜单通常用于打开同一产品中包含不同子产品或子功能,可以在它们之间快速切换,此图标常位于产品主页的右上角。


过滤式菜单


这6种类型的菜单图标和用法,这篇全总结了!

关键词:过滤、排序

过滤式菜单由三行不同长度的线段水平叠放而成,是最广泛使用的过滤符号。可以将过滤式菜单与“排序方式”选项结合使用,或者与全局过滤器结合使用。


汉堡菜单变体


这6种类型的菜单图标和用法,这篇全总结了!

关键词:样式特殊、时尚感更强

作为汉堡图标的替代品,与显示列表菜单的目的相同吗,但是这些样式我们平常见的可能会比较少,更常用在充满现代感、时尚感和艺术感的网站上。

这6种类型的菜单图标和用法,这篇全总结了!


最后


不同的样式可能代表着截然不同的设计目的,常思考这些小而精的细节,是保证产品体验提升的关键。

慢来比较快,如觉得有帮助,请点个赞,谢谢!

作者:Clip设计夹

转载请注明:优设网

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

魏华的微信.png

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

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

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


更多精彩文章:

图标定制设计之一:6大章节!图标设计基础知识全方位入门指南

图标定制设计之二:超全总结!金刚区图标设计的 10 大风格

图标定制设计之三:想让图标更精致?先掌握这11个容易忽略的设计细节!

图标定制设计之四:学会SVG图标的高级用法,界面适配效率翻一倍!

图标定制设计之五:研究微软 Fluent 图标规范后,我总结了这9个知识点!

图标定制设计之六:为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图标定制设计之七:客户说B端图标太普通没新意,该怎么解决?

图标定制设计之八:6个方面帮你快速掌握图标设计规范

图标定制设计之九:不止画图标!5 个金刚区的交互设计思考

图标定制设计之八:从6个方面帮你快速掌握图标设计规范

博博

本文从图标类型、系统图标的尺寸和网格、图标的绘制、导出和命名等6个方面,帮你快速掌握图标设计规范。

从6个方面帮你快速掌握图标设计规范

从6个方面帮你快速掌握图标设计规范

从6个方面帮你快速掌握图标设计规范

从6个方面帮你快速掌握图标设计规范


作者:白桦林溪

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

图标定制设计之一:6大章节!图标设计基础知识全方位入门指南

图标定制设计之二:超全总结!金刚区图标设计的 10 大风格

图标定制设计之三:想让图标更精致?先掌握这11个容易忽略的设计细节!

图标定制设计之四:学会SVG图标的高级用法,界面适配效率翻一倍!

图标定制设计之五:研究微软 Fluent 图标规范后,我总结了这9个知识点!

图标定制设计之六:为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图标定制设计之七:客户说B端图标太普通没新意,该怎么解决?

图标定制设计之八:从6个方面帮你快速掌握图标设计规范

图标定制设计之九:不止画图标!5 个金刚区的交互设计思考






图标定制设计之四:学会SVG图标的高级用法,界面适配效率翻一倍!

博博


前言


SVG 格式图标在软件界面中有广泛应用,它与生俱来的矢量属性,使其在高分辨率屏幕上的表现非常完美。SVG 是一个基于 XML 标记语言的开放网络标准格式,拥有跨设备多平台的兼容效果。前面我们有分享过一篇关于 WPS 图标的文章《探索 WPS 3000 个图标设计背后的故事》,得到了很多网友的积极反馈。相信界面设计的小伙伴们都很熟悉 SVG 格式了,这次,我有一个棒的想法想分享给大家:利用 SVG 图标套色,来完成不同界面的适配。

什么是 SVG 图标套色?


图标套色的简单来说就是利用 SVG 格式的文本属性,使用 XML 格式标准,在 SVG 文档中增加 CSS 样式,通过修改 CSS 样式属性,精准控制 SVG 格式图标颜色,通过修改透明度控制图形显示与否,从而变换图标的风格外观。

学会SVG图标的高级用法,界面适配效率翻一倍!

基本原理:修改 SVG 的样式,生成不同风格的图标

学会SVG图标的高级用法,界面适配效率翻一倍!

用处一:颜色适配

这里有几个插件,都用到了“保存”、“打印”这些功能。因为主题色不同,即使是同样外形的图标,还是需要根据主题色的不同输出适配各个插件的图标。采用图标套色的方法,就可以避免这类图标资源的重复输出。

学会SVG图标的高级用法,界面适配效率翻一倍!

相同功能需要两套不同主题色的图标

用处二:皮肤适配

现在多数软件一般都有皮肤功能,不同用户需求,衍生出风格各异的皮肤,各种颜色,深浅不一,一套图标满足不了所有,为了视觉效果需要对每个皮肤输出特定颜色、风格的图标。图标数量如果很多,投入的成本将随皮肤数量呈几何倍增加,图标套色就可以很好的解决这类问题,只需要通过修改图标颜色和风格即可适配。

学会SVG图标的高级用法,界面适配效率翻一倍!

通过修改映射配置,可以得到不同颜色的图标


套色方法


我们先看看图标套色之后的效果:

学会SVG图标的高级用法,界面适配效率翻一倍!

修改映射配置,可以得到线、面不同风格的图标

简单来说,实现这种效果有下方五个步骤:

学会SVG图标的高级用法,界面适配效率翻一倍!

套色方法五个步骤

以下方几个图标来做示例:

学会SVG图标的高级用法,界面适配效率翻一倍!

SVG 示例图标

第一步,确定图标线、面风格

设计师将图标线、面风格确定下来,并保证两者效果上可以兼容,即轮廓一致。

学会SVG图标的高级用法,界面适配效率翻一倍!

同时兼容线、面两种风格效果

第二步,定义图标颜色

在确定了图标的风格之后,将图标中用到的 7 种颜色,根据一深一浅再拆分为 14 种(具体几种颜色可根据图标设计需要来定),深色用于填充线性图形,浅色用于填充面性图形。

学会SVG图标的高级用法,界面适配效率翻一倍!

根据线、面风格需要,定义图标的颜色

第三步,给颜色定义样式名

给 14 种颜色,分别定义好 CSS 样式名(样式名遵循 CSS 规则即可)。

学会SVG图标的高级用法,界面适配效率翻一倍!

给颜色定义样式名

第四步,给 SVG 图标添加 CSS 内部样式

SVG 格式图标默认是没有 CSS 样式,需要手动将 CSS 内部样式添加到 SVG 文档中,并将 SVG 路径颜色与 CSS 样式名关联起来。

学会SVG图标的高级用法,界面适配效率翻一倍!

给 SVG 添加 CSS 样式

第五步,样式属性配置机制

添加内部样式之后,需要开发小哥哥在软件中增加对 SVG 图标 CSS 样式属性的映射机制。修改映射机制配置文件中 CSS 样式属性,就可以控制图标风格变化。

学会SVG图标的高级用法,界面适配效率翻一倍!

修改配置代码即可改变图标颜色

完成了以上五个步骤,通过修改软件中的映射机制配置文件,就可以改变图标风格。


应用案例


了解了步骤方法,我们以 WPS 为例来讲解图标套色在实际案例中的应用:

案例一:前面有提到我们的四大组件,WPS 由文字、表格、演示、PDF 四组件组成。每个组件都有各自的主题色,文字主题色为蓝色,表格绿色,演示橘黄色,PDF 红色。多数图标都含有主题色,但外形是一样的,因各组件主题色不同而导致了很多图标的重复输出。

套色用处之一的颜色适配,可以让图标变色以适应不同的组件色,避免图标的重复。

学会SVG图标的高级用法,界面适配效率翻一倍!

不同主题色图标的变换效果

案例二:WPS 有推出多个风格各异的皮肤,因为图标数量的关系,无法每个皮肤都输出一套图标,目前只能使用默认的线性图标。也因时间和维护成本而导致图标风格的单一。

套色用处之二的皮肤适配,能使图标改变风格以适应不同的皮肤,既能满足图标风格多样,又能满足时间和维护成本的可控。

学会SVG图标的高级用法,界面适配效率翻一倍!

不同风格图标的变换效果

案例三:深色模式的配色与浅色模式大相径庭,图标使用的颜色也截然不同,适配需要输出两套图标资源,因不同深浅色模式而导致的图标资源重复输出。WPS 组件功能区的图标有几千个,输出和维护都很费精力。

套色用处之二的皮肤适配,在深浅色模式下也能适用,改变图标颜色以适应不同的深浅色模式,避免图标的重复输出。

学会SVG图标的高级用法,界面适配效率翻一倍!

深浅色模式下图标的变换效果


总结


通过以上的案例不难发现,SVG 图标套色技术的价值,主要有以下几个方面:

学会SVG图标的高级用法,界面适配效率翻一倍!

1. 时间和维护成本的降低

利用图标套色方法,设计师只需要输出一套图标资源,就完成了多组件、多风格、深浅色模式适配。开发小哥哥也可以删掉适配用的冗余代码,提升了图标的管理和软件运行效率;

2. 个性化需求的满足

后期可以增加自定义扩展,让用户配置图标风格,更好地满足个性化需求;

3. 服务器资源的节约

更少图标资源,更小压缩包,更少空间和宽带的占用。

采用新技术,帮助设计、开发更好地完成多场景适配,降低了整体流程的执行难度,为项目节省了大量时间,避免过多精力投入在重复工作中,为最终完成目标创造了有利条件。同时也解放了生产力,有了更多的时间可以去关注高价值的项目。

工作中经常能遇到重复的内容,这都有提升和优化的空间,寻找更高效的方法,让工作变得轻松简单。

作者:金山办公CED

转载请注明:优设网

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

魏华的微信.png

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

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

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

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


更多精彩文章:

图标定制设计之一:6大章节!图标设计基础知识全方位入门指南

图标定制设计之二:超全总结!金刚区图标设计的 10 大风格

图标定制设计之三:想让图标更精致?先掌握这11个容易忽略的设计细节!

图标定制设计之四:学会SVG图标的高级用法,界面适配效率翻一倍!

图标定制设计之五:研究微软 Fluent 图标规范后,我总结了这9个知识点!

图标定制设计之六:为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图标定制设计之七:客户说B端图标太普通没新意,该怎么解决?

图标定制设计之八:从6个方面帮你快速掌握图标设计规范

图标定制设计之九:不止画图标!5 个金刚区的交互设计思考




表格设计-掌握表格设计方法(表格体验篇)

分享达人

前言


提起中后台,除了高效、灵活和强大之外,不可忽视的还有它的海量数据。海量数据的筛选与呈现,直接决定决策人员的效率高低。我这边主要是结合自己在实际工作中遇到的表格设计问题,针对Web端数据呈现方式之一,表格的设计进行探讨。

首先了解下表格的构成:顶栏、表格主体、底栏



  • 顶栏: 对表格信息进行概括,包含标题、筛选、搜索、操作按钮等功能

  • 表格主体:承载数据内容,由 行 和 列 构成

  • 底栏:主要用于设置当页条数及放置分页器


关于表格的文章有很多,这边我仅仅针对表格内部(即表格主体)与大家探讨需考虑哪些问题才能让表格整体的阅读体验更好!


“优秀的设计需要用心、规划、思考和理解人们的行为方式”


的确,表格作为中后台海量数据呈现的载体,能够【帮助用户快速“阅读数据”,获取有效信息,提高决策效率】,但是实际业务中,很多设计师往往没能够结合产品和业务场景,找到一个合适的方案。所以我结合了自己在实际工作中遇到的表格设计问题,总结出以下几点:


一、表格需自我解释 —【梳理数据关系,明确数据重点】


自我解释的最终目的就是让人看懂你,试想下用户面对一整张表格中数据却不知道表达什么意思,这极容易给用户带来阅读压力最终放弃。因为很多B端产品的数据面向的用户角色及场景都存在差异,所以在设计表格的时,我们首先需要对表格的表头(列)进行合理的排列。


如:管理员与普通用户所展示的数据内容就可能存在差异,所以需要根据阅读重点来定义表格 列的展示顺序(依据信息重要程度从左到右放置),且思考每列间的数据关系,来引导用户。


案例:运用同学常见的拉新数据,其中的数据包含:日期、渠道、新增用户数、活跃用户数、用户启动次数、累计用户数、版本信息等。


首先我们应思考运营同学关注点是什么?作为运营方案的成果数据,他们肯定最想知道是否完成KPI「是否有效获取到用户?这些用户活跃情况?哪几天拉新效果最好等」。如果我们不考虑用运营同学特定的目的,随便排列,就容易导致用户第一时间很难获取到自己想要的有效信息,极大影响阅读效率。但如果抓住了这个主要目的,对指标进行排列,那么我们表格的逻辑性便会更强,更清晰,也更加贴合业务述求。



二、【配置表头类型,提高阅读效率】


表头不仅仅有解释当前数据内容,还可以集成:批量操作、排序筛选、解释说明、分组、固定等查看操作,而这些功能均不是必要元素,需根据用户查看数据的需要(如:用户想快速找到拉新用户数最多的某天等),适当的选配。


2.1、批量操作


在展示信息的同时,可以对表格主体内容中的数据进行删除、下载等操作,帮助用户批量操作,提高效率。如:QQ邮箱我们批量删除邮件。



2.2、排序筛选


排序能让用户可以改变数据的排序,筛选则可以改变数据展示的类型,帮助用户更好的观察数据,发现数据规律。有两种形式,一种是使用上下按钮进行排序(正序与倒序),另一种是使用下拉菜单进行排序(适用于多种排序及筛选)。



2.3、解释说明


  • 表头的字段名称理应简洁明了,但有时精简后的名称用户还是看不懂,这时就需要跟一个释义标识,鼠标悬停时出现该字段的详细解释,同时满足不同用户的需求。


  • 有时候宽度不够,文字会溢出,则需要悬停时出现完整的字段名称。



2.4、分组


适用于多种所属关系的信息展示(如:地址>街道>街区>楼号>门牌号)



2.5、固定


固定不光可以固定 行,也可以固定 列,特殊情况可以同时固定 行 和 列。一般数据较多时,帮助用户在滚动过程中可以实时看到 行 和 列 对应的内容,提高阅读效率。



三、数据展示 —【规范展示方式,营造良好展示效果,提升数据阅读效率】


3.1、对齐方式


合适的对齐方式,能够让用户阅读时更加舒服。由于表格中的数据类型比较多,需根据数据内容选用合适的对齐方式。


  • 数字:右对齐,有小数点的数值需按照小数点对齐,且数值较大时需每隔三位数使用 , 隔开,便于用户阅读与对比数值。


  • 文字:左对齐,符合人们从左到右的阅读习惯。


  • 混合型文本:左对齐(混合型内容包含图片,进度,状态标签,人物头像,链接等)。


  • 多选操作:居中对齐。


!!表头的对齐方式与数据展示的对齐方式必须保持一致,这样能够统一整个表格的表格对齐方式,便于提升阅读与对比的效率。




  • 数字:数值、金额、比率

undefined



  • 文本对齐:纯文本



  • 文本:判断性文本



  • 文本:时间日期



  • 混合型文本:状态标签、进度条



  • 混合型文本:人员(单人、多人样式)



  • 混合型文本:操作



  • 混合型文本:显示/隐藏



  • 混合型文本:评价



  • 可操作:多选



3.2、数据多层级


在复杂的表格中,由于数据量较多,并且数据有层级关系,所以会对数据表格进行分层处理,优先展示第一层级的数据内容,将二三层级的数据隐藏起来,用户点击后再展示(如:教育类产品中题目设置 章节信息编辑 知识点编辑)



3.3、数据修改


支持直接点击内容,出现输入框后进行编辑



3.4、展示统计


方便用户快速了解总数



四、表格分割线 —【建议选用水平线、斑马条纹,阅读舒适度最高】


表格行列的分割方式有:

  • 网格式:类似excel,这样的方式很好的所有 行 和 列 进行分割,但是网格很容易给人造成视觉疲劳。


  • 水平线:仅对 行 进行分割,通过间距与对齐的方式对 列 进行视觉上的分割,这样的方式可以很好的对数据进行划分,便于阅读。


  • 斑马条纹:通过低饱和度的颜色交替的对 行 进行分割,同样很好的对数据进行划分,便于阅读。


  • 留白,不分割:直接留白,通过间距来划分,不建议使用这样的方式,因为数据较多的时候,用户十分容易将行对应错,容易造成混乱。



五、空数据


5.1、表格中经常会出现空数据或无数据的情况,留白处理会给用户造成一定的困惑和误解,是系统没有加载出来吗或误以为出现了bug?明智的做法,是无数据时用「-」来填充显示,数据为零时与上下数据单位、小数点相同的0来显示。



5.2、表格无内容


  • 没有创建诉求的,数据是系统产生的,不是由用户创建的,直接告之暂无数据。



  • 是用户有创建诉求,数据是由用户或系统产生的则直接示意用户创建数据



写在最后

通过合理的组织架构和呈现方式,使原本枯燥的数据呈现出生命力,这是一件很神奇的事。而用心、规划、思考和理解人们的行为方式,围绕用户目的与实际使用场景,提供易读性高且规范表格更是需要设计师反复思考的事情!

最后感谢您看到最后,希望通过本篇文章的讲述,能对大家有所启示~~~~~~~

文章来源:站酷   作者:小发歌

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

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

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档