首页

高级设计师才会的设计思维,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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

打开设计思维才能突破瓶颈

杰睿

对于设计师来说,遇到设计瓶颈期很正常,入行一段时间后所具备的能力就会达到峰值,无法突破峰值就会遇到瓶颈。主要在设计思维和设计技法层面受限,打开设计思维才能突破瓶颈期,通过积累优秀的案例并进行总结分析,可以更快的打破思维限制。

 

 

 

 

 

分享目录

 

一、趣味性的登录设计

二、瓷片区的趣味性手势交互

三、营造怀旧感的温馨体验

四、趣味性的进度提示设计

五、场景感的点击操作

六、动效引导用户发帖

七、卡通形象强化瓷片区视觉感

八、不改变布局的曝光强化

九、可以晃动的 Banner 图

十、场景感的底部标签栏设计

 

 

 

一、趣味性的登录设计

 

登录是进入产品的第一道防线,也容易让用户产生排斥感,降低用户的防备心理才能提高登录的意愿度。

 

盯潮 App 在登录界面中,以潮流元素和商品等内容进行设计,使得页面视觉感丰富。晃动手机时元素也会移动,在掉落或者碰撞手机边缘时配合震动感,让体验变得非常有趣。趣味性的设计降低了用户的排斥感,提升了登录的意愿度和体验感。

 

 

 

 

 

 

二、瓷片区的趣味性手势交互

 

瓷片区、Banner、金刚区是产品中的三大运营模块,起到提高曝光度达到引流的目的。瓷片区在页面中的布局比较灵活,设计表现也非常丰富。

 

盯潮 App 在首页瓷片区设计中,以栅格式布局进行区块划分,占比较大的模块类似于 Banner 式表现。通过手势可以任意拖动实现切换,趣味性和互动性相结合,提高了用户的使用乐趣。

 

 

 

 

 

 

三、营造怀旧感的温馨体验

 

童年的记忆是我们逝去的青春,每每看到小时候的画面,总能勾起我们童年的回忆。最近发现一款结合怀旧感营造设计风格的产品,名字叫“软眠眠”。

 

这是一款拯救失眠者的治愈系睡眠 App,以一幅小时候生活的环境插画填充界面背景,图标设计也是提取小时候的玩物或者生活用品,视觉风格营造极强的怀旧感。无论是画风还是配色、配乐等,都勾起了我们满满的回忆,带给用户温馨的体验。

 

 

 

 

 

 

四、趣味性的进度提示设计

 

在完成步骤化和消耗数据等内容表达层面会选择进度条,通过可视化的表达提高用户的理解,减轻信息认知负担。

 

软眠眠 App 在定制睡眠计划的过程中,完成选项时的进度条设计非常有意思,是一个小孩通过拉动绳子移动。拉动过程中结合动态表达,配合手绘风的表现让人感觉轻松愉快,趣味性的设计也提高了完成选项任务的意愿度。

 

 

 

 

 

 

五、场景感的点击操作

 

在保障底层操作体验的基础上,设计会越来越讲究细节的体验,逐步强化情感化的融入和场景感的体验。

 

最近在体验小雞上工 App 时,在找工作的列表设计中加入了“抢”按钮,在点击列表时按钮会有按压的动效过程。模拟抢拍按钮获得机会的体验,营造场景氛围感,提高了设计表达的趣味性。

 

 

 

 

 

 

六、动效引导用户发帖

 

微动效可以提高功能的吸引力,也能让互动体验变得更有趣,可以通过动效引导功能操作和提高关注度。

 

腾讯动漫 App 在圈子栏目中,以 IP 形象结合动效强化发帖按钮,以此引导用户参与发帖。动效不仅突出了发帖的关注度,也让发帖按钮设计更有亲和力,进而提升用户的点击欲。

 

 

 

 

 

 

七、卡通形象强化瓷片区视觉感

 

瓷片区起到强化曝光达到流量引导的作用,提高该模块的吸引力至关重要,视觉感的突出也尤为重要。

 

会玩 App 在首页“一起玩”的瓷片区设计中,以卡通形象结合丰富的色彩进行表现,各种装扮的形象丰富视觉感。卡通形象设计风格统一,卡片色彩丰富且协调,整体瓷片区视觉冲击力十足。

 

 

 

 

 

 

八、不改变布局的曝光强化

 

在当前产品结构不变的基础上,如何提高局部内容或者主推内容的曝光度,是产品设计师不断探索的方向。

 

爱奇艺 App 首页推荐栏目 Banner 图下方,默认情况下以宫格布局推荐影片。前段时间在打开时发现了一个临时设计表达,保持当前结构布局不变,放大了图片填充和推荐影片,整张画面填充宫格,视觉张力十足。该设计表达既不会干扰当前布局,也能强化推荐影片的曝光度,解决方案值得探索。

 

 

 

 

 

 

九、可以晃动的 Banner 图

 

Banner 可以在创意、造型、互动形式等方面进行设计发挥,也呈现了许多优秀的方案,产品设计师也在不断尝试更多的可能性。

 

最近在体验盯潮 App 时,发售栏目顶部 Banner 图设计引人关注。当用户左右晃动手机时,Banner 图背景层不动,而文案和产品等元素层会跟着晃动的频率左右移动。可以晃动的 Banner 图非常有意思,成功地吸引了用户的关注度和点击欲。

 

 

 

 

 

 

十、场景感的底部标签栏设计

 

底部标签栏设计可以在背景、造型、图标等元素中发挥,其中图标设计中的发挥相对更多一些,在背景和造型层面的案例较少,不过最近也发现了一个解决方案。

 

在体验云游万里长城小程序时,进入之后的小程序底部标签栏设计结合了长城墙面和结构,非常有场景代入感。设计了深色版和浅色版,图标造型设计也融入了长城元素,不失为一种优秀的差异化设计探索。

 

 

 

 

小结

 

希望本期的分享可以开启大家更多设计思维,从优秀的设计方案中发现设计的轨迹,复用到后期的项目设计中。本文描述属于个人理解和总结,不足之处欢迎大家留言补充,我们互相进步。



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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

探究UI设计中形状的创意与应用

杰睿

形状设计可以影响整个界面的视觉效果。通过选择适当的形状和排列方式,可以创造出令人愉悦、易于使用和富有吸引力的界面。

写在前面

在UI设计中,形状设计是一个至关重要的环节。对其选择和排列会直接影响到界面的美观度和用户的交互体验。接下来将详细探讨UI设计中的形状设计,包括其重要性、基本原则和实际应用。

 

形状可以帮助用户理解和操作界面。一个优秀的形状设计应该具有清晰、简洁和易于理解的特点,我们在平时做设计中,需要将这些原则深入到每一个细节中。

在设计中,形状的识别和理解是至关重要的。一个成功的形状设计应该能够快速地被用户识别并理解。例如,一个常见的形状可以使用不同的颜色和大小来区分主要内容和次要内容,从而引导用户的注意力。

 

1、形状的一致性

在UI设计中,一致性是一个非常重要的原则。一个好的形状设计应该在整个应用程序中保持一致,从而使用户可以轻松地导航和操作。例如,闲鱼APP里的所有的按钮可以使用相同的形状和颜色,以便用户可以轻松地识别并操作。

 

2、形状的个性化与品牌识别

一个独特的形状设计可以帮助品牌在竞争激烈的市场中脱颖而出。一个好的形状设计应该能够体现品牌的个性和价值观,从而增强品牌的识别度。使用独特的图标和标志来传达其品牌形象和价值观。例如:小米的logo、京东狗、淘宝天猫。

 

1、按钮设计

按钮是UI设计中最重要的元素之一。一个好的按钮设计应该具有清晰的形状和易于理解的标签。

按钮形状主要有直角、小圆角、全圆角三种样式。

① 直角按钮具有严谨、力量、高端的特点,适用于大牌美妆、奢侈品类产品;

 

② 小圆角按钮具有稳定、中性的感觉,适用于用户跨度较大的常规类产品中,例如微信、滴滴、抖音等;

 

③ 全圆角按钮更加温和、亲切,适用于电商类和儿童类的产品中。

 

按钮尺寸和比例根据iOS和Android的规范,按钮尺寸至少高于5.5毫米(36 pt),否则用户点击时会较为困难。同时,按钮长度固定,文字长度变化或是按钮长度根据文字长短而变化的设计方式也需要考虑文字距离按钮上下左右边距的比例关系。

总的来说,UI中按钮形状的设计需要结合具体的产品属性和界面风格,以及用户的使用习惯来进行综合考虑。

 

2、图标设计

图标是UI设计中另一种重要的具有高度概括性和视觉传达性的小尺寸图像元素。可以帮助用户快速地识别和理解功能和信息,是靠文案无法实现的。

例如,天气图标通过其形状、色彩和设计元素直观地传达不同的天气状况和气象信息,帮助人们更好地了解天气状况。又如卫生间男女图标的设计让人们易于识别和理解。

 

在UI设计中,图标的圆角度通常是怎么定义的呢?

① 大圆角:应用在以圆润、可爱为主要风格的UI设计中,以营造出更加柔和、亲切的视觉效果。

② 小圆角:小圆角作为一种微妙的细节元素,可以增加图标的层次感和细节。在追求设计质感的界面中,适当添加小圆角可以使图标更加精致和有品质感。

③ 无圆角:应用在科技或现代感的UI设计中,以营造出更加硬朗、冷峻的视觉效果。但使用需要克制,过多的直角可能会让整个界面显得生硬和冷感。

补充一点,我发现一个重要细节,就是很多人在计算内圆角数值时都存在困扰。自工作以来,我注意到这个问题影响了很多人,他们不知道如何正确地计算内圆角的数值。为了解决这个问题,通过以下方式帮助大家更好地掌握计算内圆角数值的方法。

 

3、输入框设计

输入框是用户输入信息的重要区域。在UI设计中,输入框的形状设计可以根据实际需求和设计风格进行变化。以下是一些常见的输入框形状设计:

① 方型输入框:这是最常见的输入框形状,它以方形的形式呈现,可以在其中输入文本或信息。这种设计简单明了,易于使用,适用于大多数场景。

② 圆角矩形输入框:这种输入框在四个角上采用了圆角设计,使得整个输入框看起来更加柔和、友好。这种设计在一些需要强调用户输入的场景下较为常见。

③ 下拉菜单输入框:这种输入框可以让用户从下拉菜单中选择一个选项,而不是直接在文本框中输入。这种设计适用于一些固定选项的场景,可以减少用户的输入操作。

④ 按钮式输入框:这种输入框将输入框和按钮结合在一起,用户可以点击按钮来输入信息。这种设计适用于一些需要强调点击操作的场景,例如站酷的登录。

⑤ 语音识别输入框:这种输入框允许用户通过语音来输入信息,而不是手动输入。这种设计适用于一些需要快速输入或不方便手动输入的场景,例如驾车、写字等。

