专栏名称: IXDC
IxDC由广州美术学院设计学院、香港理工大学设计学院、网易、腾讯、华为、中国电信、中国移动、金山等单位联合发起。是全国第一个受政府认可和领导的交互设计专业委员会,致力于引领中国交互设计行业发展。
目录
相关文章推荐
西藏发布  ·  238.12万人次!这个春节假期,西藏火了! ·  2 天前  
西藏发布  ·  238.12万人次!这个春节假期,西藏火了! ·  2 天前  
网信西藏  ·  扎巴益西等人请保持电话畅通! ·  3 天前  
网信西藏  ·  西藏局地有暴雪! ·  4 天前  
51好读  ›  专栏  ›  IXDC

主题关联思维在 UI 设计中的应用

IXDC  · 公众号  ·  · 2024-10-20 08:30

正文


本文授权转自: 菜心设计铺(ID:caixinshejipu)

UI设计师除了有过硬的专业能力以外,具备好的思维能力也是非常重要的。

好的思维当然有很多很多种,今天菜心就来给大家分享一下其中的“关联”思维。

关联的意思是互相贯连,就是把已知的事物联系到一起,找到它们之间的共通点,通过这种关联性解决一些具体的问题。

我会给大家展开说说关联的5个方面,其中包括:颜色关联、主题关联、风格关联、创意关联、论点关联。

01 颜色关联

有时候我们觉得自己处理的画面不够和谐,其实是画面在某些维度上没有形成好的关联性。其中一种就是颜色关联。

以UI课同学的等级体系作业为例,优化前,徽章中有蓝色、黄色、紫色(环境光),颜色太杂了:
所以要做减法处理,把紫色的环境光去掉,橙色飘带也改成蓝色,这样就不会有问题,颜色都是关联统一和谐的:
看下作业优化前后的效果吧:
这就是让画面变得和谐统一的秘诀之一——颜色关联。

02 主题关联

除了颜色关联,还有主题关联。具体的说,是主题和元素之间的关联性。

以这张作业为例,很多同学都会用球体做装饰元素,在画面中丰富层次:
球体是一个具有普遍性的元素,和画面的关联性其实没有这么强。

其实还可以有更优的选择——采用与主题相关联的元素。

来看下同学优化后的效果,把圆球换成和游戏相关的元素之后,画面的主题感是不是更强了?
再以下方的海报为例。我们会发现滑板小人儿的周围也加入了相关的潮酷的元素,不仅使画面变得更丰富,也进一步强化了海报的潮酷主题。
元素和主题之间是相互关联的。根据主题搭配合适的元素也非常重要。

03 风格关联

我们知道,不同的设计语言会传递出不同的设计风格。也就是说,设计语言和设计风格是息息相关的。

拿设计语言中的图形来说,圆角比较容易让人产生亲近感,显现出来的风格会相对柔和一些:
而直角,相对圆角来说更加尖锐,传递出的是一种比较先锋、严谨的风格:
当我们把直角的卡片应用在一个柔和风格的界面中时,就会带来一种强烈的违和感。
由此说明设计语言和设计风格是强相关的。小到一个卡片圆角也会对设计风格产生很大影响。

这就是设计语言和设计风格之间的关联性。

04 创意关联

主要指的是生活和创意之间的关联。

我们会发现UI中有很多设计参考了生活中的物件,比如信封、工作牌:
除了对物件造型的参考以外,还有对现实生活中的一些材质的参考,比如毛玻璃:
还有对行为动作的参考,比如界面中的一些翻书动效也是模拟了现实中翻书的样子:
将生活中的事物与UI设计联系起来,能够更好的与用户产生共情,同时让设计变得更生动有趣。

除了生活和创意之间的关联以外,还有论点与论据之间的关联。

05 论点关联

在撰写文章的时候,我们一般会采用至少2个以上的论据来支撑论点,以保证文章观点的严谨性。论据和论点之间必须有紧密的关联,才能达到论证的目的。

这就是论点关联。

当我们想要发表某些观点,并希望自己的观点更有说服力的时候,通常会附上一些其他可以支撑我们观点的内容,来举证说明我们的观点是具有逻辑性的,是合理的。

假设我想表达下方这种投影素材应用范围很广,我只说一句应用范围广肯定是不够的。
根据论点关联的思维,我可以列举说明这个应用范围的“广”,比如不同的行业的作品都在使用这种投影样式。UI设计在用:
平面设计在用:
3D设计也在用:
由此说明这种投影素材的应用范围是很广的,覆盖了很多不同的行业。

这就是论点关联的一个简单的用法。

在拿着设计方案跟客户讲述,或者是升职答辩等等一些需要说服对方的场景中,论点关联就显得更加关键了。

下面就拿我的一个设计方案为例,讲讲我是如何阐述设计观点的。

这是为一款阅读产品做的主色提案,当时我们设计内部选定的是绿色。
如果我直接对客户说:我觉得绿色好看,所以用绿色。那肯定是不恰当的、不合理的,这样没有逻辑的说法也不能够打动客户接受这个颜色方案。

但当我分别从用户体验、目标人群和颜色寓意三个维度去分析、去阐述为什么选择绿色,这个逻辑是不是马上就变得合理非常多?

首先,绿色是护眼色,可以缓解眼疲劳,在阅读过程中能提供更好的用户体验;其次,因为阅读app目标人群比较广,没有固定的性别倾向,绿色作为一个中性色,没有明显的性别指向,所以也是比较合适的选择;最后,绿色代表“希望”,寓意新晋业务成长。

一顿演讲下来,客户也是非常的认可这个方案,很快就通过了。

用多个论据去支撑论点的方法是一用一个准,大家也可以多多实践起来!

总结

“关联”可以串联起我们无论是工作还是生活的很多方方面面,只要我们把思维打开,很多东西都是互通的,这可以帮助我们成倍的发挥出某个点的优势,从量变产生质变。

好啦,今天的分享就先到这里了,以上就是菜心UI通用武器库——关联之五来神掌,如果大家觉得有帮助,欢迎多多点赞、转发、收藏和评论,菜心将持续给大家分享更多系统性干货,我们下期见!

福利时刻!!!



IXDC赠书活动 《变革者:领导者们是如何设计变革的》 今天下午5点开始抽奖! 点开书名或打开图片链接参加活动,即有可能获得实体图书一本噢!】

-END-

文章转载: 菜心设计铺 版权归原作者所有

原文链接:https://mp.weixin.qq.com/s/UyqkowyeQC_j3Sq-PsKVtw

版权声明:“IXDC”所推送的文章,除非确实无法确认,我们都会注明作者和来源,本公众号对转载、分享的内容、陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证,仅供读者参考。部分文章推送时未能与原作者取得联系,若涉及内容或作品等版权问题,烦请原作者联系我们,给出内容所在的网址并提供相关证明资料,我们会核查后立即更正或者删除有关内容!本公众号不承担任何责任,并拥有对此声明的最终解释权。

联系微信:18802086168

联系电话:18802086168

编排 | 巫 欢

终审 | 苏 菁







请到「今天看啥」查看全文