首页

设计的意义

蓝蓝设计的小编 设计思维

保罗·兰德说:“设计是一种行为,是想象力驰骋的过程和产物。”

作为设计师,设计是我们的专业,也是我们用来解决商业问题的工具。

我们过去也许都曾思考过类似设计的价值、意义或是本质之类的问题。思考这类问题在某种意义上或许都是为了当我们遇到困难、冲突、低谷或是不确定性的时候给自己找一些能够坚持下去的理由。

设计师在从业的不同阶段,对设计的理解不同。从追求工具技能到表现力、方法论、风格到影响行业甚至社会审美意识等等。不断的锤炼之后,对设计意义也会有不同理解。

我们奉为的大师,都擅长用自己的知识架构定义对设计的理解。

保罗·兰德就是一位我们公认的设计大师、艺术家。他是当今美国乃至世界上最杰出的图形设计师、思想家及设计教育家之一。他最出名的企业标志设计,包括IBM,UPS,ABC标志以及为史蒂夫·乔布斯设计NeXT.那段经典桥段。

去研究这些前辈们如何看待设计、理解设计以及如何与设计相处一生,是另一种设计哲学的思辨。

保罗·兰德说:

“设计是一种行为,是想象力驰骋的过程和产物。”

设计表现可能看似是简单的组装、排序或是美化的过程,但设计的过程也是赋予信息意义的过程。不断的简化、厘清、修饰甚至可能去说服、去取悦过后,设计就是把散文变成诗歌的过程。

设计师是孤独的,大部分时候他们是一个人在战斗。

设计是个人行为,即便在设计成熟度较高的国家、企业或是大型团队,设计师仍需在一线才能真正掌控在这场战斗中可能遇到的极其细节的变化和给人传达的感受。

设计需要冲突来加深传达的“戏剧性”。但设计过程也面临种种冲突。这是设计的商业价值与艺术价值平衡的过程。正是因为这种关心很难平衡,才会出现雇主与设计师之间的冲突。

企业的目标是达到商业、经济、政治甚至社会性目的。对设计师而言,设计是一种创造和实验行为。通过这种行为来平衡之前的目标。

设计品质最终决定设计师与核心决策者之间的关系。关心越是紧密,设计的产出就越有可能出彩。这其实并不难理解,对设计完成度有高追求的企业,CEO也大多都跟设计团队或是设计咨询公司有较为紧密的往来。就比如苹果的乔布斯与乔纳森是我们都公认的CEO与设计师高紧密度关系的典范。

当今社会,市面上依然存在太多糟糕的设计。

一来,核心的决策者对设计专业的理解度不够。

二来,很多决策依赖于市场调研,既得利益的权重大于长远利益。

再就是我们回避不开的话题,设计师在某种意义上话语权不够。

抉择者很多时候不了解或是存在对某类元素特定的喜好偏见,他们有评价权,但却缺乏对设计专业知识的储备。所以就会普遍出现外行指导内行的情况。过往(现在好一些),他们将设计师看做一套绘图工具,一个合作供应商而不是一个业务团队里重要的组成部门。

体系完整的企业可能会引入市场调研团队,调研团队为营销提供定位信息,设计师来解读和演绎那些信息。如果调研团队能理解设计师的工作过程与其产生共鸣,就有可能促成正确决策甚至产生惊喜的创意作品。

但很多时候,我们听到了太多这样的回复:

 

我喜欢它;

我不喜欢它;

它太简单了;

它太复杂了;

它让我想起某某...

常常一句“我不喜欢”就可以终结任何设计作品。就像当初一位IBM的主管第一次看到这个条纹logo时嘲弄到说“这东西让我想起格鲁吉亚的锁链囚犯”。

每个人所能感知的信息都不尽相同。

有人既看不到logo的意义,也看不到它的功能。也正因为过于用喜好而不是专业去评判,才让糟糕的设计一直留存于我们的世界。而大众对糟糕的设计要比对好设计更加熟悉,于是大家习惯于选择不好的设计,因为和他们朝夕相处。

新事物让人感受到威胁,而旧事物让人安心。

要判断一个设计的内在价值,决定性因素不是使用期,而是它所设定的“品质预期”。这是设计师的价值,也是设计师该练就的“知觉”。

何为知觉?

我们可以把知觉暂定为“瞬间的洞悉”。设计师在做设计决策的时候大部分都是依赖过往的知识储备以及惯性技能。不断的尝试,都是通过瞬间对各方向的可能性判断。

本能、预感、冲动、洞悉之后的综合“洞悉”,这就是知觉。

说到logo,我们常把logo当成品牌价值传递的重要符号。

它是一面旗帜、一个签名、一个路标。大部分时候,雇主期待logo能描述一个行业,但历史上最成功的logo都没能做到。苹果、劳斯莱斯、可口可乐、或是IBM等等...不可否认的是它们都是历史上最成功的logo,但它们却无法做到能传递它们的行业属性。因为logo远不如它所代表的产品重要,它所代表的比它看起来的样子更重要。


因为只有logo与它所属的公司、产品、服务联系起来时,它才具备真正的意义。一流的产品和公司的logo传递出一流的形象。反之一个公司如果是二流的,那么它的logo最终也会被归为二流。

 

 

logo首先要告诉人们“是谁”,而不是“是什么”。这才是它最基础且最重要的功能。它所扮演的角色就是“指示”。“简洁”是达成指示的手段。所以设计过程中的特点、好记以及清楚都是需要设计师在打磨细节前首先要做好的决策。一个复杂、挑剔、模糊的设计潜藏着自我毁灭性的风险。

 

“好的设计带来好的生意”。但不可否认,即使不好的设计,也可能带来好的生意(比如下图)。如果这样,还需要好的设计么?

好的设计可以增添额外的附加价值,很多时候,也许光看着它就能给人们带来快乐。它们更尊重感官,并通过这种友好的感官体验,给企业带来回报。人们更容易记得精美而不是一团糟的形象。它折射出一个考虑周全,目标明确的企业,反映了它的产品或者服务的品质。所以,这个世界需要好的设计,设计师要做的就是用设计向世界传递一些更有价值的观点。这是设计师的工作,也是设计该有的意义。

「大宝推荐阅读书单之《设计的意义》」



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

 

优秀的设计就是带给用户惊喜!

蓝蓝设计的小编 设计思维

优秀的产品设计是能带给用户惊喜的,在不经意间让用户感受到温度,也是提升用户体验的关键。
 
随着行业的进步,产品设计师也在不断优化体验,输出一个一个优秀的解决方案。近期黑马哥也发现了一些比较惊喜的设计,来和大家一起欣赏一下吧!
优秀的设计就是带给用户惊喜!
 
 
 
 
体验目录
一、降落伞带来的营销广告
二、动效反馈商家备餐过程
三、这个广告惊不惊喜意不意外
四、Banner 广告的视觉沉浸感
五、待机状态下的实时动态
六、小图标里的细节反思
七、轮播式的悬浮设计
八、氛围热烈的底部标签栏
九、收缩式交互设计
十、形象化的进度设计
 
 
一、降落伞带来的营销广告
在这个广告满天飞的年代,用户已经逐步开启广告免疫模式,如何提高用户对广告的关注度至关重要。
 
近期在体验饿了么时,等待送餐界面中空降一个降落伞,从左上角飘到右侧悬浮,弹出红包悬浮广告。降落伞飘浮的动态过程吸引了用户的关注度,进而提高了营销广告的点击率,虽然广告大家都比较反感,但是一个伴随着惊喜的广告也会让你放下戒备心理。
优秀的设计就是带给用户惊喜!
 
 
 
 
二、动效反馈商家备餐过程
提升等待过程对于用户体验来说尤为重要,降低用户等待过程中的焦虑感,才能让用户愿意为此停留。
 
通过饿了么点餐之后,商家需要一定的时间完成餐饮的制作,必然需要用户等待一些时间。在这个备餐过程中,当前界面以一个翻炒动效表达,情感化的动效不仅提示用户当前状态,也提升了设计表达的感官体验。
优秀的设计就是带给用户惊喜!
 
 
 
 
三、这个广告惊不惊喜意不意外
意料之外的广告是带给你惊喜还是反感呢?平台为了提高变现能力,各种层出不穷的广告玩法也让你猝不及防。
 