总的来说,输入框的形状设计应根据实际需求和设计风格来进行选择,同时也要考虑用户的使用习惯和操作体验。

 

4、导航栏设计

导航栏是UI设计中重要的组成部分之一。它帮助用户在不同的页面之间进行切换和导航。在设计导航栏时,应考虑其位置、颜色和形状等因素。以下是一些常见的导航栏形状设计:

① 顶部导航栏:这是最常见的导航模式,位于页面顶部,可以包含网站的名称、主要的导航选项、搜索框等元素。这种设计简单明了,易于使用,适用于大多数场景。

② 侧边导航栏:这种导航模式位于页面左侧,通常用于二级导航或辅助导航。侧边导航栏可以以垂直或水平方向呈现,根据实际需求进行选择。

③ 底部导航栏:这种导航模式位于页面底部,通常用于一级目录的导航。底部导航栏可以包含网站的名称、主要的导航选项、搜索框等元素。这种设计操作方便,用户体验好,适用于大多数场景。

④ 弹出式导航栏:这种导航模式通常用于移动端应用,通过点击或滑动屏幕上的按钮或图标来唤出导航菜单。弹出式导航栏可以以垂直或水平方向呈现,根据实际需求进行选择。

总的来说,导航栏的形状设计应根据实际的导航模式和设计风格来进行选择,同时也要考虑用户的使用习惯和操作体验。好的导航设计应该简单明了、易于使用,能够提供清晰的信息架构和层级关系,帮助用户快速找到所需内容。

 

5、作为底纹设计

将形状用作底纹,可以增加图形的视觉层次感和趣味性。尤其是当使用如圆圈、条纹、曲线等形状时,可以使底纹呈现出动态感和动感。

也可以强调文字或图片中的某些元素,用来引导观者的视线,以创造出视觉焦点。比如,在一个沉闷的黑色背景上使用鲜艳的彩色形状作为底纹,可以将观者的注意力集中在那些形状上。

但是,必须着重强调的是,底纹的使用应当与整体的设计风格和主题相得益彰。若应用不当,可能会对画面的整体美感产生破坏性的影响。因此,在决定是否使用底纹时,必须慎重考虑其与整体设计的和谐度。

 

1、动态形状设计

随着技术的不断发展,动态形状设计已经成为一种趋势。通过使用动画和过渡效果,可以创建更具吸引力和互动性的界面。例如,使用渐变效果来平滑地转换不同的页面或状态。

 

2、3D和立体形状设计

3D和立体形状设计为UI设计师提供了更多的可能性。通过使用阴影、光照和深度效果,可以创建更立体、更有层次感的界面。例如,使用3D旋转效果来突出主要内容或使用阴影效果来增加界面的深度感。

 

3、可定制形状设计

随着用户对个性化需求的不断增加,可定制的形状设计变得越来越重要。用户希望根据自己的喜好和需求来调整界面。例如,允许用户自定义选择自己喜欢的页面主题风格。

 

总结

在UI设计中,精美形状设计的关键是深入理解用户需求,注重细节,保持一致性,勇于创新,不断提高技能水平。这样才能创造符合用户口味的界面,提升用户体验。简洁地说,好的形状设计来源于用户需求、细节、一致性、创新和自我提升。

以上总结仅代表个人观点,如有不足欢迎大家补充互相进步。



作者:散落的那些
链接:https://www.zcool.com.cn/article/ZMTYwMTYyNA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

【设计理论】UI设计体验如何提升?

杰睿

企业多产品线模式下,UI体验文化打造、UI设计质量品控5个方面阐述项目快速、规模化提升多产品线整体体验中的方法论和实践经验。

 

 

前言

SaaS 产品体验要求越来越高,用户体验已经成为产品竞争力的重要组成部分,怎样在多业务线的产品环境中做好体验设计,本文从贴合业务线的设计规范、敏捷易用的前端组件库、产品研发协作流程保障、UI体验文化打造、UI设计质量品控5个方面阐述项目快速、规模化提升多产品线整体体验过程中方法论和实践经验。

 

关键词:

用户体验设计;UI设计规范;多产品线;体验文化;UI设计落地

 

面对多产品体系,多产品线,需要积极寻找和探索适合我们客观情况的最佳实践,我们面临的问题有:

1.过往以功能堆砌为主、基本“能用”,缺乏平台规范和一致性,体验不足。

2.产品线多、体量大。

3.客户对产品体验要求越来越高。

4.产品历史包袱、修复改动困难。

5.对用户体验认知不一,协同、沟通成本高。

6.重复的开发成本。

7.第三方组件与业务的匹配度不佳。

 

 

 

 

解决以上几大难题,我们启动了UI 设计规范的搭建、UI组件库的开发等,让规范和组件库成为各产品线坚实底座的一部分,使用户体验文化赋能前端和产品经理,协同 QA 力量一起推动产品体验升级,以下整理分享的实践方法适用于中小型UED团队支撑复杂、多业务线的企业,本文尝试从以下几个方面总结和提炼实践经验,跟业界同行探讨。

 

 

贴合业务线的UI设计规范

 

设计规范体系的搭建对于新的团队,如何从复杂海量的业务场景中制定出一套适用于自己产品的UI设计规范,是第一道待翻越的高墙,完整的设计规范应该是包含视觉规范与交互规范,本文主要针对设计规范实践过程进行阐述。

 

贴合场景的设计规范:

虽然市面上已经有众多成熟的设计规范体系可供使用,但是当前我们所处的产品阶段、多业务 线以及复杂的业务场景等综合因素,决定了需要重新搭建一套符合我们自己业务场景的设计规 范体系。

 

 

 

 

UI规范效益最大化:

一旦我们决定制作规范,就要把规范当成一个产品去做。去梳理一套高效合理、可复用的制作流 程,去分析产出什么样的「规范产品」才能产生最大的价值。 依据规范效益模型,在规范的制定中尽可能的提高规范的通用性至90%,先解决统一性,再解决场景细分,打造高质量通用的模式库以提高质量和效率,并力求让更多人从这套设计体系中获益, 从而让规范体系发挥更大的价值。

 

 

 

 

UI规范制定的策略:

明确用户对设计规范的诉求,构建适合产品的UI设计规范,首先,需要明确规范体系的用户群体经过设计团队多轮调研,确定设计规范面向的目标用户群、基于核心用户的诉求,为后续规范内容框架的制定提供依据。

 

 

 

 

确定UI设计价值观:

产品历史包袱重,系统结构复杂,在提升用户体验时,内容表达「清晰明确」是第一要务,例如尊重已经形成的用户习惯,优化改造时,注意版本之间的衔接,让用户「清晰明确」,这也是为什么将「清晰明确」作为价值观之首,另外提升效率是企业级产品用户体验的永恒主题,同时兼顾系统的简洁与一致。

 

 

 

 

梳理UI规范框架:

UI设计规范包括设计价值观、全局规则、组件库、模式库、典型页面、移动端规范和设计资源框架整理主要从以下3个方面进行:

1.梳理现有组件,剔除不使用的部分 。

2.同类竞品的框架借鉴,查漏补缺。 

3.场景验证,与业务场景深度结合经过充分论证和梳理,对规范框架做了重新定义,增补了业务缺少的内容。

如上图所示,例如对高频的工具栏组件的补充,典型页面的补充,增加模式库以及全局规则,当前第一个版本的规范框架是基于业务场景优先级最高的内容进行制定,更多的规范内容的增加依托于不断的迭代,逐渐完善规范框架。

 

 

 

 

规范内容的制定及评审:

组件规范包含:变更记录、组件定义、何时使用、组件的类型、组件的响应。

 

 

 

 

规范内容制定的原则: 

1.有明确场景可依。

2.精简不必要的分支 例如在定义表单规范时,对于表单标签的对齐方式做了统一的约束,标签右对齐,输入框左对齐全局保持统一。

 

 

 

 

逻辑正确、规则明确易懂: 

例如常见的alert (警告提示)名称调整为常驻提示,语义更贴合场景,便于理解。

 

 

 

 

规则的可拓展性,多场景的兼容性: 

产品架构是PC端到移动端的自动适配,因此在组件设计的时候需同时考虑PC端与移动端的对应关系以及两端场景的兼容性。

 

 

 

 

协作及敏捷迭代: 

规范发布后,伴随着实际项目的检验,业务场景的扩充变化,如何高效的对设计规范进行迭代,决定了设计系统能否持续的走得更远,规范内容定期评审,必须通过业务、技术、设计评审,确保规范是可用的、可落地并且易于使用的规范后期不同的规范模块专属人负责,同时有backup,可以帮助走查复盘双重保障规范的质量。

 

 

 

 

敏捷易用的前端组件库: 

复杂的业务场景和多产品线特点,快速打造一套敏捷易用、高质量并符合实际业务场景的前端组件库,是提高产品研发效率、改善UI质量、提升用户体验的关键。

 

 

敏捷易用的前端组件库

 

复杂的业务场景和多产品线特点,快速打造一套敏捷易用、高质量并符合实际业务场景的前端组件库,是提高产品研发效率、改善UI质量、提升用户体验的关键。

前端组件库建立目标: 

1.提高开发效率,对高频使用、通用组件进行代码化封装,避免重复开发工作。 

2.提高开发质量,通过各类业务场景和业务线的锤炼,沉淀组件代码最佳实践。 

3.提高产品体验,组件封装代码化,减少在多角色协同中因为理解偏差、信息传递问题等导致的不确定性和结果不可控性,不同业务线、不行项目、共用一套基础代码,保证体验的一致性,组件的组织形式: 结合实际业务场景和原子设计理论,将组件划分为不同颗粒度:基础组件、业务组件、典型页面 组件,以适用于不同研发场景使用。

 

 

 

 

1.基础组件,基础组件为组件库最小颗粒度,构成系统界面的基本构件。 

2.业务组件,在基础组件的基础上,结合具有共性业务特征的业务场景,梳理出具有业务特征的 业务组件。  3.典型页面组件,梳理具有业务特点的典型页面,相比基础组件和业务组件,典型页面更加具体, 为用户提供具有代表性的内容和框架,并准确描述用户最终看到的内容。如列表和左树右表典型 页面组件,作为最为常见的页面结构,各业务场景可复用页面组件,保证了页面组件内各基础组 件的一致性,最大程度的实现不同产品线产品中页面体验的一致性。

 

 

 

 

推进前端组件库落地执行: 

前期设计规范落地到组件库过程中,面临诸多问题和阻碍,比如开发落地质量不高、内容遗漏、 各方理解不一致、验收及修复问题不到位等问题。处理这些问题对UI团队资源造成很大消耗, 通过总结复盘前期组件库落地时的经验和教训,梳理落地执行流程,在新的协作流程下,新一 批的组件开发不论在协作效率和开发质量上都有质的提升。

 

分层推进: 