之前在体验腾讯视频 App 时,从闪屏广告过度到 Banner 图的过程中,经历了多个广告新花样。首先从闪屏切换到自动轮播的弹窗模式,再演变到放大版的多个广告切片(占 Banner 位呈现),最后再恢复到 Banner 的正常布局中。这个过程无疑是把广告的存在感拉满了,让你对广告的记忆形成硬性要求。
 
无论这个广告设计方案是否让用户反感,但是这个呈现的互动方式还是比较新颖的,相信广告的点击率必然有所提升。
优秀的设计就是带给用户惊喜!
 
 
 
 
四、Banner 广告的视觉沉浸感
Banner 图在产品中是非常普及的,各类形式的演变也层出不穷,产品设计师都在探索更多可能性。
 
在腾讯视频 App 动漫栏目中,发现一例很有想法的 Banner 表现。Banner 上面新增了一个悬浮的火焰燃烧的动效,提升了整体的氛围感,动效与 Banner 画面完美贴合,视觉沉浸感十足。
优秀的设计就是带给用户惊喜!
 
 
 
 
五、待机状态下的实时动态
随时让用户感受到你的存在,才能让人感到安心,服务过程中状态实时可见至关重要。
 
通过饿了么点餐之后,就算处于待机状态时,只要点亮屏幕即可看到当前出餐状态。可视化的图形结合时间提醒,让状态一目了然,使得点餐到用餐之间的过程更有用户可控性。
优秀的设计就是带给用户惊喜!
 
 
 
 
六、小图标里的细节反思
产品中有很多辅助功能/信息等表达的图标,既要能准确表达主题,也要让用户易于理解。
 
在汽车之家 App 发现了一个值得反思的图标案例,在扫一扫的图标中结合了汽车外形轮廓,不仅不会影响扫描的功能表达,也进一步表达了该功能的差异。和别的产品扫描功能不同,这个是对准汽车进行扫描,体现出了业务的差异化。一枚小小的图标体现出了设计师的能力,用最简单的方式表现自身产品的差异,以此提升用户的操作体验。
优秀的设计就是带给用户惊喜!
 
 
 
 
七、轮播式的悬浮设计
悬浮设计非常普及,因为占比小和滑动页面会隐藏,对用户的干扰比较小。
 
最近在芒果 TV 首页发现了悬浮窗口的轮播式表达,芒果卡和活动中心会自动轮播显示(也能手动切换)。让我们对悬浮窗口的设计又多了一种设计理解,可以呈现更多不同内容的表达,提升了窗口的利用率。
优秀的设计就是带给用户惊喜!
 
 
 
 
八、氛围热烈的底部标签栏
底部标签栏的设计在图标创意层面发挥较多,各类风格的图标让该栏目更加丰富多彩,除此之外也有在背景层渲染氛围的案例。
 
近期恰逢芒果 TV 十周年之际,在底部标签栏背景层也加强了氛围感。丰富多彩的元素和配色,结合主题化的图标设计,使得整体氛围感拉满。
优秀的设计就是带给用户惊喜!
 
 
 
 
九、收缩式交互设计
通过交互方式应对用户操作过程,特别是在滑动界面时,交互方式的优化可以降低干扰,提高当前界面的利用率。
 
在 Blurrr App 创作界面,默认以 3D 动态图标展示“开始创作”按钮,当滑动界面时按钮会收缩展示。通过收缩式的交互设计,让界面可以展示更多内容,也不会影响用户点击按钮进行创作。即通过 3D 动效加强了功能的曝光度,又通过收缩式交互提高了内容的展示空间,可谓是一举多得的设计解决方案。
优秀的设计就是带给用户惊喜!
 
 
 
 
十、形象化的进度设计
进度设计是反馈状态变化的关键,通过可视化的表达让用户一目了然,提高用户对服务过程的把控。
 
当用户通过携程旅行 App 订票后,在行程订单界面可以看到列车行驶状态的进度提示。通过可视化的列车形象的表达了行驶状态,让用户清晰的看到行驶方向和抵达站点示意。不仅信息传递高效,形象的表达也使得感官体验更佳。
优秀的设计就是带给用户惊喜!
 
 
 
 
小结
优秀的产品总能在细微之处带给你惊喜,让你感受到产品服务的情感化和温度。本文观点仅代表个人体会,希望可以和大家一起共勉。
 
作者:黑马青年
本文由 @黑马青年 原创发布。未经许可,禁止转载。


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

每个设计都让你感受到个性化

蓝蓝设计的小编 设计思维

随着同类型产品越来越多,更有体验感和个性化的设计才能打动用户,成为被选择的对象。作为产品设计师我们在不断探索和创新,希望以更好的设计表达来解决业务场景,为提升用户体验而助力。
 
本期以个性化设计为出发点,给大家带来十个不错的设计方案,希望可以带给大家更多设计灵感。
每个设计都让你感受到个性化
 
 
 
 
体验目录
一、让你感受温暖的年度报告
二、趣味性的图标设计
三、通过 AI 重新定义搜索体验
四、动态化功能引导产品升级
五、动态优惠券更有吸引力
六、人性化的温馨提示设计
七、自定义形象的年度报告
八、个性化的主界面设置
九、情感化的表情设置
十、空间感的 Banner 轮播体验
 
 
 
一、让你感受温暖的年度报告
这段时间相信大家经常使用的产品都晒出了年度报告,设计风格与互动形式也层出不穷,哪一个产品的设计风格最打动你呢?
 
在我刷到的年度报告中,携程旅行的年度旅行报告印象最深刻。毛茸茸的设计风格在寒冷的冬季显得格外温暖,图标、字体、背景、按钮等都以此风格进行设计,整体效果非常细腻柔软,你也去体验感受一下吧!
每个设计都让你感受到个性化
 
 
 
 
二、趣味性的图标设计
图标在产品中主要以各种设计风格形成差异,打造出匹配品牌风格的个性设计,除此以外,我们也要多在图形创意表达层面进行探索。
 
最近在使用极兔速递小程序时,除了图标设计的风格独特以外,多个场景的图形创意也很有意思。比如下单寄件、扫码寄件和个人中心的图标等,趣味性的设计表达让人印象深刻,以个性化的图形创意吸引用户的注意力。
每个设计都让你感受到个性化
 
 
 
 
三、通过 AI 重新定义搜索体验
AI 化已经成为众多行业未来需要对接的方向,任何行业都可以通过 AI 进行重新定义,带给用户 AI 化的体验。
 
以前在腾讯视频 App 搜索时都是以关键词为主,现在可以通过 AI 搜与腾讯元宝 AI 助手交流,以对话式的方式找到感兴趣的影片。通过 AI 重新定义了搜索方式,让用户感受到属于 AI 化的体验感。
每个设计都让你感受到个性化
 
 
 
 
四、动态化功能引导产品升级
引导用户升级产品才能带来新的功能和服务升级,如何吸引用户进行升级变得至关重要。
 
高德地图为了引导用户点击升级,以升级后带来的更优功能和服务为吸引点,通过动态轮播的形式表现升级弹窗。动态化的功能引导可以让用户提前了解新版本的信息,提高用户升级的选择性。
每个设计都让你感受到个性化
 
 
 
 
五、动态优惠券更有吸引力
各种优惠券、打折券、新人红包等让用户开始有点麻木,也不一定会领取和使用,如何增加其吸引力就变得越来越重要了。
 
近期高德地图打车栏目的营销活动中,为了展示更多类型的打车券、打车金等,通过动态轮播的方式进行设计表达。相较于静态展示而言,不仅解决了内容展示的数量问题,动态的方式也更有吸引力,增加用户的参与概率。
每个设计都让你感受到个性化
 
 
 
 
六、人性化的温馨提示设计
温馨提示虽然不一定管用,但是依然可以让用户感受到人性化的服务,增加用户对产品的好感度。
 