组件库开发是一个持续迭代的过程,考虑到组件库开发资源极为有限且无专职负责人员,在跟组 件库开发团队协同过程中,我们通过分步开发来解决组件库更新优化的问题并通过不断优化协作流程来助力组件库高效落地。

前端组件库分步开发原则: 

1.优先级原则,优先开发适用于业务线普适场景的组件。 

2.紧急性原则,对于急需的业务线所需组件优先开发。 

3.快速可实现原则,开发实现成本高的组件暂缓处理。

 

 

 

 

自查走查验收: 

组件UI责任人梳理出下属组件需开发落地的细节点,整理为文档,待开发人员完成组件开发后,自行参照UI提供的自查文档,查漏补缺,保障进入UI验收环节的前端组件不会出现较多的缺陷,降低后期走查和沟通修改的工作量,同时监督开发人员提高组件落地还原度和质量。

 

 

 

 

组件库的持续迭代: 

UI团队通过一套标准的流程来把控组件库迭代的质量,在日常工作中经常会收到产品经理或项目 方提出新的组件需求或对现有组件的优化。UI部门作为推动组件库搭建的核心环节,需要以全局 和更深入的视角加以判断把关,保证前端组件库内容的普适性和高质量,避免组件库内容冗余, 降低研发维护成本。

 

 

 

 

产品研发协作流程保障: 

好的过程是好的结果的有力保障,一个业务需求从产生到开发落地需要经过多角色协同、一系 列环节。必须依靠规范的研发协作流程,确保各角色清楚自己职责以及如何跟上下游衔接,同 时我们也希望协作流程能够确保设计资源可以向重点业务模块倾斜,以及发挥各个角色可以发 挥的作用去共同提升产品体验。

 

 

UI角色需融入规范化的研发流程

 

UED团队建立之初,我们面临的首要问题是:需求随机,完全取决于各产品线和产品经理 个人,为了解决这个问题,我们制定了UI融入研发体系的流程以解决合理、有效利用UI资 源的问题。

企业级产品特点、多业务线、大量面向管理员用户的具有相似页面结构和交互模式的业务 模块、产品经理跟交互团队人员配比等因素都决定了并非所有需求都需要流转到UI团队进 行设计,在判断哪些需求需要流转至UI团队设计时,我们给出了如下指导性方向: 

1.用户量角度,大量终端用户使用的场景,例如订票、报销、采购页面 。 

2.用户重要程度角度,核心、重要用户使用的场景 eg.公司领导、决策层。 

3.通用性角度,通用组件或框架,需要UI通盘考虑各个业务线场景需求进行设计。 其他需求则主要由产品经理进行设计,UX以评审方式轻度参与。

 

 

 

 

协作流程迭代,UI验收成为必要一环: 随后我们又面临新的问题:设计还原度差,被公司老板生动的形容为:看设计稿是“精装修”, 开发落地后就成了“毛坯房”了。为尽可能确保设计还原质量,我们在研发流程中明确了所有涉 及前端页面的功能需求都需要在研发协同工具中流转到UI负责人验收,在产品团队TAPD中记 录UI缺陷、标明严重程度,对于 “严重” 级别以上UI缺陷,禁止发版。

 

 

 

 

UI工期评估合理化:

为了既能尽力配合各产品线迭代计划又要争取合理UI设计时间、保证产出质量,合理评估设计周期对UI人力管理尤其重要。对此,我们对设计需求分成了ABC三级进行评估。 对于A和B级需求,通常模块较大,先有UI设计方案再去分期迭代开发,对于这两类需求,在评估 模型中给出了大致工期概念,比如以月为单位,大于1个月或2个月。

对于C级需求,通常为产品经理先排进某个迭代再来提UI设计需求,设计范围相对明确,我们则结合典型页面数量因子和设计难度因子给出了UI工期大概评估公式,以天为单位。 

1.设计难度因子:根据业务线的复杂程度而定,范围为(0.8~1.5)。 

2.典型页面数量因子:评估需求范围规模(N)。

 

 

 

 

 

设计体验文化打造

 

UI设计团队在协作过程中面临诸多挑战:产品线多、产品逻辑复杂、研发链路长、各级人员对产品认知及重视程度不一、好的体验设计难落地、沟通成本高等问题,想要解决这些问题,若仅靠UI团队自身力量是不够的,需要动员公司各个环节和人员重视用户体验,共同促进产 品体验提升。

搭建体验文化灌溉机制:

UI部门通过多维度的体验知识内容矩阵、多渠道多场景全员覆盖,普及和加深各级对产品体验 价值的认识,提升产品体验思考力和洞察力,帮助企业以新的视角思考业务、产品研发和用户 体验的关系,赋能产品经理及研发人员高质量的输出,“以用户为中心”和“打造产品极致体验” 的价值观根植与企业文化中,指导研发流程中各项工作最终影响到产品的战略层、范围层、结 构层、框架层和表现层这5个产品体验维度,以实现企业产品的“极致产品体验”目标。 通过搭建体验文化灌溉机制,提升全员体验意识,能为产品研发带来长久的价值: 

1.提高设计还原度 

2.减少培训成本 

3.提升跨部门沟通效率 

4.提升UI团队影响力 

5.提升客户满意度

 

 

 

 

体验文化落地实践:

针对不同类型的体验知识,我们采取不同的传播渠道进行透,以期达到最好的效果,避免形式化, 将体验文化渗透、学习落到实处,最终影响产品研发的各个环节。

 

以下为UI团队在企业体验文化 推广的主要渠道和方法: 

极致体验公众号主要发布产品体验的基础原理,体验价值、项目复盘、常见体验问题等深度长文。让公司各级人 员认识用户体验及价值,让用户体验理念深入人心。 

体验知识小卡片整理产品体验小的知识点,阅读学习成本低。利用员工碎片时间,对细小体验知识点的学习,积 跬步,至千里。 

直播宣讲针对重点且复杂的产品体验内容,如交互规范宣讲、重点问题复盘、产品经理及开发人员应知应 会的知识点,采用宣讲直播的方式,更好的对内容进行详细解说和疑难问题沟通。 

体验调研分享UI部门成员对核心竞品进行体验调研,整理分析后对产品经理及相关人员进行分享,赋能产品经 理,为产品的体验设计提供新的思路。

 

 

 

 

 

UI设计质量品控

 

UI团队专业水平一定程度上决定了公司产品体验的上限,持续提升UI自身专业输出能力可以从源头提升公司产品体验。

 

设计自查:

企业级产品的大量体验问题都是设计基础问题。因此需要设计师不论在内审前,还是内审过程中都要牢记设计原则,查漏补缺,守住底线。我们在部门内部制定了一套适合企业产品的UI自查表来检查设计方案,通过这些自查点来避免产品中出现基础体验问题,从UI设计师自己这里 把好第一道关。

 

 

 

 

在日常工作中,UI自查表始终占据工区的醒目位置。在评审过程中,大家也会通过线上文档的形 式来对设计原则的条目进行逐一检查。

 

 

 

 

做好UI内部评审:

设计团队内评审(Design critique)是几乎所有国内外设计团队的普遍、经典做法,可以有效提 高设计产出水平、保证团队对外输出质量。方法是普适的,但具体执行时如何做才能有更好的效果却各有各异。 在如何做好内部评审上,我们进行了如下尝试。 从“全员参与” 到 “组成内部评审委员会” 团队内评审时邀请全员参加,但发现只有少数同事发言,另外一些同事因资历浅、不了解评审产品或者积极性不高给不出建议。同时随着团队成员数量从几个增加到十几个,评审会议的时间成 本大大增加。

选取团队内相对资深和积极提出问题、建议的同事组成内部评审委员会,以月为周期轮流进行, 可以有效分散评审委员在团队内部评审上的工作负荷,并明确一次UI内部评审除了内部评审委员 会还有哪些关联同事需要参加。 关于邀请评审内容关联同事,比如“消息中心” UI评审跟另外一位同事负责的“讨论消息”有关联,则需要邀请这位同事一起评审,以便发现关联问题,整体考虑设计方案。

以上参与评审机制明确在团队内部协作工具上,做到人人清楚。另外,对于评审建议,要做到有 记录、有回应、有跟踪,确保有效发挥了内部评审的价值。

 

 

 

 

UI设计师的能力模型:不言而喻,UI设计师自身能力的培养是UI品控的重要一环。因此对于设计师能力培养通道上,我 们引入了以下模型。

 

 

 

 

我们将UI设计师能力归纳成了3x3能力矩阵。这可以设计师在工作中也可以有目的提升自身薄弱环节,同时也让企业对UI设计师的要求更加清晰,除此之外,我们要求UI设计师也需要多了解业务和前端知识,往前多走一步,跟上下游角色更好的衔接,一方面,UI设计师需要理解业务,要能够有半个产品经理的业务知识储备, 如果能站在更高的行业视角对自己所服务的业务领域(向 业务产品经理再迈进一点)有一定的理解是更好的了,另外一方面,UI设计师跟自己的下游-前端 开发工程师也需要很好的衔接上,知道相关前端技术概念、基本页面布局和交互实现逻辑、方法,能够无缝地将界面和交互设计翻译成前端可理解的语言。

 

 

 


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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

这样的设计想法为啥我没有想到

蓝蓝设计的小编

对于产品设计师来说,在同质化的环境中我们需要具备突破创意的思维,这样才能输出差异化的设计方案。而创意离不开优秀作品的灵感启发,发现有意思的设计细节也能提高我们的设计思维。

 

今天黑马哥将会继续为大家带来一些优秀的设计细节,我们一起来反思一下,这样的设计想法为啥自己没有想到呢?

 

 

 

 

 

 

分享目录

 

一、营造顶部区域视觉感与情感化

二、主题化配图增强视觉感

三、弹幕式标签提高关注度

四、IP 强化底部标签栏图标设计

五、强化动态发布的引导设计

六、连贯性的插画突出卡片特色

七、动态表情化的评价设计

八、场景化的推荐设计

九、上下轮播的 Banner 设计

十、情感化的氛围营造

 

 

 

一、营造顶部区域视觉感与情感化

 

产品顶部区域的视觉感是吸引用户的关键,在一些功能单一的产品中,强化视觉表现力也是提升产品丰富度的有效形式。

 

比如麦当劳 App 首页的设计中,顶部区域结合温馨的场景插画进行表达,让你早上打开麦当劳就有种心情愉悦感。动态的太阳微笑画面给你一天好心情,情感化的设计不仅增强了视觉感,也带给用户美好的产品使用体验。

 

 

 

 

 

 

二、主题化配图增强视觉感

 

封面图在产品规范中相对比较难约束,通过构图、比例、固定元素和配图质量等,在一定程度上可以提高感官体验。如果是在重点突出的内容上面,结合主题化配图也可以增强视觉感。

 

之前在使用优酷 App 时,当时在重点突出热剧的设计中,就将主题化的内容融入到宫格的配图中。以统一的画面风格和设计表现形式填充封面,增强了视觉表现力,以此突出热剧的吸引力。

 

 

 

 

 

 