在比较晚的时间段使用洪恩识字 App 时,会出现温馨提示的弹窗,劝导用户注意休息时间。人性化的设计可以辅助家长管理孩子的使用习惯,提醒注意时间管理和作息规律。
每个设计都让你感受到个性化
 
 
 
 
七、自定义形象的年度报告
年度报告的形式丰富多样,都是以用户个人数据生成,如何才能更加个性化,成为了设计表达的重点。
 
网易云音乐的年度听歌报告可以自定义形象,可以针对身体的上中下三个部分进行定制,以个性化的形象开启专属的听歌报告。整体表达很有设计感,图形、排版与配色都很不错,快去生成属于你的听歌报告吧!
每个设计都让你感受到个性化
 
 
 
 
八、个性化的主界面设置
对于感官体验每个人的喜好各不相同,为了满足各自的选择需求,个性化的设置变得尤为重要。
 
体重小本 App 的主界面,可以通过主题皮肤设置背景、配色等,提供了焕彩粉和清爽蓝的多款选择,用户也可以自定义图片进行设置。通过个性化的设置带给用户更多选择性,满足不同的感官体验需求。
每个设计都让你感受到个性化
 
 
 
 
九、情感化的表情设置
通过表情设计辅助可视化表达,其中表情符号的运用较为常见,丰富多样的表情选择更能满足用户需求。
 
体重小本 App 体重数据展示中,以不同表情来体现体重数据的变化,情感化的表达让变化的呈现更加贴切。产品提供了多款表情供用户选择,用户也可以设置自定义表情,情感化的设置让体验感变得更加丰富。
每个设计都让你感受到个性化
 
 
 
 
十、空间感的 Banner 轮播体验
轮播 Banner 图在设计表达、布局结构、轮播形式等层面都可以进行创意发挥,有特点的形式更能吸引注意力,以此提高 Banner 的点击率。
 
最近在体验芒果 TV 时,发现首页 Banner 的表现形式以分层式表达,轮播过程中更有空间感。将人物与背景进行分层设计,轮播时分前后入场,伴随着缩放等动效表达,营造出更强的空间感。
每个设计都让你感受到个性化
 
 
 
 
小结
设计思维的转变离不开大量优秀案例的辅助,对于产品设计师来说,体验和总结的训练至关重要。希望本期的分享可以带给大家一些启发,观点属于个人见解,不足之处欢迎大家留言补充。
 
本文由 @黑马青年 原创发布。未经许可,禁止转载。
 


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

设计方法论 I 超全面的页面分割设计指南

天宇

 
设计方法论 I 超全面的页面分割设计指南
 
当你打开一个页面,首先映入眼帘的是丰富多样的内容和信息。如何在有限的空间内,既保证内容的完整性,又让用户能够轻松理解和浏览,这背后的奥秘就在于页面分割。今天,我们就来一起
探讨页面分割的艺术与技巧,看看它是如何为你的设计增添魅力,提升用户体验的。
 
在设计中,页面分割不仅仅是一种技术手段,更是一种艺术表现。它如同一位细心的画师,巧妙地运用线条、色彩、空白等元素,将页面内容划分为一个个清晰、有序的区域。
通过这些分割,用户能够更快速地找到所需信息,更轻松地理解页面内容,从而享受到更加愉悦的阅读体验。
页面分割的魅力在于其多样性和灵活性。不同的页面可以采用不同的分割方式,如线条分割、卡片分割、留白分割等,以满足不同的设计需求和用户习惯。同时,页面分割也需要根据内容的实际情况进行合理调整,既要保证信息的完整性,又要避免过度分割带来的混乱感。
 
在本文中,我们将一起探讨页面分割的原则、技巧和应用实例。我们将学习如何运用不同的分割方式来优化页面布局,提升用户体验。同时,我们还将分享一些成功的页面分割案例,以激发你的设计灵感,为你的界面设计注入新的活力。
 
分享目录:
一、分割的常见样式
二、线性分割
三、卡片分割
四、留白分割
五、总结
设计方法论 I 超全面的页面分割设计指南
 
 
线性分割:通过使用线条来划分页面的不同区域,以达到组织内容、引导用户视线和提升整体美观度的目的。这种分割方式简单明了,能够清晰地展现出页面内容的层次和结构。
 
卡片分割:卡片式设计是一种流行的界面分割方法,通过将内容划分为独立的卡片或区块,使用户能够更清晰地理解信息。每个卡片通常包含相关的内容,如文本、图片或按钮,以便用户快速浏览和交互。
 
留白分割:主要通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),自然地将信息进行分组。这种留白的方式能够为页面增加呼吸感,降低视觉噪音,使设计看起来更简洁。
设计方法论 I 超全面的页面分割设计指南
 
 
近年来,设计趋势从“卡片式设计”转向了“去线化设计”,即倾向于使用留白分割而非过多的线条分割,以实现更为简洁清晰的界面效果。设计师在选择分割方式时,应优先考虑留白分割,其次是线性分割,最后是卡片分割。这个选择顺序反映了设计界的一般原则,即在不影响信息传达的前提下,尽可能保持设计的简洁性。
设计方法论 I 超全面的页面分割设计指南
 
 
线性分割的定义:
线性分割设计是一种在视觉设计中使用的技巧,它使用线条、边框或细线等元素来划分、区分或连接页面上的不同内容区域。这种设计手法主要用于提高页面内容的可读性和组织性,帮助用户更好地理解和浏览页面信息。
 
线性分割设计具有以下优势:
 
1.划分区域:线性分割可以将页面划分为不同的区域或模块,使得每个区域的内容更加清晰、有序。这有助于用户快速定位和浏览所需的信息,提高阅读效率。
 
2.区分内容:线性分割可以用来区分不同类型的内容,如文本、图片、图表等。通过线性分割,可以将这些内容进行分组或归类,使得页面更加整洁、有序。
 
3.引导视线:线性分割可以引导用户的视线,帮助他们更好地理解页面内容。通过合理的线性分割设计,可以突出显示重要的信息或元素,引导用户关注到关键内容。
 
4.增强层次感:线性分割可以增强页面的层次感,使得页面内容更加丰富、有深度。通过不同样式的线性分割,可以区分不同的信息层级,帮助用户更好地理解页面结构和内容关系。
 
使用原则:在使用分割线时,我们应遵循一些原则,以确保其有效地帮助用户理解页面的组成,同时避免过度使用带来的视觉干扰。
 
1.分割线应当微妙而不过于显眼。
它们在布局中应该容易被用户注意到,但又不应成为焦点,以免分散用户的注意力。
 
2.分割线应被视为次要的元素。
只有在留白等其他设计手法无法有效起到分割作用时,才考虑使用分割线。它们应当是布局中的辅助工具,而不是主导元素。
 
3.谨慎使用分割线。
过度使用分割线可能会导致页面显得混乱和复杂。相反,我们应该用分割线来创建信息分组,而不是简单地分割每一个条目。通过审慎而恰当地使用分割线,我们可以有效地提升页面的可读性和用户体验。
图片来源于参考文章
图片来源于参考文章
 
线性分割三种类型:
通栏分割线、内嵌分割线和中间分割线。
 
1.通栏分割线(Full-bleed Dividers):通栏分割线通常横跨整个页面宽度,用于分隔彼此完全独立的内容区域。这种分割线在视觉上非常显著,能够清晰地划分出不同的内容区块,使用户能够迅速区分不同部分的信息。通栏分割线通常用于区分文章、产品列表、服务介绍等独立的内容区域。
 
2.内嵌分割线(Inset Dividers):内嵌分割线通常位于内容区域内部,用于分隔有锚点(如头像、图标等)的相关内容。这些锚点可以是图片、符号或小的图形元素,它们与分割线一起,帮助用户更好地理解和区分内容。内嵌分割线常用于列表、卡片式布局、时间线等场景中,用于展示有关联但不同类别的信息。
 
3.中间分割线(Middle Dividers):中间分割线位于两个内容区域之间,用于分隔无锚点的相关内容。这种分割线通常比通栏分割线更细,更注重于在视觉上划分空间,而不是强调内容的独立性。中间分割线常用于文本段落之间、列表项之间或不同功能区域之间,以提供清晰的结构和层次。
设计方法论 I 超全面的页面分割设计指南
 
 
在大多数情况下,当信息层级较为简单(即信息层级≤2)时,使用分割线进行信息分割是一种有效的方法。然而,实际上,如果留白间距足够大,我们也可以使用留白来达到类似的效果。通过增大留白间距,我们可以创造出清晰的视觉区域划分,使得信息之间的界限更加明确。
 
与分割线相比,足够大的留白间距可以避免多余的线性元素干扰,让整体视觉效果更加清爽。这样的设计选择有助于提升用户的阅读体验,使用户更加轻松地理解和消化信息。
 
因此,在信息层级较简单的情况下,我们可以灵活地选择使用分割线或留白来进行信息分割。通过调整留白间距,我们可以达到与分割线相似的效果,同时保持整体设计的简洁和清晰。
设计方法论 I 超全面的页面分割设计指南
 
 
为了提升屏效,我们希望在一屏内展示尽可能多的信息。在这种情况下,分割线的设计显得尤为重要,因为它们能够有效地划分信息区域,使内容更加清晰、易于理解。
 
通过使用分割线,我们可以将较多的信息条理化,使得用户能够更快速地找到所需的内容。与没有分割线的布局相比,使用分割线能够显著提高信息的可读性和可理解性。
 
在相同的信息布局下,分割线能够将信息区域明确地划分开来,防止信息之间产生混淆或交叉。这种划分不仅使得每个信息块更加独立,而且提高了信息之间的对比度,使用户能够更轻松地识别和区分不同的信息。
 
因此,当我们的目标是提高屏效并展示大量信息时,分割线的设计是一个关键要素。通过合理地使用分割线,我们可以确保信息布局更加清晰、有序,从而提高用户的阅读效率和满意度。(如下图)
设计方法论 I 超全面的页面分割设计指南
 
 
线性分割在移动端页面设计中的应用场景广泛,尤其是在需要清晰划分信息模块时。如微信的聊天列表中,线性分割被用来区分不同的消息条目。每条消息之间通过一条细线进行分隔,使得每条消息清晰可辨,方便用户快速浏览和定位到特定的消息。
 
线性分割还常用在各类App的信息提示中,如果有多条消息需要展示,线性分割可以用来
区分不同的消息组。例如招商银行APP中,当用户收到多条未读消息时,每条消息之间可以通过线性分割进行区分,使得每条消息清晰可辨,方便用户逐一查看和处理。
 
在APP需要用户填写信息和设置的表单页面中,线性分割可以用来区分不同的输入字段或信息区域。这有助于用户更清晰地了解需要填写的信息,提高表单的填写效率和准确性,比如站酷的设置页面(如下图)
设计方法论 I 超全面的页面分割设计指南
 
 
设计方法论 I 超全面的页面分割设计指南
 
 
设计方法论 I 超全面的页面分割设计指南
 
 
卡片分割的定义:卡片分割设计主要通过将内容或功能区域划分成独立的“卡片”来进行信息展示和组织。每个卡片通常包含相关的内容或功能,并且与其他卡片通过一定的间距或线性分隔进行区分。
 
卡片分割设计具有以下优势:
 
1.内容封装:卡片分割设计将相关内容或功能封装在一个独立的卡片内,使得每个卡片成为一个独立的信息单元。这有助于保持页面内容的清晰和整洁,方便用户浏览和理解。
 
2.明确边界:每个卡片通常具有明确的边界,通过边框、阴影或间距等元素来区分不同的卡片。这种边界的存在使得每个卡片在视觉上相对独立,方便用户进行区分和识别。
 
3.灵活布局:卡片分割设计具有很高的灵活性,可以根据需要自由调整卡片的大小、位置和排列方式。这使得设计师可以根据不同的设计需求和用户习惯来灵活调整卡片的布局,以达到最佳的视觉效果。
 
4.强调重点:通过不同的视觉处理手法,如改变卡片的颜色、大小或样式等,可以突出显示重要的卡片或内容。这有助于吸引用户的注意力,引导他们关注到关键信息。
 
卡片的基本构成:卡片是一个独立的主题性容器,旨在将内容和操作组合在一起。它可以包含多种元素,如容器、缩略图、标题、副标题、富媒体、辅助文字、按钮和图标按钮等。这些元素并非必须全部存在,而是根据具体需求进行选择和配置。无论选择哪些元素,它们都会以易于扫描和操作的形式整齐地放置在卡片上。这种设计使得卡片成为一个灵活且高效的信息展示工具,适用于各种场景和应用。
设计方法论 I 超全面的页面分割设计指南
 
 
卡片分割常见的类型:卡片分割可分为、通栏卡片和非通栏卡片
 
1、通栏卡片:其特点是卡片占据整个页面宽度,没有左右边距。通栏卡片的设计可以提高布局的灵活性,使得页面内容更加宽敞和大气。同时,通栏卡片也可以更好地突出展示单条内容,引导用户的视线,提高阅读效率。
 
2.非通栏卡片:与通栏卡片相比,它会在卡片的左右两侧留有边距,不完全占据整个页面宽度。这种设计方式可以使得页面内容更加有层次感和组织性,同时也有利于突出显示某些关键信息。
设计方法论 I 超全面的页面分割设计指南
 
 
通栏卡片
通栏卡片相较于非通栏卡片,其设计特点在于去除了左右两端的留白,仅保留上下边距,从而提供了更大的展示空间。这种设计使得卡片内的内容能够占据整个页面宽度,进一步增强了内容的视觉冲击力。在通栏卡片中,卡片与背景的关系通常通过一条背景色块来抽象表现,这种简洁的处理方式避免了过多的视觉元素干扰,使得页面整体看起来更加整洁和统一。
 
通栏卡片可以被视为在极简列表式和传统卡片式设计之间的一种折中选择。它继承了卡片式的分层方式和强交互性,使得用户能够轻松地浏览和交互页面内容。如下图微博“关注”、微信“发现”页面。
设计方法论 I 超全面的页面分割设计指南
 
 
非通栏卡片
非通栏卡片通常采用带圆角的设计形式,这种设计不仅赋予卡片一种柔和、圆润的视觉效果,还增强了用户的视觉舒适度。结合阴影效果以及四周的边距,非通栏卡片巧妙地形成页面留白,使得整体设计层次感更加丰富。
 
通过巧妙的投影设计以及前后颜色的精准设定,非通栏卡片成功地让内容与背景之间产生视觉空间感,进一步强化了内容的立体感和层次感。这种设计技巧不仅提升了卡片的视觉吸引力,还使得用户在浏览页面时能够更加轻松地区分和聚焦关键信息。
 
在页面设计中,非通栏卡片的应用范围十分广泛。无论是用于展示文章、产品、图片还是其他类型的内容,非通栏卡片都能够通过其独特的视觉效果和设计元素,为用户带来更加舒适、美观的视觉体验。同时,非通栏卡片还具有良好的适应性和灵活性,可以根据不同的设计需求和用户习惯进行定制和调整,满足不同场景下的应用需求。如下图夸克“夸克日报”、APP Store“首页”
设计方法论 I 超全面的页面分割设计指南
 
 
选择使用通栏分割线还是卡片分割,主要取决于你的设计目标和内容需求。以下是三个参考建议,帮助你做出更好的选择:
 
1.当内容已有自然分割线时:如果你的主题内容本身就已经有明确的分割线,比如列表项、段落分隔等,那么采用非通栏分割会是一个好选择。卡片可以清晰地界定每个内容块,使主题信息层次更加分明,提高用户的阅读效率。
 
2.当内容类型多样且占据较大空间时:如果单个主题内部包含了多种类型的内容,如文字、图片、视频等,且这些内容在垂直方向上占据了较大的空间(例如,内容长度超过屏幕高度的一半),使用非通栏分割会更加合适。卡片能够有效地圈定内容范围,为用户提供一个明确的视觉边界,帮助他们更好地理解和消化信息。
 