三、弹幕式标签提高关注度

 

在固定的结构布局中如何提高局部内容的关注度,我们需要在不改变结构的前提下进行创意融入。比如动态画面、突出视觉感、内容特异化等等,而最近发现弹幕式标签也是一个不错的选择。

 

在体验优酷 App 时,在动漫栏目中针对推荐的热播新番,想要突出的动漫结合了弹幕式标签进行强化。动感的节奏会提高用户的关注度,在不改变当前结构的基础上,不失为一种有效的解决方案。

 

 

 

 

 

 

四、IP 强化底部标签栏图标设计

 

底部标签栏图标是产品设计师经常发挥的场景,在一些节庆主题或者活动中都会定制设计。

 

优酷 App 在元旦促销活动期间,就将底部标签栏图标设计与 IP 形象结合,默认以促销主题文字展示,点击状态以 IP 形象显示。图标与活动相结合,不仅突出图标视觉表现,也营造了活动氛围感。

 

 

 

 

 

 

五、强化动态发布的引导设计

 

对于靠内容吸引用户参与度的产品来说,提高用户发布动态的意愿度至关重要,突出动态发布的吸引力也能起到促进作用。

 

会玩 App 在动态发布的引导设计中给出了不错的思路,未发布动态时会以形象化的空状态设计进行引导。动态发布的按钮旁以俏皮可爱的形象进行引导设计,提高了按钮的吸引力,让用户有种参与的冲动。情感化设计的引导不仅可以增强感官体验,也更容易攻破用户的防备心理。

 

 

 

 

 

 

六、连贯性的插画突出卡片特色

 

卡片式设计已经成为主流的产品设计趋势,信息的归纳感可以提高识别效率。探索卡片设计的表现特色尤为重要,重点在于卡片造型和内部视觉表现力的发挥层面。

 

麦当劳 App 在主内容的卡片设计上运用了配送场景插画,连贯性的插画突出了卡片特色。插画场景结合了品牌图形,增强了麦当劳的品牌曝光度;白天和晚上还以不同配色风格和细节进行差异表现,无论是想法还是设计细节都非常不错,是一个挺有创意的案例表现。

 

 

 

 

 

 

七、动态表情化的评价设计

 

用户评价可以反馈服务的质量,进而做出产品迭代或者服务调整的思路。如何提高用户参与评价的积极性,需要产品设计师多多探索啦!

 

最近在使用顺丰速运小程序时,完成快递业务之后进行评价,表情化的星级评价非常有意思。不同等级以不同的表情呈现,动态表达非常形象生动,让人不由的挨个体验。动态表情的形式提高了评价的关注度,情感化的表达让用户更愿意参与评价,提高了评价的体验度。

 

 

 

 

 

 

八、场景化的推荐设计

 

针对电商类产品来说,商品/店铺推荐模块出现频次较高,吸引用户关注度自然成为了设计的首要目标。

 

在体验 Mars App 时,在生活超市推荐的设计中,模拟了便利店的场景形象。真实感的场景表达带给用户亲切自然的购物体验,同时也提高了用户对于该模块的关注度。

 

 

 

 

 

 

九、上下轮播的 Banner 设计

 

轮播 Banner 图算是产品设计中最常见的模块,在移动端的设计中通常左右轮播为主,最近体验到上下轮播的案例,打破常规也不失为一种新的设计思路。

 

在 Mars App 的首页 Banner 图以上下轮播进行交互,左侧固定展示定位城市的天气等信息,提高了 Banner 位置的利用率。Banner 与金刚区悬浮在特定的背景上,带给用户沉浸式的感官体验。

 

 

 

 

 

 

十、情感化的氛围营造

 

情感化的设计可以让产品更有温度,增加用户对产品的好感度。配合传统节日或者节气主题进行表达是相对比较普遍的形式,会在产品主题和视觉区域进行氛围营造。

 

在清明节期间体验飞猪旅行 App 时,顶部区域以踏春的场景营造氛围感,还在搜索区域以青团(青团是江南人家在清明节吃的一道传统点心)替代搜索按钮。情感化的设计营造不仅体现了产品的温度,也带给用户对于节日的场景体验。

 

 

 

 

 

 

小结

 

禁锢我们思维的不是我们的技术,而是我们的眼界和设计感知。发现优秀的设计并总结和转化,才能让我们打开禁锢的思维,在优秀的基础上输出更好的设计解决方案。

 

本文对于设计的理解阐述属于个人见解,不足之处欢迎大家留言补充,我们互相进步。

 

 

作者:黑马青年(vx: heimaux)

本文由 @黑马青年 原创发布。未经许可,禁止转载。



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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

点击必看!超全Banner设计秘籍,打造吸睛之作

杰睿

Banner设计是最常见的一种广告运营形式,是我们设计师在日常工作中经常接触到的需求。Banner设计看似简单,实则囊括了平面设计、设计心理学、用户研究、文案设计等多领域的知识点,那么我们该如何做好一张“优质banner”呢?下面我总结归纳了自己平时做banner的一些心得经验与各位大佬交流探讨,有不足之处,欢迎指出。
超全面的banner设计指南
 
 
一、banner的作用
Banner在运营工作中具有吸引注意力、提高转化率、传达信息、增强品牌形象、引导用户行为和营造活动氛围等多种作用。因此,在运营工作中,需要根据具体的需求和目标,精心设计并合理运用Banner,以实现更好的运营效果。
超全面的banner设计指南
 
 
二、banner的常见类型
在banner设计中,我们常见的几种设计类型,大致分为照片类、文字类、插画类、综合类四种设计类型。
 
1.照片类
照片类banner以照片为主题,照片具有直观性和视觉冲击力强的特点,能够迅速吸引人们的注意力,增强视觉效果。可以直观地表达产品的特点和卖点,使得信息传达更加简洁明了。具有记忆性和识别性,能够让人们快速地回忆起品牌或产品,增强品牌形象和知名度。可以结合不同的创意元素和设计手法,如手绘、摄影、合成等,营造出独特的视觉效果和品牌形象,提升宣传品质。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
2.文字类
文字型Banner以文字为主要元素,能够直接传达信息,清晰地表达广告的主题和内容。不需要过多的视觉转换,用户可以快速地理解广告内容,提高广告的接受度。可以通过运用各种文字技巧,如标题、内容、标语等,吸引用户的注意力,激发他们的兴趣和好奇心。可以针对不同的受众群体,通过文字的精准表达,达到精准传播的效果。文字型Banner的内容易于复制和分享,可以通过社交媒体等渠道进行传播,扩大广告的覆盖面。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
3.插画类
插画类型Banner以插画为主要元素,具有强烈的视觉冲击力和艺术感,能够吸引用户的注意力并留下深刻的印象。可以结合各种创意元素和设计手法,如手绘、矢量图形、水彩等,营造出独特的视觉效果和品牌形象,提升宣传品质。插画类型Banner的插画具有记忆性和识别性,能够让人们快速地回忆起品牌或产品,增强品牌形象和知名度。可以适应不同的宣传渠道和媒体,如网页、社交媒体、户外广告等,使得宣传效果更加广泛和有效。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
4.综合类
综合型Banner综合运用文字、图像、视频等多种元素,结合产品特点和宣传目的,营造出独特的视觉效果和品牌形象。可以通过创意性的设计和排版,将各种元素巧妙地融合在一起,形成独特的视觉效果,吸引用户的注意力。可以通过精准的文字和图像传达产品或服务的特点和卖点,使得信息传达更加精准和有效。以包含交互元素,如按钮、链接等,使用户能够与广告进行互动,增强用户体验和参与度。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
三、banner的常见布局
在banner设计中,我们常见的几种设计布局分为居中布局、左右布局、上下布局、发射状布局、对角线布局五种常见布局。
超全面的banner设计指南
 
 
1.居中布局
居中构图是一种将主体文案放在画面的正中心进行构图的方法。这种构图方式能够突出主体,使画面容易取得左右平衡的效果。居中构图的特点在于能够将画面的各个元素有机地组织起来,形成一个有机的整体,使画面具有强烈的视觉冲击力和平衡感。同时,居中构图还能够强调画面的主体元素,突出主题和重点,提高视觉冲击力和艺术感。
超全面的banner设计指南
 
 
2.左右布局
简单理解就是将banner文案主题排版在画面的左边或右边,这里的左右不仅仅指的是居中左右,也可以是左上或者右上。其余的空间可以摆放商品、模特、点缀等元素。对于横版海报来说,左右对齐是将背景元素和文字放置在相对的区域,从而达到一个画面的平衡,这是常见的横版排版方式。这种构图形式最常见,容错率也比较高。可以根据版面内容的信息量划分画面的空间,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
3.环绕式布局
环绕式布局能够有效地吸引读者的注意力,因为它通过向四周扩散的方式,引导读者的视线,从而强调重点信息。相关元素围绕文字形成环绕效果,有效的强调文字,但在单一的文字排版会造成视觉中心留白空间过大,画面太空,这时的文字设计就需要更大更加突出,字间距相对拉小。设计上装饰性会更多一些将文字设计更加偏向图形化。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
4.上下布局
上下布局通过将信息按照重要程度进行排列,能够更好地展示出信息的层次感和主次关系。通常会把重要的信息放在顶部,次要的信息放在底部,从而使得整个banner的信息展示更加有逻辑性和条理性。通过将图片和文字进行合理的排版和搭配,可以创造出强烈的视觉冲击力,从而更好地吸引消费者的眼球。上下布局比较适合在长页面上进行展示,因为这种布局方式可以更好地利用页面空间,使得整个页面的信息展示更加流畅和连贯。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
5.对角线布局
"对角线布局"是一种在Banner设计中打破常规的布局方式,其特点是将文案和图形等元素放置在对角线上,以形成视觉上的冲击力和平衡感。对角线布局改变了常规的横竖排版方式,能够吸引读者的注意力,增强画面的新颖感和创意性。通过在两个对角线上放置相应的元素,可以保持画面的平衡感和稳定性,避免过于倾斜或偏重。对角线布局可以将重点信息放在画面的对角线上,通过位置的特殊处理,突出信息的传达效果,增强记忆度。可以有效地利用画面的空间,将元素放置在对角线上,增强画面的空间感和立体感。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
四、banner设计的四大要素
首先我们将一个一个运营 banner 按照组件层级进行拆分。分为:文字层、配图层、装饰层、背景层。
 
文字层:
文字是banner中必不可少的元素,包括标题、副标题、标语等,用于传达banner的主题和信息。
 
配图层:
配图是banner核心部分,通常包括产品、品牌、人物等图像,以及与之相关的文字内容。
 
装饰层:
装饰元素可以增强banner的美感和吸引力,通常包括图形、线条、颜色等。
 