3.当需要增强横向空间感时:如果你希望扩展页面的横向空间,或者暗示用户可以横向滑动页面查看更多内容,那么非通栏卡片会是更好的选择。非通栏卡片的设计能够利用横向内容连续性原则,帮助用户建立页面可以横向滑动的意识,从而提升页面的互动性和用户体验。如下图知乎“发现”、站酷“推荐”。
设计方法论 I 超全面的页面分割设计指南
 
 
卡片分割更适合图文混排
卡片分割设计以其独特的布局方式,成为图文混排中的理想选择。它能够巧妙地将不同大小、媒介的内容统一呈现在一个界面中,实现了内容的多样性与统一性的结合。这种设计不仅让单屏区域能够显示更多内容,还通过合理的空间划分,确保了文字和图片之间的和谐共存,既维持了视觉的一致性,又巧妙地平衡了文字和图片的视觉强度。因此,在需要同时呈现多种内容和媒介的场景中,卡片分割无疑是一种高效且美观的解决方案。如下图知乎“想法”、站酷“首页”
设计方法论 I 超全面的页面分割设计指南
 
 
设计方法论 I 超全面的页面分割设计指南
 
 
设计方法论 I 超全面的页面分割设计指南
 
 
留白分割的定义:留白分割是目前设计的主流趋势,越来越多的产品在使用留白分割设计。留白分割主要通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),将信息进行自然的视觉分组。
 
留白分割具有以下优势:
 
1.突出重点信息:通过增加间距,可以将关键信息与其他内容区分开来,使用户更容易注意到。
 
2.提高可读性:适当的留白可以使文字或图形元素之间的界限更清晰,减少视觉干扰,从而提高用户的阅读效率。
 
3.增强设计感:留白可以为设计增加呼吸感,避免元素过于拥挤,使整体布局更加和谐、美观。
 
当元素之间的间距保持均匀时,整个视觉呈现会显得平衡且协调,大脑默认为一个整体。然而,一旦元素的横向和纵向间距发生变化,我们的大脑会基于接近性法则,本能地将距离较近的元素视为一个整体或群组,这就是留白分割。(如下图)
设计方法论 I 超全面的页面分割设计指南
 
 
留白分割在
有规律且卡片样式较多的页面中表现尤为突出,在有大量卡片样式的页面中,每个卡片通常都包含一定的信息。通过留白分割,可以清晰地划分每个卡片的信息区域,使用户更容易区分和阅读每个卡片的内容,增加呼吸感,避免元素过于拥挤,从而提高整体的可读性。例如下图中主流的音乐类App
设计方法论 I 超全面的页面分割设计指南
 
 
相反,如果在没有规律且页面内容较多的情况使用留白分割,则会使页面杂乱无章。比如下图咸鱼的“广场”界面feed流中,图片从1~9张都有的情况下,使用留白分割,页面就会变得杂乱,影响视觉效果。而脉脉则采用了卡片式分割样式,页面模块则相对清晰很多。
设计方法论 I 超全面的页面分割设计指南
 
 
设计方法论 I 超全面的页面分割设计指南
 
 
在我们界面设计中,我们应充分考虑信息条目的复杂度。当信息较为简单时,利用留白分割,能够创造出清爽且不受干扰的视觉体验。但随着信息复杂度的增加,留白分割可能不足以清晰地展现信息层次,此时,引入线性分割是一个有效策略,它能提升屏幕的利用效率,使信息条理更加清晰。
 
当信息复杂度进一步升级,例如已经运用了线性分割或涉及更多操作时,我们需要进一步强化信息条目之间的边界感。这时,卡片分割是一个理想的选择,它不仅能增强信息的视觉层次,还能提升条目的可操作性。
 
重要的是,选择信息分割方式时,我们要明确:分割本身不是目的,而是为了构建清晰的版面逻辑
,通过悦目的信息秩序来更好地突出内容,实现最佳的信息传达效果。因此,在决策时,除了考虑上述细节因素,还需全面评估整体版面效果和信息传达效率。感谢阅读,希望对您有用。
设计方法论 I 超全面的页面分割设计指南

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

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

设计师如何做产品需求分析:先聊聊两个“价值”

天宇

近两年出现了不少“解放设计师双手”的设计工具、AI工具,我们似乎能很快输出N种流程方案、N种布局方案、N种UI风格等等。问题是:这样穷举设计方案的工作方式当真有效吗?
 
请警惕“莫得感情”的出图机器!具备竞争力的设计师必须有自主意识,包括清晰的思维逻辑、果敢的决策力。而体现这一意识和能力的重要环节之一,就是产品生产链路中的首个环节“需求分析”。
 
需求分析并不仅仅是产品经理的事儿。从共同目标的角度来看,互联网企业在岗位划分上区分了产品经理、设计师、开发工程师等,是顺应人的精力时间有限、术业有专攻的自然规律,但是从业务目标来说,每一个岗位都应该对“最佳用户体验和最大化商业利益的平衡”负责,确保这艘船在正确的航道上。所以,如果每个“船员”都具备主人翁意识和需求分析的能力,航程必然更健康稳健。
设计师如何做产品需求分析:先聊聊两个“价值”
 
对设计师来说,需求分析不仅仅是“这个功能要不要做”的问题,也会影响后续的设计方案决策。每一次的功能增删或调整,都是在改变用户接收产品界面信息的整体效用,那么每一个产品需求的分析都要评估这个功能在整个信息架构、用户体验链路的位置孰轻孰重,也就必然会影响你的设计方案决策。
 
产品需求从哪里来?
 
“有用户反馈说……"
“国庆节快到了,我们策划了一个活动……”
“这个付费转化率很低,达不到预期。我们想……”
……
产品需求的来源多种多样,可能来自产品经理、用户反馈、产品数据、市场风向、技术革新等等。当然,还有来自作为设计师的”我自己“。当我灵光一闪想到一个很炫酷的小创意,情感上免不了自以为是地想”咱们产品这么不做这个“——这个时候我也会用需求分析的框架来质问自己:
“值不值得做(价值评估)”、“应当先做什么(优先级)”、“用户需求要满足到什么程度(核心体验链路)”这三个问题。
 
做需求分析,要想什么?
我们常说产品需求要“洞察用户真正的需求”,要明确“用户价值”。刚入行的时候,我们都会点点头,心想“对哦”。可是什么是“真正的”、什么是“假的”、什么是“价值”?说实话,这些概念都挺虚的。只有当理论落到某个用户场景去分析,我们才能理解其深意。
 
先说点虚的,什么是“价值”?
 
价值是多维度的概念,在不同的学科中都会在“价值”前加一个表范围的定语,比如“劳动价值”、“经济价值”、”社会价值”。随着互联网的发展,我们出现了两个重要的新词“用户价值”和“产品价值”。
 
对于用户而言,他们购买或使用产品或服务是为了满足特定的需求,比如提升效率、获得愉悦、获取经济收益等。那么我们说这个产品具有“用户价值”。
 
所以需求分析首先是“评估价值”,而价值评估则拆分为“用户价值”和“商业价值”两部分。即使当下的需求目标是提升用户规模(拉新、促活、挽留等),并不需要用户掏钱,也是为了实现长远的商业价值。当然,这仅适用于以盈利为目标的企业,非盈利组织还有“社会影响力”的目标,不在本文讨论范围内。
 
下面我们进一步拆解价值评估:“用户价值评估”和“商业价值评估”。
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
1、用户价值评估
解决哪些用户在什么场景下的什么问题?
 
这个问题越具体到“人”,就越容易分析。如果需求来自于用户反馈,我们溯源到具体的用户。
 
有一个朋友出去创业,想做一个“找饭搭子”的同城陌生人交友软件。他说,偶尔看到微信朋友圈有人召唤“有没有人一起探店”的动态,去网络社区搜索“饭搭子”、“同城探店”等词汇也能看到不少帖子。而且探店吃饭这件事直接关联消费,商业模式很清晰。他想通过他的产品解决“用户|在探店场景中|无法及时找到饭友”的问题。——“找饭友”是一个行为动作,没有切入到用户的内在需求。
 
定义用户价值不能只停留在“行为上”,可以尝试找到目标用户做定性访谈,进一步深挖问题。比如,我们想进一步把问题下钻,可能会问到这些问题:
 
● 用户为什么要找饭友?不能一个人探店?
● 用户为什么找不到“饭友”?
● ……
 