背景层:
背景是banner的基础,可以选择不同的颜色、图片或纹理作为背景,以衬托出整个banner的主题和风格。
超全面的banner设计指南
 
 
1.文字层
在banner设计中,文字层是核心内容展示,以展示主要文字信息为主。通常包括标题、副标题、标语等元素。文字层的作用是传达信息,帮助用户快速了解banner的主题和内容。在文字层的排版设计中,需要注意以下几点:
 
字体选择:
根据banner的主题和风格选择合适的字体,通常情况下,简洁、清晰的字体更具有可读性和辨识度。
 
文字排版
:文字排版要合理,要注意字体大小、行距、对齐方式等,使得文字更加易读易懂。
 
文字内容:
文字内容要简洁明了,突出重点,避免过多的文字堆砌和重复,以免让用户感到混乱和困惑。
 
文字与背景的对比:
文字与背景的对比要强烈,以提高文字的辨识度和可读性。通常情况下,深色背景上使用浅色字体,浅色背景上使用深色字体。
 
文字装饰:
为了提高文字的吸引力和视觉效果,可以使用一些文字装饰技巧,如加粗、斜体、下划线等。
 
在banner设计中,大标题通常会采用较大的字体和粗笔画,以吸引用户的注意力。为了不与大标题抢风头,小标题则会相应地变细变小,并且颜色选择也会更加弱化。字体越大,其在画面中的占比就越大,用户在看到画面时就会直接被大文案所吸引。同样地,字重越大(即字体越粗、颜色比例越重),也会增加对用户的吸引力。相反,如果字号过小、字重过轻,就很难被用户注意到。因此,在banner设计中,需要根据要传达的信息和设计风格,恰当地选择字体大小、粗细和颜色,以引导用户的视线,并突出最重要的信息。。
超全面的banner设计指南
 
 
在我们设计banner的时候,一定要突出我们的文字信息,避免过多的元素干扰。如下图所示,左图文字信息过于分散且没有主次之分,除了一个90%可以看到外,别的文字信息都看起来很吃力,无法正确让用户了解到我们的banner传递的活动信息。右图层次分明,主层级明显,用户第一眼就可以识别图片所传达的信息内容。
超全面的banner设计指南
 
 
字体的选择上也是衡量当前产品用户定位的标准,首先文字结构不能太过于复杂,再者就是符合产品的定位。比如教育类banner在字体的选择上需要字形简单而且饱满有趣,所以一些艺术手写可爱字体比较适合。
例如:站酷锐锐体、站酷彤彤体、沐瑶软笔手写体、站酷快乐体、郑庆科黄油体、站酷小薇 LOGO 体等。
超全面的banner设计指南
 
 
在人物banner或者知识分享和知识付费的场景中,为了体现高端,文字应该简洁明了,不要过于花哨或随意。一些简单的衬线字体或黑体字形可以很好地满足这个需求。这些字体具有简洁、清晰的特点,能够有效地传达信息,同时又不会过于张扬或喧宾夺主。
例如:汉仪瑞意宋、方正清刻本悦宋、方正兰亭、造字工房朗宋、造字工房黄金时代体、造字工房尚雅体。思源黑、思源宋、站酷文艺体、方正书宋简体。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
2.配图层
在banner设计中,配图层是吸引用户注意力和提高视觉效果的重要因素之一。配图层通常包括产品图片、背景图片、图标等,需要根据banner的主题和风格进行选择和设计。在配图层的设计中,需要注意以下几点:
 
图片质量
:选择的图片要清晰、高质量,以提高整体的视觉效果。
 
图片比例:
图片的比例要合理,避免过大或过小,影响整体的视觉效果。
 
图片风格:
选择的图片要与banner的主题和风格相符合,以营造出整体的视觉效果。
 
图片排版:
图片的排版要合理,避免过多的图片堆砌和重复,以免让用户感到混乱和困惑。
 
图片与文字的配合:
图片与文字的配合要协调,避免出现文字与图片的冲突和不和谐的情况。
 
在我们设计banner的时候,图片的传达信息一定要清晰明确,如果将精准传达信息的图片放在画面中,无论是否有文案,用户的直觉思维所想到的内容都会非常接近。
 
如下面两张图片,哪怕去掉了文字,我们也可以联想两家视频播放平台会员卡、促销、打折这些信息。这就是图片给我们带来的最直观的信息呈现方式。
超全面的banner设计指南
 
 
但当我们的banner出现配图与文案不契合的情况下,如果没有文案,我们没有办法准确的了解信息内容。整个banner不管从氛围还是传达信息的功能都会弱化很多。
 
例如下图汉字书写大赛,左图的配图是科技风的建模图片,如果去掉文字,我们完全无法获知这与汉字书写有任何关系,相反右图的配图我们就很容易获取到正确的信息传递。
超全面的banner设计指南
 
 
在我们设计的时候注意主体物要突出饱满,适当的增加画面的元素。主题太小或者太少,会使会面变得很空。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
3.装饰层
在banner设计中,装饰层是一种能够丰富视觉效果、提高吸引力和品牌形象的重要因素。装饰层可以包括各种图形、线条、颜色等元素,用于增强banner的美感和吸引力。装饰层的设计需要注意以下几点:
 
保持简洁:
装饰层的设计不能过于复杂或花哨,以免喧宾夺主,影响主要内容的传达。
 
与主题和风格相符
:装饰层的设计需要与整个banner的主题和风格相符,不能与主题相悖,影响整体视觉效果。
 
运用对比和协调:
在装饰层的设计中,可以运用对比和协调的技巧,以增强banner的视觉冲击力和品牌形象。例如,可以使用与背景色对比强烈的颜色,或者使用与主题相符的纹理和图形等。
 
避免使用过于夸张的元素:
在装饰层的设计中,避免使用过于夸张的元素,如过于复杂的图形、刺眼的颜色等,以免影响用户的阅读体验和品牌形象。
 
注意细节处理:
在装饰层的设计中,需要注意细节处理,如线条的粗细、圆角的大小、图形的平滑度等,以保证整体视觉效果的协调性和美观性。
 
装饰层的核心是突出主体物,过于复杂或花哨的装饰往往起到适得其反的作用,例如下面左图则过度添加元素导致过度设计,从而干扰用户对运营活动的理解和其表意性。右图为了让画面更加丰富,设计师添加一些辅助元素或图形使整个banner饱满的同时主体更加突出。
超全面的banner设计指南
 
 
然而装饰元素简单不等于装元素粗糙,例如下面左图装饰虽然简单,但是过于粗糙,使整个banner变得廉价感满满,传宣作用大打折扣。右图则使用了更为细致的装饰元素,更有利于增强品牌形象。
超全面的banner设计指南
 
 
下面说一下我们设计中常用到的几种装饰类型。
 
1.简单的几何形状
有时候,为了使传达的主题更加明确,简洁化的设计是必要的。在这种情境下,使用简单的圆形、方形、波浪曲线等图形元素可以帮助设计更加简洁、明了。这种设计方法也符合“少即是多”的理念,通过精简的图形元素来突出主题,提高用户的理解和关注度。在知识付费和学习类设计中,这种简洁的设计方法可以帮助用户更好地聚焦于内容本身,提高学习效果和知识传递的效率。
超全面的banner设计指南
 
 
2.不规则流体
在促销类电商中,为了营造促销氛围、激发购买欲望,通常会使用多色彩的不规则流体来传达降价、折扣、满减、超值、限时等促销信息。这些不规则的流体通常会围绕在主体物周围,以突出主体元素。通过这种方式,可以有效地吸引用户的注意力,并引导他们关注促销活动中的重点信息。同时,这种设计方式还可以增强页面的视觉冲击力和动态感,使整个页面看起来更加生动和有吸引力。
超全面的banner设计指南
 
 
3.立体几何
为了让设计风格显得高质感和精简,需要注重细节和品质。高品质的设计通常会使用相对规整的图形和形状,避免过于随意和繁琐的设计元素。多使用方块形状和立体几何形状可以增强设计的整体感和现代感,同时也可以更好地突出主题和内容。在设计过程中,要注意图形的比例、线条的流畅性和色彩的搭配,以营造出高质感和精简的设计风格。
超全面的banner设计指南
 
 
4.线框
人们往往会不自觉地关注被框起来的内容,因为这会引导视觉焦点。如果要营造更为严肃的气氛,可以使用封闭的线框来包围内容。而如果想要营造更为轻松和时尚的氛围,可以打破部分线框,添加一些跨越线框的装饰,以增加透气感和视觉上的趣味性。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
4.背景层
在banner设计中,背景层是整个画面最底层的部分,是衬托主体元素的重要因素。背景层的设计需要注意以下几点:
 
背景风格一致性
:背景层的设计需要与整个banner的风格一致,如果背景与图形元素风格不一致或没有处理好,二者就会显得不融合,会使画面看起来非常有“山寨感”。
 
背景作用:
背景层的作用是衬托文字层和主体元素,背景切不可喧宾夺主,弱化了文字信息或者主体元素。
 
背景颜色选择
:在选择背景颜色时,建议使用与主要内容相关的颜色,或者使用渐变色、纹理等来增强视觉效果。同时,背景颜色也需要与主要内容形成对比,以提高文字的可读性和识别度。
 
背景图片运用:
在背景层的设计中,可以运用真实的图片或抽象的图形元素,以增强视觉效果和传达信息的效果。例如,可以使用渐变背景、插画场景、放射性背景等。
 
在背景的制作上,我们要严格按照行业属性来制作。
在挑选颜色时,我们会首先考虑教育行业的通用色调,这样可以保持整体设计的专业性和一致性。接着,我们会选择那些在画面中引人注目的亮色调,它们能够突出核心信息,抓住用户的注意力。最后,我们会根据文案的内容和情感表达,选取最能呼应这些情感的颜色,以增强设计的吸引力和情感共鸣。
 
例如在教育行业banner设计时,通常使用明亮、清新的颜色,如黄色、绿色、蓝色等,以突出品牌或课程的创新、活力和学术水平。这些颜色不仅能够吸引用户的注意力,还能够传递出积极、向上的情绪。教育类banner通常会强调品牌色,通过使用品牌标志性的颜色来强化品牌形象。例如,一些知名的教育机构可能会有特定的标志性颜色
超全面的banner设计指南
 
 
金融类banner不仅需要传递出积极的情绪,还需要表达出与金融相关的情感。例如,深蓝色通常被视为代表稳健、可靠和信任的颜色,适合用于银行、保险和证券类产品的banner设计;金色和黄色则通常被视为代表财富、成功和机遇的颜色,适合用于理财、投资和金融衍生品类的banner设计。
超全面的banner设计指南
 
 
在banner设计中,配色比例是一个重要的考虑因素。根据业界的研究,当色彩搭配比例为6:3:1时,是最和谐美观的。这个比例指的是主色、辅助色、点缀色=6:3:1。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
在配色方案中,我们常常使用同色系、相似色、互补色和对比色进行搭配。其中,互补色搭配是一种特别重要的配色方式。然而,在互补色搭配中,为了达到更为柔和的视觉效果,我们可以采用补色分割和单边补色分割的配色方式。
 
补色分割是将互补色的两个相邻颜色进行分割,以形成更为柔和的对比效果。这种配色方式能够保持互补色的鲜明对比,同时又能够提高颜色的融入度,使其看起来更加和谐。
 
单边补色分割则是在互补色的基础上,仅选择其中一种颜色与另一种颜色进行搭配。这种配色方式可以突出两种颜色的特点,同时降低对比度,使配色看起来更加柔和。
超全面的banner设计指南
 
 
超全面的banner设计指南
 
 
五、案例思考
1、需求分析
在与客户对接需求的时候,我们经常会遇到很含糊的的需求,比如高大上、有逼格这种非常概念的需求。如果在没有了解清楚具体需求的情况下开工,很有可能交付的时候完全没有get到客户的点,造成反工,增加工作量。
 
当我们接到需求的时候,第一步不要着急马上开工,先要找对需求的方向,才能提高工作效率,避免重复改稿,与需求方沟通的时候需要主要以下几个方面:
超全面的banner设计指南
 
 
2、头脑风暴
在banner设计过程中,头脑风暴是一种非常有用的方法,可以帮助设计师们激发灵感、产生创意并最终创造出吸引人的banner。以下是一些关于如何进行banner头脑风暴的建议:
 
确定主题和目标:
在开始头脑风暴之前,需要明确banner的主题和目标,以便参与者能够聚焦于讨论的问题和方向。
 
收集素材和参考:
在进行头脑风暴之前,收集一些与主题相关的素材和参考,以便参与者能够更好地理解主题和激发灵感。
 
自由畅谈:
在头脑风暴过程中,鼓励参与者自由畅谈,不要限制任何想法或评论。可以引导参与者从不同角度思考问题,并尝试提出一些创新的解决方案。
 
记录想法和创意:
将所有想法和创意记录下来,包括文字、图形、颜色等元素。这些记录可以作为后续设计和制作的基础。
 
筛选和优化:
在记录下所有想法和创意之后,进行筛选和优化,找出最有潜力和可行性的方案。可以进一步改进和细化方案,以提高其吸引力和可执行性。
 
得出结论:
在讨论的基础上,得出一些具体的结论或提出一些可行的建议。如果没有明确的结论,也可以确定下一步的行动计划或研究方向。
 
我们以“淮北市中小学生机器人竞赛”为例,根据文案提取关键词,然后将其具像化,在纸上手绘出场景草图。
超全面的banner设计指南
 
 
3、定布局
我们采用左右排版的方式,将文案进行主次分层,主标题为“中小学生机器人竞赛”,副标题为“淮北市中小学”。根据布局方式,确保信息层级关系,‌格局Z 型视觉模型引导控制用户视觉动线‌。
超全面的banner设计指南
 
 
4、制作步骤
根据banner四大要素进行绘制,第一步定背景,框定banner整体风格以及氛围。第二步进行文字排版,将文案信息进行层级划分。第三部根据我们的头脑风暴以及草图进行主体的绘制。第四部增加画面的点缀元素,使整个画面更加丰富有层次。最后一步对页面进行最后的细节优化,一个教育类banner就制作完成啦。
超全面的banner设计指南
 
 
设计的价值并非绝对的好与坏,而是取决于它是否能够满足用户的需求并符合用户体验的习惯。一个优秀的设计不仅仅是追求视觉效果,更要以解决问题为根本目的。如果设计不能解决用户的问题或满足他们的需求,那么再华丽的外表也是空洞的。因此,设计师在创作过程中,应始终关注用户的需求和体验,以便创造出真正有价值的设计,希望这篇文章对你有用。
 
超全面的banner设计指南
 
 


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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

设计师如何洞悉用户?揭秘用户思维的真相

杰睿

 

如果说设计思维是设计师做设计的基础,那么用户思维就是你发现和解决问题的能力,到底什么是用户思维?有没有一些具体详细的解释让我们了解它呢?请看分享。

 

用户思维-环境

 

undefined

 

说到用户思维第一个必须是用户环境,环境分为设计师的设计环境,以及用户使用你的产品环境,以及物理环境,是不是有刮风、下雨的恶劣天气。

 

1.你的设计环境

 

undefined

 

上图是大多数设计师平时工作环境,每天早上我们带着一杯星巴克,用着苹果电脑,打开iMAC做着设计,效果图每张图片都精挑细选,我们也理所当然的以为我们的用户也和我们一样,大家都是用的苹果电脑,用的苹果手机?

 

2.你心中用户的环境

 

undefined

 

很多设计师作品集里面喜欢放用户画像,我们理想的用户画像都像上图一样,用户都是白领,聪明学历高,能很好的看明白你的设计,也会使用。就像我之前做支付宝,也曾以为用户都是如上图所示,其实不是。很多时候用户的场景和我们想象中相差甚远。

 

3.用户实际的环境

 

undefined

 

大家都是每天地铁里面,在没有wifi和4G的公交,地铁里。也都是用的大屏设计,各种安卓手机。

 

undefined

 

举个例子,这个「放大镜」,做设计是人都知道是代表「搜索」但是在我们走访线下实际场景时候,下沉到三四线城市的时候,很多时候人们并不认识。

 

undefined

 

三四线城市用户就觉得这个像「平底锅」,不知道是什么意思,这种情况不在少数。

 

undefined

 

家里有一台台式电脑给父母用,有一次打电话给我说,有个流氓软件经常弹窗,我教他们去我的电脑,找到「设备管理器」卸载掉即可,结果,父母问什么是「设备管理器」?

所以,你会发现,用户其实和我们心目中想象的相差甚远。我们觉得很基础的互联网知识,在他们那里可能会很复杂。

 

4.用户设备环境

 

undefined

 

机型尺寸:安卓机的机型远远比我们想象的要多,各种超大屏,国内厂商各种千奇百怪的屏幕,这些做设计都需要考虑。

 

undefined

 

操作系统:不同的操作系统,有华为系统,小米系统,魅族以及各种第三方定制的系统,这些系统上呈现效果,都是需要在设计时候需要去考虑的。

 

undefined

 

手机分辨率:安卓和苹果屏幕各种大小,和主流的分辨率,设计时候如何适配,才能很好满足主流用户的体验,也都需要设计师提前去规划。

 

5.用户物理环境

 

undefined

 

室内环境:用户在室内使用我们产品时候,是不是应该考虑如果是室内,光线可以自动的调节。比如苹果的系统,会根据用户室内室外的光线,调整亮度。

 

undefined

 

室外环境:用户在阳光下使用,那么亮度变化,阳光下字体识别度等等,都应该考虑进去。比如白天和晚上使用苹果电脑时候的场景,是否有不同,比如iOS系统的设计,也是重复考虑用户实际用户场景。

 

undefined

 

网络环境:用户在有无限和5G情况下的体验,是不是视频直接播放,减少等待,当用户在地铁手机网络不好时候,视频是不是支持缓存或者提醒用户在使用流量。所以在产品设计时候,重复需要考虑用户这种场景。

 

undefined

 

抖音和腾讯视频,在用户非wifi情况下,会提醒用户当前网络环境,提示用户注意流量使用,除了流量提醒,其实包括网络加载不出来时候,如何设计产品策略都是需要设计时候考虑的。

 

undefined

 

噪音和隐私:比如在公共场合噪音大的时候,产品体验该怎么优化,有木有可能声音自动调整大,比如微信当你外面很吵时候,直接把语音放耳边,就从外放变成内放了。

 

undefined

 

比如支付宝理财页面,资产和收益显示可以隐藏金额,保护用户隐私情况。以及支付宝在系统后台时候,可以隐藏页面。

 

undefined

 

总结下,我们平时设计中提到的用户思维,其中关于环境的考虑就包括这些:

 

用户实际环境

 

机型尺寸/2.操作系统/3.屏幕分辨率

 

用户物理环境

 

1.室内环境/2.室外环境/3/网络环境/4.噪音和隐私

 

该怎么去做?

 

undefined

 

1.一部苹果一部安卓机

 

之前在淘宝天猫时候,有些领导层会要求,必须使用安卓机作为主机,因为只有你去体验安卓机,你才能发现页面和产品有多少问题,苹果本身的系统设计比较好,问题会比较少,但安卓系统没有那么稳定,容易出BUG;所以用安卓机能发现产品更多问题,同时也能让我们更关注到真实用户的感受。

 

undefined

 

2.换位思考将心比心

 

简单来说就是做设计要有同理心,懂得如何去“换位思考,将心比心”。要学会用普通用户视角去审视我们的产品问题,用理解的心态去理解用户情绪;从用户的角度看待问题,进而增加更多看待问题的角度,找到更多设计的空间,最后达到解决问题的目的。

 

之前支付宝时候,提倡管理层要每年去倾听用户声音100小时,老板们需要每月抽时间去当「客服」,看看用户实际用我们的产品,有哪些难用的地方,从而做到真正从产品上解决用户问题。

 

 

用户思维-场景

 

undefined

 

1.理解用户从哪里来要到哪里去

 

去过迪士尼的朋友都知道,人很多,那么如何让这么多人,有效的去体验更多的项目?就必须根据场景来设计,用户从门口进来,去往哪里,每个项目的设计环节都需要思考清楚。

 

undefined

 

场景是从哪里来到哪里去:从一个场景到另外一个场景。我记得之前玩过一个迪士尼项目加勒比海盗,里面就把每个环节设计的很符合整体场景。

 

undefined

 

从入口,到航行过程中,到大海里大战,以及故事的高潮,到最后的收尾,都是从一个时间到另外一个时间,就像在电影中亲身经历。其实我们做设计又何尝不是。用户从一个入口,到最终成交转化整个链路。

 

undefined

undefined

 

所以场景思维很重要就是关注用户,每个链路的体验环节,如何去发现其中问题,找到设计撬动点。

 

2.场景是带时间维度的

 

undefined

时间维度很好理解,是用户在完成任务整个过程中的行为,常见的有前,中,后。我们还是以案例来分析:

 

买之前:

 

undefined

 

▲认知:用户打开支付宝想买理财,但他很可能从来没有买过理财产品,那么第一步他可能会去了解产品,了解里面的金融术语,比如七日年化,收益率等等。那么我们在设计时候,就要去思考,如何降低用户的认知,如何用一些浅显易懂的文案让用户理解理财。

 

undefined

 

▲搜索:用户通过第一步了解了各个理财特点,锁定要买基金产品,然后这个过程中,他会去对比每只基金的收益情况,去寻找适合他的产品。

 

买之中:

 

undefined

 

▲判断:用户终于发现了一个比较符合他心中预期的产品,然后会去比较这产品的优缺点,比如它最后想选择,收益在6-8%的一只产品,然后会去思考到底买那一只合适。

 