我们进一步细化“用户-场景-问题”的价值定义:
解决 一线城市年轻用户(尤其是刚迁移新城市的年轻人)|通过约伴探店|解决 同好交友(社群需求)、 “量大”餐馆均摊成本(省钱需求)、获得更愉悦的吃饭氛围 (情绪需求)的问题。
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
那有了这个用户价值定义是不是就可以顺利立项呢?——看这个文章的篇幅,你只读了不到一半,当然还有更多需要推敲的问题,请继续阅读。
 
这个需求接触不到真实用户怎么办?
 
有时候我们的需求来源可能是市场风向、技术革新带来的未知变化。我们无法直观地获知“具体的用户是谁”、“TA在什么场景遇到什么问题”。
——这种情况,我们则需要反向思考:这个需求如果做了,获益的用户是谁?满足了他们在什么场景下的需求?如果不做,用户会不会因此弃用我们的产品?可能流失的用户,大盘占比可能是多少?是不是高价值用户?
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
用上面的思路去层层推敲,可能会否定原来的产品策划,可能会挖掘出新的需求,可能会改变需求的优先级。
 
值得一提的是,有时候经过层层推敲,最终得到的决策可能会与市面上的竞品有所雷同。也就是我们经常会问的一个问题:为什么A产品已经做了这件事,B产品还要做同样的事情?
 
有的功能或服务是顺应用户需求而产生的,如果有所缺失,就无法达成用户目标。比如短视频产品都会做点赞和评论,因为视频创作者和消费者分别有“获得认可”的被尊重诉求、”表达意见“的掌控欲等心理需要。而产品则需要这些点赞和评论数据去评判内容热度和丰富个性化标签,以优化内容的推送机制。很多同一赛道的产品会有雷同的功能,虽然常常被调侃为”相互抄“,但是真正做需求分析才能看清“什么是无脑抄”、“什么是必然如此”。
 
2、商业价值评估
用户会为你这个新产品/新功能买单吗?
 
我们找到一个有用的需求点是简单的,因为需求的来源真的太多太多,但是当我们发现,用户不一定会为我们的新产品或新功能买单。
请注意,这里的“买单”不限于用户掏钱,还包括用户决定使用哪个产品的决策成本、用户愿意花费在某个产品的时间和学习成本等。
 
那我们怎么预判用户会不会买单呢?或者,如何提升用户的买单意愿呢?
 
如前面所言,“用户价值”就是通过你的产品获得了预期的效用。效用可以是省了时间、省了钱、省了学习成本、获得情绪价值、获得安全感等。而用户对效用的感知,往往是对比过去经验的解决方案得到的。所以,我们首先要看用户之前是怎么解决这个问题的,然后是用户迁移到新的解决方案(使用新产品或新功能)要付出多少成本。
 
继续用上面“饭搭子”的案例:
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
——我们从这个案例可以看到,当我们做成本对比,不能简单地说新旧方案哪个成本更高。用户付出的“成本”是多维度,包括“时间成本”、“经济成本”、“安全风险”等维度。
“饭搭子”这个新方案,对比旧方案,并没有没有压倒性的成本优势。我们虽然可以通过产品设计和运营降低当中的用户成本,比如通过用户历史参与数据(参与饭局次数、饭友评价、真实职业信息等)提供用户靠谱度评分,以降低安全成本。但消除用户成本,需要花费较大的资源投入,我们可以预判这不是一个高ROI的产品项目。
有趣的是,人不是完全理性的。有的场景,只要其中一项成本感知强烈,人就可能选择弃用这个产品。比如“饭搭子”这个案例中,女性用户对安全风险更为敏感,女性用户更不愿意尝试陌生社区。
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
如果我做的是一个非常创新的项目,真的没办法找到“旧方案”做对比呢?或者我无法获知旧方案的用户成本呢?——我们依然建议尽可能地接近用户、收集足够多的信息,以辅助判断。如果依然非常不明朗,可以通过MVP的方案去预估。关于MVP实践的书籍和网络资料很多,大家可以自行搜索。
 
多少用户会买单呢?
✅ 确认了这个需求有用户价值
✅ 确认了有XX需求的用户很可能会买单
——接下来可以开干了吗?
 
不够,还需要预判收入规模。因为:收入=客单价x支付用户数=客单价x访问用户数x支付转化率。
这个等式适用于一般的to C产品,不同的产品可能有差异,比如视频用户的使用时长可能与产品收入挂钩,那么用户时长也需要作为一个变量放入到你的产品收入公式中。
当我们要开发一个新的付费互动功能,我们需要做数据预估:这个互动功能放在这个位置,每天的曝光可能是多少?按照此页面同样位置的点击转化和其他功能的付费转化,能否预估这个新功能的收入?这个收入规模值得投入X天的开发人力吗?
如果这个需求的直接目标不是收入,而是获取更大用户规模。我们也同样用“等式”这个思考方式来去做数据估算,只是把“收入”理解为用户量或其他目标数值、而非金钱收入。
当然,通过历史数据估算收入是比较理想的情况。如果身处一个数据体系建设落后的企业中,我无法获取足够的数据支持,怎么办呢?或者,这是一个绝对的革新体验(比如AI辅助内容创作),我无法用过往的数据或经验评估收入规模,怎么办呢?
那么,至少解答“解决哪些用户在什么场景下的什么问题”,来看看这个需求的用户场景覆盖是否足够广;再权衡为了获得这个新产品/新功能带来的新体验,用户要投入哪些成本,以此做需求的排除法——跟创业一样,做产品本身就存在了诸多不确定性,并非所有的决策都能通过公式去论证。
我们只能在有限条件下尽量选择做正确的事,排除那些大概率不能成功的事。然后尝试MVP,或直接交给市场和时间验证。
此外,如果设计师想作为初创成员加入新产品,还要跑通可持续的盈利模式。这里又是一大块学问,比如了解这个企业做这件事的资源优势等等,本文作者的知识域和本文篇幅都有限,建议感兴趣的朋友翻看商业分析相关书籍。但是新旧方案的用户成本对比、收入公式的拆解,依然是重要且可行的商业价值视角。
 
3、优先级
“优先级”可以分为两层理解,一层是产品需求之间的优先级排序,另一层则是功能范围层的优先级,也就是我们聊需求经常会问的问题:我们明确了这个产品需求当下就要启动,但是当前要做到什么程度呢?
前者,对比不同需求的产品价值大小,再结合开发实现成本和耗时、是否需要追赶某个时间节点等,产品需求之间优先级不难得出。而设计师更多要思考的是后者。
举个例子:开学季马上要到了,产品经理了解到学校有类似“语文朗诵作业打卡”的作业打卡诉求。我们希望抢时间窗去满足这个大规模的家校场景,即“如何最快地满足每日/周重复的信息收集需求”?作业打卡场景可否延伸到其他打卡场景,不同的打卡有何共性或差异?
其中“最快”暗含的意思是“这个功能至少要做到什么程度才能满足最核心的用户需求”。这个时候,我们拉了一个表格,快速梳理不同用户角色(比如区分“打卡创建者”和“参与打卡者”)的体验链路,再决策各个体验环节的功能复杂度要到哪里。
从全盘中抽取出体验闭环的最小集
从全盘中抽取出体验闭环的最小集
 
不要忽视商业竞争中的时间差,因为抢先占领市场的产品实际上是提升用户迁移到竞争对手的成本。过去我们提倡匠人精神,不放过每一个细节。而当前激烈的市场竞争环境下,“有的放矢”比“抠细节”更加重要。
 
小结
我们归纳一下需求分析的思路,多问问这些问题:
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
需求分析是比较考验全局观、逻辑性、数理分析和共情能力的。工作中可以通过拉表格、思维导图、白板等工具梳理思路。如果你喜欢写文字,那就用写的方式。总之,切忌接到产品需求就动手出界面方案。
最后,小作者想留一个开放性问题:“AI能替代人类做产品需求分析吗?”期待大家的评论区留言~
 

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

产品设计如何利用心理学

ui设计分享达人