undefined

 

▲下单:最后用户选择了这款收益为6%的产品,然后进行交易。

 

买之后:

 

undefined

 

▲查看:最后用户购买成功了,购买后,他就会每天来看他这只产品的收益情况,每天的收益,每周收益,以及什么时候卖出去。

 

undefined

 

了解了用户的购买状态,以及场景的时间维度,我们就可以去观察这些链路,去寻找一些设计线索,去发现问题解决问题,场景思维也能帮我们设计更好的决策。其实这个思维在电商中也同样适用。

 

买之前:

 

undefined

 

▲认知:双11快到了,你在家门口地铁,公交或者微博广告里面,看见了双11的一个产品广告。其中一个商品吸引了你。

 

undefined

 

▲搜索:然后你打开淘宝APP,搜索这款产品,通过搜索的入口,进入到了店铺页面。或者你通过外面的广告页面点击到了商品店铺页面。

 

买之中:

 

undefined

 

▲判断:你通过店铺页面,看见这个商品正在直播讲解,你希望查看真实的商品情况,于是点进去,发现讲解的内容能让你更好的了解了此商品,你决定去商品详情页准备购买。

 

undefined

 

▲下单:后面你决定购买,直接淘宝下单付款。

 

买之后:

 

undefined

 

▲查看:买完后,你很想用上它,于是你开始查看物流,同时也在担心如果质量不好,你要如何发起七天无理由退款。

 

以上就是我们说的用户思维里面的场景思维,我们需要了解用户从哪里来到哪里去,同时还需要了解用户购买前,购买中,购买后的心理变化,了解这个过程中的链路问题进行设计优化。

 

 

最后

 

undefined

 

今天这篇分享的用户思维,只是一个基础框架,让我们能利用同理心,了解用户的行为特点,提升我们的用户视角,发现更多的设计问题,进而解决问题,成为一个真正解决问题的设计师。



作者:我们的设计日记
链接:https://www.zcool.com.cn/article/ZMTI2MzA4MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

 

让转化率飙升!顶尖按钮设计的20个黄金法则

杰睿

01. 按钮设计强弱表现

在整个产品设计中我们要根据信息传递的优先级对按钮设计进行主次区分,设计表达要有强弱差异。按钮设计可以通过大小、填充、描边、色相、饱和度等的不同来进行强弱差异,不同强弱的差异表现出按钮的等级:行动触发、主要、次要、辅助、禁用等。

 

 

 

 

02. 圆角设置要合理

对于按钮边框来说,我们通常采用全圆角和小圆角居多,这样显得稳重大气。而大圆角按钮并非不可用,只是相对较少,会显得按钮不方不圆的,设计表现显得不够成熟。

 

全圆角的圆角值等于按钮高度值的一半,而小圆角的圆角值我们通常控制在 1/4H(高度值的四分之一)以内(仅为个人参考,并非绝对值)。

 

 

 

 

03. 投影设置要用对色彩关系

给一个有彩色系按钮设置投影时,选择无彩色系(比如黑色)也能达到效果,只是为了得到更好的视觉效果,提高用户感官体验。我们也可以尝试基于按钮本身色相来确定投影颜色,这样得到的效果会显得更加干净清爽。

 

 

 

 

04. 投影的使用勿过度泛滥

虽然投影的运用可以使按钮更有层次感,但是也需要根据具体情况慎用。比如对于一些浅色按钮来说也许投影反而会降低按钮的识别度,使得按钮配色环境显得不够干净清爽。

 

 

 

 

05. 给按钮文字一点呼吸感

按钮文字和边框的设计要预留一定的留白,不要做“舍不得”的设计,使得按钮给人感觉很拥挤。如果你把控不好可以分析一些按钮的负空间获取经验,看看文字大小和负空间之间是否存在某种比例关系。找到这个比例关系运用到按钮设计中,也许会让你的设计显得更加成熟稳重。

 

 

 

 

06. 按钮设计别让用户思考

按钮的存在是为了引导用户进行引导式操作,而不是让用户对其产生困惑。按钮设计别让用户思考这是啥,是否可以点击,需要简洁明了的对此操作进行指引。用户已经养成对按钮外观和功能的行为习惯,如果你设计的按钮样式与“标准”差异太大,用户就会产生疑惑,影响使用体验。

 

 

 

 

07. 样式表达的一致性

当设计元素规范统一时,用户操作过程中的理解成本最低,一致性也因此成为最有力的可用性原则之一。我们在设计按钮的时候要注意样式表达的一致性,比如:按钮形状、色彩定义、风格特征等,这样会使得我们的设计可用性更强。

 

 

 

 

08. 箭头运用不是字符输入

一些初入职场的设计师会偷懒直接字符输入形成按钮内部所需箭头,这样的表达方式自然显得粗糙些。箭头要当成图标来进行设计,控制好箭头的粗细和文字笔画的粗细值接近,这样显得更有细节和态度。

 

 

 

 

09. 按钮设计主次分明

通过信息对比才能形成主次之分,按钮设计需要在风格上进行区分,达到层次结构的视觉提示。主要的按钮需要和次要的、辅助的形成差异,最大化突出主按钮的视觉效果,更好的引导用户根据设定的轨迹进行操作。

 

 

 

 

10. 按钮设计不要让用户误解

在整个项目设计规范中,我们需要避免让用户把非按钮状态的内容进行误判。在确定好按钮样式特征之后,不要在其它场景运用其样式特征或者类似的风格特征,这样会让用户产生错误的认知,因而进行无用的操作。

 

 

 

 

11. 按钮文本表达要言简意赅

在进行按钮文本思考的时候,尽量减少字符和单词的数量,内容表达言简意赅,只要能够准确传达信息识别度即可。有时候也不一定需要文本,图标可以传递的信息可以考虑文本的减少,也许可以让界面的呼吸感更强。

 

 

 

 

12. 按钮文本设置切勿换行

单行文字的可读性更高,如果出现换行就会降低可读性。我们在设计按钮的时候,确保文本内容在一行之内显示,如果设计空间不足要考虑文本内容的精简。

 

 

 

 

13. 特殊场景要灵活转变

底部按钮的运用并非固定不变,不同机型或者特殊场景的考虑需要灵活转变。比如 iPhone X 等类型的机型,由于底部需要预留主页控制器的位置,所以在设计按钮的时候需要考虑上中下的过渡衔接,这样才能带给用户更好的感官体验。

 

 

 

 

14. 按钮大小要便于点击

按钮需要方便用户进行点击操作,如果用户点击失败或者误点到周边元素,就会带给用户不友好的体验。若是带有文本的按钮,只要文字大小不要小于极限值,通常实现出来的按钮交互热区都会满足点击需求。

 

如果是纯 icon 的按钮,除了按钮大小需要控制合适以外,也要确保交互热区能够满足点击区域要求。

 

 

 

 

15. 同属板块按钮大小一致

在同属板块内的按钮设计,我们可以通过按钮的强弱来体现层级关系,不要让按钮大小不一,这样视觉平衡会受到影响。

 

 

 

 

16. 按钮设计考虑文本最大值

稍微注意细节的设计师也不会让文本的长度超过按钮宽度,这是一个非常明显的错误。但是按钮文本变得很长却是遇见过的,几个字即可表达的意思却使用了过多修饰词。在进行按钮文本思考的时候,要根据最佳的视觉效果设定一个最大值,不要任其无限制发挥,这样会使得最终的视觉效果大打折扣,甚至影响用户感官体验。

 

 

 

 

17. 保持按钮可读性

按钮设计需要考虑在不同环境下的适应度,确保用户可以一目了然的发现它。现在很多产品都适配了深色主题模式,按钮的配色不能只考虑白色或者浅色背景下的运用,需要考虑大多数背景下的适配。在进行色彩选择的时候,始终保持按钮与背景的高对比度和可读性。

 

 

 

 

18. 按钮去文本是否合理

关于按钮文本的设置需要结合信息传递的识别性和准确性,虽然纯图标显得设计简洁大方,但是需要考虑图形是否可以准确的表达其含义,不会让用户出现误解或者错误的认知。所以,按钮去文本需要根据文案代表的含义来判断,如果不需要辅助解释也能判断出按钮的意思,那么更为简洁的设计表达效果更佳。

 

 

 

 

19. 正确判断按钮颜色选择

色彩在设计中是最直观的体现,不同的颜色会传递不同的性格,带给用户认知差异。而按钮的颜色选择也并非随性发挥,需要结合品牌色和辅助色作出判断。

 

通常比较统一的标准是采用品牌色作为大部分按钮的颜色,遇到一些需要差异化的按钮会选择辅助色来表达,红色或者橙色多为行动刺激作用,不适合在非品牌色的时候滥用。浅灰色或者低饱和度的色系会带有不可用、禁用、失效等属性,需要酌情选择。

 

 

 

 

20. 按钮位置结合用户体验

引导用户作出选择的按钮应该放在左边还是右边,根据操作系统的不同也引起了设计师们的争议。比如 Windows 系统习惯将确认按钮放在左边,而苹果系统却选择了放在右边,用户运用系统的习惯会影响其行为的适应度。不过要是在移动端个人倾向于将引导用户作出选择的按钮放在右边,更有利于用户点击(特殊人群这里需要除外)。

 

有时候为了防止用户误操作,我们会将确认操作的按钮放在左边,通过助力设计让用户再次确认。所以,一方面我们要结合操作系统的习惯,另一方面也要结合用户习惯,将按钮放在最合适的位置,便于用户操作。

 

 

 

 

小结

作为设计师来说,对每一个细小的元素进行深入思考和总结,才能让我们设计出更好的解决方案。一枚小小的按钮设计,其背后也有很多需要探索的东西,本文为大家总结了 20 条经验,相信还有更多值得梳理的细节,期待更多设计伙伴去挖掘。

 



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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

写给产品总监:UI设计:软件产品的“颜值”与“内涵”,如何提高软件产品中的UI设计水准?

蓝蓝设计的小编

作为产品总监,你一定明白,软件产品成功的关键在于用户体验,而UI设计正是塑造用户体验的核心。简单来说,UI设计就是用户界面的设计,它决定了用户如何与你的产品互动,就像产品的“颜值”和“内涵”,直接影响用户的第一印象和使用感受。UI设计不仅仅是让界面好看,更重要的是好用。 它需要平衡视觉美感与功能实用性,让用户在使用过程中感到舒适、高效、愉悦。

如何提高软件产品中的UI设计水准? 以下是一些建议:

设计师需要掌握的思维模型

杰睿

关于设计思维你了解多少?

设计思维模型对于互联人来说非常重要,经常我们在评价一个候选人时候会说,这个同学系统思考差了点,或者说用户和商业思维不够。那么到底什么是系统思考,设计师该如何学会系统思考,系统思考到底能帮助我们在做设计时候有什么帮助,今天希望我的这个分享能让你了解什么是系统思考,以及它的思考模型是什么。

 

设计思维模型的重要性

设计做久了你会发现离不开流程和思维,之前支付宝一位大佬总结下来叫“左手艺术,右手科学”,艺术大家都明白,设计师是感性动物,对于美的追求是大家都是擅长的也非常有发言权,那么科学指的是我们需要通过科学的方法流程,系统的思考问题方式,让设计不止好看,同时也应该符合用户,商业诉求,满足好这3者的平衡点。

 

所以设计师,除了关注「左手」艺术的部分,同时也需要关注「右手」科学的部分。

 

设计思维模型有哪几种

设计思维模型不止是一个单一的思维模型,它包含三种思维模型,设计思维,用户思维,产品思维。今天这篇文章,我们先来了解第一个思维,设计思维到底是什么,我们该如何提升设计师的设计思维。

 

设计思维包含哪些

第一个设计思维也是最基础的,就是作为设计师,我们必须了解各大平台的设计规范,这是做任何设计的基础,如果你了解你负责的这个平台规则,那么你的设计就无法迈出第一步,所以对于刚做设计不久的同学,基础思维规范需要去死记硬背背下来,没有这个基础后面都是无用功。

 

1.知道基础设计规范

常用的设计规范,比如苹果的设计规范,里面详细讲述了,常用的苹果导航栏高度是多少,苹果的表格视图高度多大,页面中常用的设计字体字号多少,如何去适配不同分辨率,这些基础的设计原则,都统称为设计思维。

 

谷歌的material规范,也是设计师必须了解的规范,特别是需要了解它在系统层面和iOS的差异化。

 

2.知道常用设计原则

设计思维很重要一点,就是要了解基础的审美,以及用户心理学,其中排版运用比较多的格式塔原理,是做设计排版的基础。

 

相似性原则:我们会潜意识把更紧密的事物归属一组。

 

相似性原则运用:淘宝网导航菜单就是运用这种原则,根据产品类别一致,进行同类分类,这个就是运用的格式塔紧密设计原则。

 

封闭性原则:视觉系统自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。

 

封闭性原则运用:我们会自动将这些不完整的图形在脑海中封闭起来,形成一个整体图形。如图中海报,虽然文字被遮挡了一部分,或者被一些图形分割了,但是我们脑海中还是会自动脑补出设计画面。

 

连续性原则:我们的视觉感知系统倾向于连续性,视觉系统倾向于感知连续的形式而不是离散的碎片。

 

连续性原则运用:Pinterest和ins虽然卡片被下面截断了,但是我们还是会认为它和下面内容是一组的。

 

焦点原则:一个一面只有一个核心,一个眼睛,引导用户去关注你想表达的重点。

 

焦点原则运用:少即是多,苹果的很多产品就是运用一个焦点,做到画龙点睛的作业。

 

地面原则:我们的大脑将视觉区域分为主体和背景,主体包括一个场景中占据注意力的元素,其余都为背景。

 

地面原则运用:如上图案例中,我们视觉会自动将红色,绿色,蓝色当做背景,页面的几何图形会当为主体,用户的注意力也在上面,在平时做设计时候需要去营造这种空间和层次感。

 

格式塔是设计很重要基础之一,来源于20世纪的德国,也是作为设计师必须掌握的设计原则,也是你做设计的第一个需要掌握的设计基础。

 

3.知道设计是用来用的,而不是艺术

很多同学刚做设计,很容易在页面中为了体现自己掌握的某种技法,而做过了,或者设计的页面太偏向于个人喜好。这是不对的,我们的设计最终一定要是用户使用的,否则再漂亮华丽的设计都会是昙花一现。

 

Path的设计在刚出来时候,简直是业内交互和视觉标杆性产品,创新的交互细节,精致的页面表现。都很完美,但是最终也逃不过昙花不现,很大部分原因是产品定位不准,商业思考不够,没有很好解决好用户诉求,最终导致失败。所以在一个成熟的设计中,设计好用比好看更重要,我们要做的就是在这个过程中不断寻找合适的平衡点。

 

当年Facebook 出品的paper这款产品,也是业内关注度极高,把手势运用到了极致。但最后也逃不过这种命运,几乎移动市场上,没有一个产品是因为好看而活下来的,几乎最后的那些被人们每天使用的产品,都不是因为好看,而是因为好用,满足人们痛点需求。

 

所以,刚工作的设计师,在设计思维这个层面,一定要明确我们的每一个页面,一定是满足用户完成任务为第一优先级,其次考虑产品整体和品牌,公司大的设计方向挂钩。

 

4.知道设计不止是效果图,对落地负责

工作几年后,作为一个漂亮的设计效果图都不难,很多时候参考下竞品,在竞品基础上去找一些差异化创新,甚至做出一个超越竞品的设计效果图,加上真实动效,好看的图片,精心排版的文案。这些很多设计师都可以做到。但是很多设计师忽略了真正上线后的效果。

 


上面那个情况,我想大家都经历过,我们效果图做的很好,干净的商品图,标签也很规范。但是实际上线后就是右边效果,各种图上放牛皮癣,以及各种标签。

 

从业务层面来说,没有错,因为放牛皮癣可能销量更好。但是设计时候,我们是不是可以再往前一步,帮用户思考如果图片上房广告该在展示,如果文案很多时候,标签很复杂的展示规则。

 

优秀设计师不仅仅能做出漂亮设计图,同时他们也能对内容进行负责,定义好详细是内容规范。

 

之前淘宝的同事,定完一个电商的KV风格后,还会出一个详细的风格指南,里面会去定义配色,文案话术,字数,以及页面图片的展示规范,这些的目的都是对内容进行控制。

 

5.知道主流设计趋势和手法

目前很多设计师以为做UI就只有扁平化,以为大公司设计流程都是痛点分析、人群画像、旅程地图、用户调研、方案呈现。各种一堆推导,然后最终的方案简简单单收尾,同时还暴露一个很大问题,风格单一。其实UI真的不止是只有扁平化。

 

手法一:手绘简笔风格

如果你是设计日记的忠实读者,你一定看过我之前写过一些大厂的设计手法。手绘简笔就是其中一个风格之一,整体风格都是手绘线条配以低饱和度颜色,有很多趣味性和故事融合在里面。

 

Facebook改版之前的风格就是运用的这套风格,整个页面也更加年轻和时尚。

 

手法二:分形艺术风格

 

利用简单的几何图形,不断重复,形成一种新的形式,在一些背景上,一些图形和海报上经常被大量运用,只不过很多设计师并没有关注到这些风格。

 

Uber之前的规范中,对于全球的各个国家的设计,都是定义了一个国家的基础图形,然后围绕基础图形做出了一系列扩展,这其实就运用到了这个分形重复设计手法。

 

包括我们熟知是苹果相册图标,chrome浏览器和谷歌相册图标,都是运用这种手法,一个基础图形有规律的变化。

 

手法三:柔光风格

 

 

很多设计师做东西风格比较单一局限,UI发展到今天其实有很多新的风格出现,柔光风格就是其中之一,整体风格呈现出光的折射特征,颜色层次丰富,有明显的光的流动感和方向性。在设计上常用渐变,光斑,流动透明叠加手法,是目前大公司比较主流的一种风格。

整个画面有色彩流动感,背景一般是多色融合,有层次,有流动液体变化。

 

像这个案例就是色彩上跨度比较大的一个渐变,同时运用白色透明叠加方式处理,细节简单细腻。

 

支付宝之前芝麻信用的风格我很喜欢,其中就是运用的这套设计手法,背景运用这种虚实,光斑作为层次。

 

在很多可视化场景中也会运用,比如左图就是运用波浪透明叠加线条作为页面核心焦点,右边页面背景底部运用有层次的渐变和光晕。

 

手法四 :纹理风格

这个风格很多人都有印象,特别是韩国设计中大量运用了这种设计,国内电商中也会运用比较多,这种风格就是纹理风格。

 

 

淘宝的88会员,我们能看见会员页面辅助元素这些纹理效果作为背景出现在这些页面中,能很好将视觉层次丰富起来。

 

双11的宣传海报,也是运用这种几何纹理作为视觉层次的装饰。

 

考拉当年的改版设计,很核心的元素就是这个圆形,以及他的底纹运用效果。

 

这种底纹效果,很多时候也可以传递出品牌的气质,品牌的调性,左侧音乐播放默认图片,特别有品质感,右侧电商主页面的背景,清晰感觉,后面线条恰到好处。

 

当然,设计趋势并不止我今天说的这些,其实有很多,作为设计师,设计思维中很重要的点,就是关注趋势,并将他运用到你设计中去,这是必不可少的一项技能。

 

6.了解设计只是整体体验的一部分

从这张经典的图中我们可以看出,设计只是一个产品其中很小的一部分,很多设计师以为我们看见的就是一切,其实不是,就像冰山一样,表现层是最上面的一部分,冰山下面其实有很多的内容。

 

我们来看个案例,比如支付宝:

 

表现层:

视觉设计师比较容易关注的,圆润的图标,卡片的设计,扁平的风格,2.5D的插画风格,小蚂蚁的微动效,支付宝品牌蓝色,以及一些卡片的动画效果。

 

框架层/结构层:

顶部的4个金刚设计,也是用户最常用的4个功能,下面14个宫格导航,代表不同的服务入口,小蚂蚁卡片是通知入口,下面营销广告资源位,下面是千人千面或者推荐的服务卡片等等。理财页面也是如此,头部用户数钱,下面业务入口下面不同理财服务。

 

范围层:

根据用户的诉求,中间的宫格导航是动态变化的,用户也可以去根据内容需要去定义,小蚂蚁通知入口也是如此,一个小喇叭的功能,把所有支付宝的通知都收在这个地方,底部卡片根据用户习惯去展示,比如你经常点外卖那么推送你美食卡片,你比较关注疫情推荐你疫情卡片等等。

 

战略层:

顾名思义,那就是公司整体战略,从支付宝品牌升级更加年轻化,强化生活服务心智,首页新增外卖到家、果蔬商超医药等便民生活版块,并基于智能算法为用户推荐喜欢的服务,让每个用户拥有更贴心专属的支付宝。

 

所以其实所有产品都是围绕这样逻辑去设计,我们设计师要明白设计那种趋势手法,只是一部分。我们要不断的去了解最顶层,才能理解产品设计背后的规则逻辑。

 

最后

今天分享的是设计师需要掌握的思维模型,其中关于设计思维的,我们再来回顾下,设计思维包括哪些:

 

1.了解基础的设计规范;

2.知道常用设计原则;

3.知道设计是用来用的,而不是艺术;

4.知道设计不止是效果图,对落地负责;

5.知道主流设计趋势和手法;

 

 

 

作者:我们的设计日记
链接:https://www.zcool.com.cn/article/ZMTE5NDc1Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

日历

链接

个人资料

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

存档