产品设计的成功除了依赖设计方案和技术实现,还与用户的心理密切相关。用户心里决定了我们用怎样的设计策略解决问题。我们常认为人们做决策时是理性的,但其实用户行为经常是非理性,会受到情绪、习惯和社交环境的影响。了解这些心理学规律能帮助我们更好地的预测和引导用户行为,优化产品体验,提高用户的粘性、留存率和转化率,从而产品商业价值最大化。
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学


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

货币符号视觉设计:体验、要素与趋势

ui设计分享达人

引言:货币符号在数字时代的设计挑战
货币符号是金融界面设计中的核心元素之一,它不仅传递着货币信息,还承担着用户交互的关键角色。从电子支付到电商平台,从投资界面到全球化交易,不同的行业和应用场景对货币符号的设计有着各自的需求和挑战。本文将从设计的角度出发,探讨货币符号在不同行业中的应用,分析其在功能性、可读性与美观性上的平衡,帮助设计师更好地应对多样化的设计需求。
 
一、
货币符号:标准化与多样性的平衡
1、平衡标准化与多样性
国际标准化组织(ISO)为各国货币制定了统一的三位字母代码和数字代码,同时也规定了一些常见货币的符号表示方法。例如:人民币的符号为“¥”,美元的符号为“$”,欧元的符号为“€”。
货币符号视觉设计:体验、要素与趋势
 
 
虽然标准化是货币符号设计的基础,但多样性也是不可忽视的因素。不同国家和地区的文化、语言和历史背景影响着货币符号的设计风格和使用场景。例如,阿拉伯国家在货币符号上通常会使用不同的书写方向,而拉丁美洲的一些国家则可能采用略有不同的符号变体。
在货币符号设计中,平衡标准化与多样性需要考虑功能性和用户体验的结合。一方面,标准化确保了全球用户的识别度和信任感;另一方面,多样性则为不同文化背景下的用户提供了更加个性化和贴近的体验。设计师在开发全球产品时,可以通过使用灵活的设计系统,将标准化的货币符号与本地化元素相结合。
2、主要货币符号一览
货币符号视觉设计:体验、要素与趋势
 
 
二、用户体验中的货币符号:认知、引导与品牌塑造
货币符号,在用户体验设计中,不仅用于标记金额,还在认知、引导和品牌塑造中扮演重要角色。合理的符号设计可以提升用户的识别速度,同时增强品牌的辨识度。
1、降低认知负荷,贴近用户习惯
常见的货币符号如 "¥"、"$"、"€" 等,因其频繁使用而被用户广泛认知,认知负荷较低,能快速被识别和处理。相比之下,较少见的符号如 "₦"(尼日利亚奈拉)或 "₸"(哈萨克斯坦坚戈)则可能增加用户的认知负担。设计师应优先选择用户熟悉的符号,并在界面设计中确保这些符号的清晰可见,避免用户因不熟悉而感到困惑。
货币符号视觉设计:体验、要素与趋势
 
 
2、视觉引导与用户行为驱动
货币符号的视觉呈现会直接影响用户的注意力和交互行为。设计师通过调整符号的大小、颜色和位置,可以引导用户聚焦关键信息,避免错误操作。在支付或结账页面,突出显示货币符号不仅能区分不同币种,还能帮助用户快速确认金额,提升交互的安全感和效率。
货币符号视觉设计:体验、要素与趋势
 
 
3、品牌塑造中的符号一致性
货币符号在品牌塑造中也有着潜在的影响力。通过统一的字体选择、配色方案和视觉风格,设计师可以将货币符号与品牌整体形象融为一体,增强品牌的一致性和专业性。特别是在全球化背景下,不同货币符号的统一设计能够提高品牌的全球辨识度,强化用户对品牌的信任与依赖。
货币符号视觉设计:体验、要素与趋势
 
 
三、货币符号的视觉设计要素:从位置到配色
货币符号作为金融界面中的核心元素,其视觉设计不仅关系到符号的选择,还涉及布局、字体、大小、颜色等多个方面。通过优化这些视觉要素,设计师可以提高货币符号的易读性与信息传达的效率。以下是几个关键的设计要素:
1、
位置与间距:紧密关联,确保阅读流畅
符号前置:
在大多数文化和书写规范中,货币符号通常放置在金额数字的前方,如"¥100"、"$50"。这种布局方式符合用户的认知习惯,使得货币种类一目了然。
货币符号视觉设计:体验、要素与趋势
 
 
间距适中:
货币符号与数字之间需要保持合适的间距,避免过于紧凑或分散。最佳间距通常在几个像素之间,并在响应式设计中根据屏幕大小进行调整,确保不同设备上的阅读体验流畅。
货币符号视觉设计:体验、要素与趋势
 
 
2、
字体选择:兼顾一致性与可读性
无衬线字体:
无衬线字体具有简洁、现代的特质,且可读性强,适用于屏幕和印刷。将货币符号与无衬线字体搭配能保持信息清晰度,尤其适合需要快速读取价格的金融界面。
货币符号视觉设计:体验、要素与趋势
 
 
等宽字体:
在需要对齐的文本中,等宽字体能确保货币符号和数字排列整齐,提升信息的可读性和对比性,使用户更容易比较数据。
货币符号视觉设计:体验、要素与趋势
 
 
3、大小与比例:突出层次感
货币符号通常设计得略小于数字部分,以确保视觉上的平衡感。如果符号过大,可能喧宾夺主,削弱数字的关注度;过小则容易被忽略。根据不同应用场景,设计师可灵活调整货币符号和数字的大小比例,特别是在促销或价格展示中,符号和数字可以接近,以突出价格信息。
货币符号视觉设计:体验、要素与趋势
 
 
4、
颜色搭配:强调对比与和谐
突出重点
:设计师可以通过颜色来强调货币符号,尤其是在电商或支付界面中,使用如红色等醒目的颜色吸引用户注意。然而,应避免过多的颜色切换,以防止混乱或干扰用户体验。
货币符号视觉设计:体验、要素与趋势
 
 
保持协调
:货币符号的颜色应与界面整体配色保持一致,避免冲突。一般建议采用与文本颜色相近或具有适度对比的颜色,以保持界面和谐,避免过度突兀。
货币符号视觉设计:体验、要素与趋势
 
 
5、
元素搭配:增强视觉引导
与按钮搭配
:在支付或结算等功能按钮上增加货币符号,能够强化操作的货币属性。例如,在"支付"按钮上加入货币符号,能够清晰传达该操作与付款相关。
货币符号视觉设计:体验、要素与趋势
 
 
与其他元素搭配:
货币符号也可以与钱包等金融图标结合使用,增强表意性。设计时应注意符号与图标风格的统一性,以保持整体设计的视觉一致性。
货币符号视觉设计:体验、要素与趋势
 
 
6、对齐方式:确保界面整齐有序
货币符号与数字的对齐方式也是影响视觉效果的关键因素。左对齐、右对齐或居中对齐各有优劣,具体选择应根据界面的整体布局而定。一般来说,左对齐适用于文本较多的界面,右对齐则更适合数字和金额为主的界面,有助于保持数值列的整齐性,从而提升界面信息的易读性。
右对齐
:在涉及金额显示的界面中,货币符号通常与数字右对齐,这种方式可以确保金额列表整齐排列,提升界面的易读性。
货币符号视觉设计:体验、要素与趋势
 
 
元素对齐
:货币符号应与其他界面元素,如标签、按钮等保持一致的对齐方式。例如,在价格标签旁边的按钮上,符号的位置应与按钮对齐,避免视觉上的不协调。
货币符号视觉设计:体验、要素与趋势
 
 
通过合理地设计货币符号的布局、字体、颜色和对齐方式,设计师可以有效提升界面中的视觉层次感和信息传达效率。在实际应用中,这些视觉要素必须根据用户需求和场景变化做出精细调整,从而优化用户体验。
 
四、行业视角下的货币符号设计:多场景应用
在金融和电商等不同行业中,货币符号的设计不仅需要满足基础的可读性和美观性,还需要根据不同的场景进行灵活调整。
1、电子支付与移动支付场景
在移动支付的界面中,货币符号的设计必须简单明确,能够让用户在瞬间识别金额,确保交易顺畅。由于移动设备屏幕有限,设计上应注重符号的简洁性与高对比度,确保在小尺寸屏幕上仍然具备良好的可见性和清晰度。例如,在支付宝或微信支付中,货币符号通常与金额保持较为紧密的视觉联系,以确保用户不会混淆支付金额。
货币符号视觉设计:体验、要素与趋势
 
 
2、投资与股票交易界面
投资和股票交易平台往往展示大量的数字数据,界面密度高。为了确保用户能够快速处理信息,货币符号必须足够醒目但不喧宾夺主。在这种场景下,字体选择尤为关键,符号应与数字保持一致的风格和比例,避免视觉干扰。同时,色彩的应用也需要足够谨慎,以红绿等传统的涨跌配色为主,货币符号应保持中性色调,确保与其他视觉元素相协调。
货币符号视觉设计:体验、要素与趋势
 
 
3、电商与零售平台
在电商平台上,定价信息是用户决策的重要因素,货币符号的设计需要既突出价格信息,又不显得过于突兀。设计师可以根据不同的定价策略,调整符号的位置、大小和颜色。比如,在促销场景下,货币符号与金额常常会被设计得更大、更显眼,以吸引用户注意力;而在常规商品页面,符号则更为简约,以便用户迅速浏览多款商品。
货币符号视觉设计:体验、要素与趋势
 
 
五、未来展望:数字货币时代的符号设计趋势
随着数字货币的兴起,货币符号设计正面临新的挑战与机遇。在未来,货币符号的设计不再局限于传统的纸币和硬币表达方式,而是逐步进入更为抽象的数字化范畴。
1、多货币共存:增强识别性
未来的金融体系将可能出现多种不同形式的货币同时存在,如法定数字货币、加密货币等。在这种环境下,货币符号需要具有更强的辨识性,以帮助用户快速区分不同类型的货币。例如,比特币(₿)、以太坊(Ξ)等加密货币的符号设计,已经有别于传统货币符号。未来,设计师可能需要创造更多具有独特视觉特征的符号,以适应多元货币并存的需求,同时保证用户能在复杂的金融界面中迅速识别出各类货币。
货币符号视觉设计:体验、要素与趋势
 
 
2、动态设计:适应不同设备与场景
随着金融交易场景的日益多样化,货币符号的设计可能不再是静态的。未来,数字货币符号或许会以动态、互动的形式呈现,以适应不同设备屏幕和使用场景。例如,在智能手表、增强现实设备或虚拟现实场景中,货币符号可能根据界面需求进行实时调整。这种动态设计可以确保符号在不同大小、不同分辨率的屏幕上保持一致的辨识度和清晰度。
货币符号视觉设计:体验、要素与趋势
 
 
3、统一标准与全球化适应
数字货币的全球化使用趋势意味着符号设计必须具有全球通用性和跨文化适应能力。随着跨国交易的频繁,设计师需要考虑不同地区用户的文化背景和语言习惯,确保货币符号在全球范围内都能被广泛接受和理解。这可能需要一个统一的标准,类似于现有的ISO货币代码标准(如USD、EUR),为数字货币符号设计提供指导。未来,全球化标准可能不仅限于编码,还会扩展到视觉符号设计领域。
货币符号视觉设计:体验、要素与趋势
 
 
4、安全性与可信度的视觉传达
数字货币与传统货币最大的不同在于其依赖于虚拟网络进行交易,这使得安全性成为用户最关心的问题之一。未来的货币符号设计将不仅仅是传达货币的价值,还需要在视觉上表达出交易的安全性与可信度。通过更直观的视觉设计,用户可以一眼判断出该交易是否安全可信。例如,未来的货币符号可能会融入更多与安全、认证相关的视觉提示或反馈机制,帮助用户在数字化环境中建立信任。
货币符号视觉设计:体验、要素与趋势
 
 
结语
随着数字化的迅速发展,货币符号设计面临新的挑战与机遇,不仅要在标准化和多样化之间找到平衡,还要通过合理的视觉设计,提升符号在不同场景中的适应性和可识别性。无论是在电子支付、投资交易,还是电商平台上,精致的货币符号设计不仅能优化用户体验,还能强化品牌形象,提升用户信任。
展望未来,随着数字货币的普及和全球化的推进,货币符号的设计将更加注重多样化与安全性。设计需要不断适应变化的技术和用户需求,推动货币符号在不同设备和文化背景下的统一性与普遍适用性。


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

十个设计思考选择

ui设计分享达人

这些设计选择题你会怎么做?
 
 
 
 
一、你更倾向于哪个设计布局?
 
思考方向:1、从业务属性的角度思考布局结构;2、从创建内容量来思考;3、通过添加交互切换来自定义结构布局等。
这些设计选择题你会怎么做?
 
 
 
 
二、你更喜欢哪个设计方案?
 
思考方向:1、金刚区功能的重要性和是否存在主次关系来思考;2、Banner 设计的独立性和沉浸感方面思考;3、界面设计视觉张力层面的思考等。
这些设计选择题你会怎么做?
 
 
 
 
三、你会选择哪种设计效果?
 
思考方向:1、是否需要添加背景图或者背景色;2、视觉效果带来的沉浸感层面思考;3、突出界面上层还是下层内容方向来思考;4、卡片式效果的选择角度等。
这些设计选择题你会怎么做?
 
 
 
 
四、你觉得哪种交互体验更好?
 
思考方向:1、全部筛选条件的权重和是否存在主推条件;2、用户对进一步筛选条件的需求度;3、筛选条件的数量等角度思考。
这些设计选择题你会怎么做?
 
 
 
 
五、你觉得哪种布局方案更合理?
 
思考方向:1、熟人社区还是陌生人社区方面思考;2、突出内容还是突出发布者;3、图片的重要性和图片数量等方面思考。
这些设计选择题你会怎么做?
 
 
 
 
六、你觉得哪种视觉感官度更好?
 
思考方向:1、品牌色的突出程度;2、信息之间的对比度强度大小来思考;3、整体界面的视觉焦点突出位置等思考。
这些设计选择题你会怎么做?
 
 
 
 
七、你更倾向于哪种展示模式?
 
思考方向:1、产品和内容属性等方面思考;2、内容的动静属性层面思考;3、信息分发突出筛选逻辑还是推荐逻辑等。
这些设计选择题你会怎么做?
 
 
 
 
八、浏览文章时需要显示标题吗?
 
思考方向:1、结合大部分标题的字数分析;2、标题对文章内容的干扰度层面思考;3、标题和文章内容的关联程度等。
这些设计选择题你会怎么做?
 
 
 
 
九、哪种设计布局体验度更好?
 
思考方向:1、强化品牌的程度和品牌量等角度综合分析;2、推荐信息的密度与上下结构的差异性等方面思考;3、视觉张力与强化栏目的焦点选择角度等思考:4、布局结构是否过度自然等。
这些设计选择题你会怎么做?
 
 
 
 
十、这两个设计方案你会怎么选?
 
思考方向:1、图片的孤立性和沉浸感等角度分析;2、空间感和信息层级感等角度思考;3、界面设计感官的整体性思考;4、局部功能的关联性等分析。
这些设计选择题你会怎么做?
 
 
 
 
小结
 
通过这些案例设计的对比,可以训练我们多方面的思考和分析能力,从不同角度思考设计方案的合理性。希望本栏目可以带给大家更多思考,案例与观点属于个人理解,不足之处欢迎大家留言指正。
这些设计选择题你会怎么做?
 

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

信息架构优化 | 如何设计产品中的列表项?

资深UI设计者

本次关于“列表项”的规范化设计是在整个产品 信息架构优化 (Information Architecture Optimization) 背景下进行的。把列表项做得更具通用性,从开发的角度,能更好地完成项目落地,以及降低后期维护的成本。从用户的角度,产品交互的一致性能让用户快速熟悉产品,从而提升产品的 易用性。

UI设计中的信息层级设计的重要性

资深UI设计者

在设计中,我们通常会用到很多设计法则,而对于这些法则的由来总是一知半解。这次我整理了这些法则的概念和一些简单的运用。设计法则来源于生活又运用于生活~

日历

链接

个人资料

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

存档