首页

7大色彩技巧让你界面更吸睛

清阳

色彩在我们日常设计中起着定生死的作用,它是设计的灵魂,舒适的色彩搭配可以让设计师一遍定稿,感觉在自己的设计生涯中,大部分都是在与色彩的博弈中度过的,虽然客户可能不懂色彩原理,可是客户天生都是色彩的感受家,什么样的色彩搭配美,通常他们瞄一眼就会有定论,不用你去辩解太多,不好的搭配,纵使有千万种理由,也说服不了客户,所以好好研究色彩以及每一种色彩传递的情感对我们做好设计至关重要。
 
7大色彩技巧让你界面更吸睛
 
 
 
目录
一、 色彩的定义
二、 色彩的三属性
三、 色彩的三种常见模型
四、 色彩的语意及它的应用
五、 不同场景下的色彩应用
六、 色彩在B端设计中的作用
七、 B端色彩设计使用的原则
 
7大色彩技巧让你界面更吸睛
 
 
 
 
 
一、色彩的定义?
1、物理学角度
色彩是光的属性,当光波通过物体时,物体会吸收某些波长的光,而反射或透射其他波长的光,这些被反射或透射的光波长度决定了我们看到的颜色。
 
2、心理学角度
色彩是人脑对光波长的视觉感知,不同的波长刺激视网膜上不同类型的感光细胞,进而产生不同的色彩感觉。
 
3、 艺术学角度
色彩是艺术创作的重要元素,它不仅关乎视觉感受,还与情感、文化、象征意义相关联。
 
4、 设计学角度
在设计领域,色彩是传达信息、影响情绪和创造美感的关键工具。
 
5、 计算机科学角度
在数字图像处理中,色彩通常通过颜色模型(如RGB、CMYK等)来定义,这些模型通过不同比例的原色或色料混合来表示各种颜色。
 
 
 
二、色彩的三属性
1、色相
色相是指不同颜色之间的差别,即不同颜色的表象和名称,每个颜色都有自己的专属ID,如红、橙、黄、绿、青、蓝、紫等。不同的色别都可用光谱中的波长来表示,人的眼睛可分辨出的色别有180种左右。
7大色彩技巧让你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情况下,不同色别的明暗程度不同。如黄色光比红色光更明亮,而红色光则比青色光要明亮。
同时,同一色相在受光强弱或者物体对光的吸收、反射性能不同的情况下,会呈现不同的明暗变化和差异。
7大色彩技巧让你界面更吸睛
 
 
  
 
3、饱和度(纯度)
饱和度(纯度)是指同一色别的纯净度和鲜明度的变化。从色光的角度而言,光的波长单一程度越高,饱和度就会越高;不同色别所达到的饱和度不同,一般情况下,红色的纯度可达到最高,绿色的则相对较低;同一色相深浅不同的颜色有不同的饱和度;黑白色光的渗入会导致饱和度和明度发生变化;通常,照明光线的性质、物体表面结构对光线吸收与反射的性能等因素影响饱和度。
7大色彩技巧让你界面更吸睛
 
 
 
 
 
三、色彩的三种常见模型
1、HSB模型
HSB模型也叫HSV模型,其中H代表色相,即颜色的种类;S代表饱和度,即颜色的纯度;B(V)代表亮度,即颜色的明亮程度。
 
这种色彩模型是我日常在的设计工作中用的最多的一种色彩模型,如果在同色系中如果只想让他们有细微的变化,我通常会通过调节S和B的百分比数值来达到自己想要的目的。
7大色彩技巧让你界面更吸睛
 
 
以上就是我在设计项目中,运用该色彩模型做的一个实战,项目中用到了一个图形,需要用同色系来表达,我保持了H色值的不变,让S值和B值都发生着微妙的不同,于是就产生了四五种同色系的绿色,该色彩模型特别的好使,也鼓励大家多在实战中运用这样的色彩模型,简单实用。
 
H色相:Hue,以角度(0°-360°)表示
S饱和度:Saturation,以百分比值(0%-100%)表示
B/V 亮度:Brightness 或 Value,以百分比值(0%-100%)表示
 
 
 
 
2、RGB模型
RGB是从颜色发光的原理来设计定的,通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯,当它们的光相互叠合的时候,色彩相混,而亮度却等于三者亮度之总和,越混合亮度越高,即加法混合。
 
红、绿、蓝三个颜色通道每种色各分为256阶亮度,在0时“灯”最弱——是关掉的,而在255时“灯”最亮。当三色灰度数值相同时,产生不同灰度值的灰色调,即三色灰度都为0时,是最暗的黑色调;三色灰度都为255时,是最亮的白色调。
7大色彩技巧让你界面更吸睛
 
 
R红:Red,以数值(0-255)表示
G绿:Green,以数值(0-255)表示
B蓝:Blue,以数值(0-255)表示
7大色彩技巧让你界面更吸睛
 
 
 
 
3、CMYK模型
虽然RGB模型色彩更加的丰富,但是很多颜色不能完全打印出来,于是CMYK模型就成了打印、印刷的不二选择。C是青、M是品红、Y是黄、K是黑,通过颜料反射和吸收光线来显色。
 
记得之前自己从事平面工作的时候,就经常要用到CMYK模式,因为印出来的效果偏差是最小的,是最靠近设计效果图的。
7大色彩技巧让你界面更吸睛
 
 
通过对比,我们发现RGB色彩模型颜色显示上确实更加的绚丽丰富些,而CMYK的色彩模型颜色显示上就黯淡了不少,但是要印刷的话,就必须转化为成CMYK的色彩模式。
 
R青:Cyan,以百分比值(0%-100%)表示
M品红:Magenta,以百分比值(0%-100%)表示
Y黄:Yellow,以百分比值(0%-100%)表示
B黑:Black,以百分比值(0%-100%)表示
 
 
 
 
四、色彩的语意及应用
1、红色的语意及应用
红色代表热情、活力、强烈的情感和爱。它可以象征着激情、勇气和行动力,也常与兴奋、热烈的情绪相关。
著名的快餐品牌肯德基,在自己的网页及店铺装修中都运用了红色,因为红色是所有颜色中最容易引起人们注意的颜色,也是很容易刺激人们食欲和购买的颜色。
7大色彩技巧让你界面更吸睛
 
 
 
 
2、橙色的语意及应用
橙色传达温暖、欢快和积极向上的情感;它常与乐观、友好、创造力联系在一起,给人以活力充沛和充满希望的感觉。
百度网盘的这个登录界面就运用了橙色,给人阳光、向上、热情的感觉,通过色彩的运用一下让界面有了温度。
7大色彩技巧让你界面更吸睛
 
 
 
 
3、黄色的语意及应用
黄色象征快乐、开朗和乐观;它能带来明亮、愉悦的情绪,代表着阳光、温暖和智慧。
叫叫阅读是一款非常著名的儿童阅读软件,整个色调采用的是非常有活力的黄色,这与儿童处于好奇与活力的阶段相符合,这种高亮的黄色,饱和度和明度都非常的高,特别容易抓住儿童的目光,同时它是一种快乐的颜色,也是一种能激发孩子创造力和想象力的颜色,特别符合儿童成长的需求。
7大色彩技巧让你界面更吸睛
 
 
 
 
4、绿色的语意及应用
绿色代表平静、和谐与生机。绿色常与大自然相关,给人带来安宁、放松的感觉,也象征着成长、希望和新生。
青椒云的目标用户是吸引年轻用户和创意工作者,绿色这种富有活力和创意的颜色更容易吸引他们的关注,同时绿色也代表着健康、可持续发展的企业形象。
7大色彩技巧让你界面更吸睛
 
 
 
 
5、青色的语意及应用
青色寓意清新、宁静和沉稳,它给人一种冷静、理智的印象,同时也带有一丝清新的活力。
青色是一种带有蓝色和绿色的颜色,因此青色既有蓝色的专业感、信任感,也有绿色的生机感、希望感。
以下是日本某牙医品牌的官网首页,病人希望在这里带来健康与复苏,也希望获得专业、可靠的治疗,而青色就成了很好传递这种情感的品牌色。 
7大色彩技巧让你界面更吸睛
 
 
 
 
6、蓝色的语意及应用
蓝色代表冷静、忠诚和信任;它常与沉稳、深邃的情感相关,能带来宁静、平和的心境,也象征着智慧和理性。
123云盘使用了蓝色,蓝色符合社会的普遍审美认知,接受度比较高;其次,蓝色给人安全的感觉,也符合云盘的初衷,给用户安全的存储服务。
7大色彩技巧让你界面更吸睛
 
 
 
 
7、紫色的语意及应用
紫色象征神秘、高贵和浪漫;它常给人一种优雅、奢华的感觉,同时也带有神秘莫测的氛围,与梦幻、创造力等情感相关。
美柚的主要用户是女性,紫色在色彩心理学中常被认为具有优雅、神秘、浪漫的特质,这些特质与女性的审美和情感需求相契合,能够吸引女性的关注。
7大色彩技巧让你界面更吸睛
 
 
 
 
8、白色的语意及应用
 
白色代表着纯洁、神圣、信任、安静、朴素和雅致,是一种充满纯洁的颜色,它可以跟任何颜色和谐的共生。
以下是熊掌ID的登录界面,颜色用了大量的白与灰,简洁又不失大气,传递出了一种质朴、雅致的感觉。 
7大色彩技巧让你界面更吸睛
 
 
 
 
 
五、不同场景下的色彩应用
 
1、商场的色彩为什么总是多彩热烈的?
 
❶ 吸引顾客注意力
在众多商业场所中脱颖而出,色彩鲜艳的商场外观和内部装饰更容易在人们的视线中凸显出来,吸引过往行人的目光,激发他们的好奇心和探索欲。
 
确实多彩的颜色更加容易引起我的关注,这不看到商场的美图,都忍不住拍照留念了,成功的吸引了我的目光。
7大色彩技巧让你界面更吸睛
 
 
 
❷ 增强可见性
即使在较远的距离或在繁忙的街道上,多彩热烈的配色也能让商场更容易被发现,提高商场的知名度和曝光度。
多彩的配色,让我远远的就被商场美轮美奂的插画吸引,大大增加了商场的可见性。
7大色彩技巧让你界面更吸睛
 
 
 
营造愉悦氛围
色彩可以激发积极情绪,明亮、鲜艳的色彩往往与快乐、活力和兴奋等积极情绪相关联。当顾客进入一个色彩丰富的商场时,会感受到一种愉悦和轻松的氛围,从而更愿意在商场中停留和购物。
星沙永旺城的美陈设计很好,墙面采用极具诱惑力的颜色与美食,把小小实物十倍放大,增加了视觉看点,让人忍不住过去拍照晒一下,大大增加了愉悦性。
7大色彩技巧让你界面更吸睛
 
 
 
缓解压力
在现代生活中,人们常常面临各种压力。走进一个多彩热烈的商场,可以暂时摆脱日常的烦恼和压力,享受购物的乐趣。
特别可爱夸张的插图设计,引发了丝丝童趣和欢乐,让人短暂忘记压力,远离烦恼。
7大色彩技巧让你界面更吸睛
 
 
 
引导消费行为
商场通常会使用不同的颜色来区分不同的区域,如购物区、餐饮区、娱乐区等。这样可以帮助顾客更快速地找到自己感兴趣的区域,提高购物效率。
突出重点商品,对于一些重点推荐的商品或促销活动,商场可以使用鲜艳的色彩来突出展示,吸引顾客的注意力,引导他们进行购买。
7大色彩技巧让你界面更吸睛
 
 
 
塑造品牌形象
6.1 传达个性和风格
不同的商场可能有不同的品牌定位和目标客户群体。通过选择特定的色彩组合,商场可以传达出自己的个性和风格,吸引与之相符的顾客。
 
6.2 增强品牌记忆度
独特而鲜明的色彩搭配可以让商场在顾客的心中留下深刻的印象,提高品牌的记忆度和辨识度。
 
芙蓉区的龙湖天街主要面向中等收入新兴家庭,是一个区域型的购物中心,集购物、餐饮、休闲、娱乐等多业态于一体,为消费者提供一站式商业综合体,它在餐饮区采用了大量的吃喝玩乐的插画,来引导用户消费。
7大色彩技巧让你界面更吸睛
 
 
 
 
2、为什么蓝色在B端设计中广泛应用?
❶ 视觉特性方面
1.1 稳定性
蓝色给人一种沉稳、可靠的感觉。在B端产品中,用户往往需要处理重要的业务数据和进行复杂的操作,蓝色的稳定性可以让用户感到安心,增强对产品的信任感。
7大色彩技巧让你界面更吸睛
 
 
 
1.2 专业性
蓝色通常与科技、专业领域相关联。B端产品通常面向企业用户,需要传达出专业、高效的形象,蓝色正好符合这一需求。
 
❷ 心理影响方面
2.1 减少焦虑
相比鲜艳、刺激的颜色,蓝色较为柔和,不容易引起用户焦虑和紧张的情绪;在B端使用场景中,用户可能需要长时间使用产品,蓝色的舒缓效果有助于提高用户的使用体验。
 
2.2 提高专注度
蓝色具有一定的沉静作用,能够帮助用户集中注意力,专注于工作任务。对于B端用户来说,高效完成工作是首要目标,蓝色的这一特性有助于提高工作效率。
 
B端产品在心理上追求的是类似如下图的这种宁静式的体验,跟教育有着异曲同工之处,就像这个易贝乐少儿英语一样,用大面积的蓝色,希望孩子在这里能很快的安静下来学习、专注自己的事情。
7大色彩技巧让你界面更吸睛
 
 
 
❸ 行业习惯方面
3.1 科技行业引领
许多知名的科技企业和软件产品在 B 端市场中广泛使用蓝色,逐渐形成了一种行业习惯。其他企业在设计B端产品时,也会倾向于选择蓝色以符合用户的认知和期望。
 
3.2 传统与延续
在过去的设计中,蓝色在 B 端领域的成功应用使得它成为了一种传统选择。设计师们在延续这一传统的同时,也不断优化和创新蓝色的运用方式,使其更符合现代设计趋势和用户需求。
 
嘉为科技是一个有着20多年技术沉淀的科技公司,它的官网和产品风格一直是沿用着科技蓝的风格,应该也是基于传统的沉淀吧。
7大色彩技巧让你界面更吸睛
 
 
 
❹蓝色可以提高产品的复用率
很多用户都能接受蓝色的B端界面,当面对有差不多需求客户时,同一套UI,可以多次复用,可以减少开发成本和设计成本,这也是自己通过长期实战观察发现的。
 
一个UI风格,用在了两个项目中,不同的用户,趋向同样的风格,说明蓝色在大家心目中的接受度是非常的高,用蓝色可以促进设计的多次复用。
7大色彩技巧让你界面更吸睛
 
 
在日常的项目中,我看到的B端UI界面是千篇一律的稳重,不追求过于刺激的颜色搭配,通常都比较的干净简洁,不像商场里面的美陈背景设计,色彩对比非常的强烈,比较的吸引人眼球。
 
有一次我厌烦了常规的稳重风,探索一种大胆的色彩风格时,虽然风格比较新颖,可是发出去客户的接受度不高,觉得太不稳重了,然后重新按照以往习惯进行设计时,就很好,客户一致认同。
 
可见每个领域都有自己的色彩运用习惯,商场需要吸引人眼球、刺激消费,越大胆越好,可是B端设计需要提供一个让人平静去处理工作事项的环境,它需要安静,不需要过于刺激的颜色搭配。
7大色彩技巧让你界面更吸睛
 
 
 
 
 
六、色彩在B端设计中的作用?
1、通过色彩向用户反馈操作结果及当前状况
比方在日常设计当中,红色代表流程失败,绿色代表流程成功,橙色代表信息有告警,蓝色代表着链接,同时不同的按钮颜色也可以很好的区分按钮状态,在反馈结果和状况方面,色彩起着非常重要的作用。
 
下面这个IDC运营的监测平台,它就是通过颜色来区分不同的告警级别的,可见颜色在B端产品中的重要性。(备注:图中数据都不是真实数据,仅做展示)
7大色彩技巧让你界面更吸睛
 
 
 
 
2、可以很好的进行品牌传达
B端设计中大面积使用品牌色,可以强化品牌形象,使用与品牌标志风格相近的色彩,可以帮助用户快速识别和记住品牌,在不同的B端产品界面中使用统一的色彩方案,有助于建立品牌的连贯性和一致性,增强用户对品牌的信任。
 
例如我给湖南高速设计的一套B端界面设计,用户强烈要求改变传统的蓝色风格,要求整套界面设计要用湖南高速品牌色-绿色,说明在追求大流和品牌色之间,客户更加倾向品牌的传达。(备注:图中数据都不是真实数据,仅做展示)
7大色彩技巧让你界面更吸睛
 
 
 
 
3、颜色可以很好的进行信息区分
在B端界面设计中,颜色在帮助信息区分起着非常重要的作用,通常可以通过不同的色彩来区分功能区域,可以让用户更清晰地了解界面的结构和布局,例如,导航栏使用一种特定的颜色,而内容区域则使用另一种颜色。
 
我设计的天翼写作,就是这样的设计思路,导航栏和内容区的颜色完全不一样,这里颜色起到了很好的区分作用。
7大色彩技巧让你界面更吸睛
 
 
 
 
4、舒适的色彩搭配可以提升用户体验
选择合适的色彩对比度可以增强文本的可读性,减少用户的视觉疲劳。例如,黑色文字在白色背景上通常比较容易阅读。
 
选择适当的色彩可以营造出专业、高效、舒适的工作氛围,从而影响用户的情绪和感受,提高用户的使用体验。
 
我参与的这个后台界面,就是通过合理的色彩搭配来引导用户使用的,当用户已经完成的环节都是用绿色表示,没有走完的流程就会是灰色的,寓意指示非常的鲜明,很好的解决了用户不知道清晰进程的卡点,提升了用户体验。
7大色彩技巧让你界面更吸睛
 
 
 
 
5、色彩可以传递性格
人的性格有活泼的、文静的、沉稳的、深邃的,其实色彩也是有性格的,不同的色彩也有不同的性格,当我们对色彩的性格有足够多的了解,在面对不同的客户时,我们对色彩的拿捏以及设计需求的把握时,会更加的游刃有余。
7大色彩技巧让你界面更吸睛
 
 
 
我们平常确实是在做设计,但是我们更多的是在与人打交道,我们更好的聆听,会帮助我们更快的抓取到客户的喜好,快速做出满足客户需求的设计,少受加班之苦。
比方说我之前给云门户设计的一套UI,客户的决策层是男性,且年龄偏大,他们就偏爱深沉的UI风格;而我负责的天翼云电脑专家,客户的决策层是女性,且年龄偏年轻,她每次就喜欢轻盈、明快的UI色调,不同的决策层客户,就会带来不同的设计结果。
 
7大色彩技巧让你界面更吸睛
 
 
 
 
 
七、B端色彩设计使用的原则
1、B端设计中,色彩设计应遵循6:3:1原则
在这个登录页面中,我就是运用的6:3:1原则,60%的主色,30%的次要色,10%的点缀色;使用了大面积的蓝色和蓝灰色,最后使用一点点的橙色,这样的配色会显得高级。
7大色彩技巧让你界面更吸睛
 
 
 
 
2、文字、卡片背景色和边框都使用无彩色
为了保证画面风格的统一、干净整洁,文字颜色、边框颜色、以及边框背景色都需要用到无彩色,通常通过颜色的深浅来区分信息的层级关系。
 
比方说我参与的星辰大模型AI文档生成能力的应用,里面无论文字颜色还是底色都是运用的无彩色,只是通过了色彩深浅变化来做了层级区分,因为无彩色可以起到很好的降噪作用,既传达了信息,又不会显得界面凌乱复杂。
7大色彩技巧让你界面更吸睛
 
 
 
 
3、需要凸显的内容,用明度和纯度比较高的色彩
比方说,日常我们设计的卡片都是用的白色,而底色我们用的是灰色,因为卡片里面的内容都是比较重要的信息,需要用一个亮度比较的高的颜色,让内容往前走,而灰色的背景通常就往后走的感觉,这样能跟卡片形成一个一前一后的对比,更好的帮助内容进行传播。
 
比方说我设计的这个IT运维监控平台的首页,物理主机、网络及安全设备、工单、在途工单这几个指标是非常关键的,所以他们的图片底色用了纯度比较高的有彩色来标识。
 
7大色彩技巧让你界面更吸睛
 
 
 
 
4、设计前一定要有定色调的意识
作为设计师,我们的设计工作其实就是在设计一种感觉,一种情绪,设计前定调的意识真的太重要了,感觉对了,什么都就对了。
 
比方说我前段时间接到了一个B端的大屏可视化需求设计,客户说之前的大屏设计不喜欢,希望重新出一个新的设计,然后公司的需求对接人员在给我下达需求时,真的就只是给我下达了这几个字,让我重新出一个设计试试。
 
以我的职业直觉,感觉这个需求是不够细化的,于是我就多问了几句,我问客户是想要常规的蓝色调的还是别的?果然一问,客户说不希望再用常规的蓝色的,希望新的设计要用他们的品牌色绿色,刚听到这几个字的时候,我以为这次我把握住需求了,在收集参考图的时候,我发现常见的绿色大屏有深色的和浅色的,根据自己以往的作图习惯,我觉得深色会更加的受欢迎一些,我自以为是的朝着深色的方向去出图,出到了一半的时候,我内心有些许的忐忑,我于是找了一深一浅的参考图,让同事跟客户确认一下,客户是想要深色的感觉,还是要浅色的感觉,这次沟通又给了我深深的一击,客户不按常理出牌,说希望按浅色的风格来出图。
 
在出稿之前,通过自己反复的沟通确认,发现设计前的定调意识真的太重要了,要不是有出图前一波三折的反复确认以及需求的细化,就不会有后来的一遍过稿。
7大色彩技巧让你界面更吸睛
 
 
 
5.设计的灰色尽量使用带有色彩偏向的灰
不管我们设计什么色系的界面,都避不开用到灰色,在设计中用跟主视觉相符的灰,会使得界面更加的高级、协调与美观,注意好了这个小细节,会给我们的设计加分不少。
 
下面是我日常体验到的两个界面,上面综合管理平台里面的灰色就没有跟主色调蓝色相呼应,灰色没有向蓝色倾斜,界面看起来就没那么美观;下面通义千问的灰色设计就非常的注重细节,灰色偏紫,整个界面看起来浑然天成,毫无违和,美感、档次瞬间提升好几个等级。
 
一个微小细节的在意,在无形中拉高了设计的高度,十个细节乃至更多细节的在意,就会带来更多意想不到的结果。
 
7大色彩技巧让你界面更吸睛
 
 
 
 
总结:
以上就是我最近对色彩的一些顿悟、感受和学习收获,在不断的复盘总结中,我们总会收获一些新的认知,通过这次色彩的复盘之旅,发现色彩对设计师真的太重要了,希望我的分享对大家有启发,不足之处也欢迎大家留言交流。


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

以用户为中心的交互设计思维

清阳

 
聊聊关于设计思维的内容,会从产品设计、体验设计、交互设计三个方面入手。
目前是第三篇,关于交互设计思维的内容。到这里设计思维的内容全部结束了。
感谢
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维


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

B端基础 | 52000余字总结 B 端基础设计知识

清阳

最近看汪曾祺的《叹息桥》中的一句话,我必须分享给你。缘起我在人群中看见你,缘散我看见你在人群中。是的我想你在人群中看到我。这就是最初我分享这系列设计文章的初衷。
 
慢慢发现其实分享也是一件快乐的事情、而且在分享的过程中我自己也收获了很多。而且对设计的理解也更深了。更快乐的是收获了一群一起同行的小伙伴、这个还挺开心。和他们一起在群里吹水、一起吐槽。一起讨论问题、那真的是快乐无边。哈哈哈
 
上面扯多了。我们开始今天的内容。今天内容分三部分、第一部分内容总结是对我写的这个系列文章每一篇文章内容和核心的小总结。第二部分这个系列的文章页算是告一段落了、下一阶段我会做些什么。第三部分分享一些我写文章的感受、然后煽煽情。
 
1、内容总结
因为在写这个系列的文章时我加入了很多扩展知识。希望告诉你更多。这里我会把主要的这个系列的知识总结一下让你尽量一次看完。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
1.1、登陆页面
 
最近就在做我们系统的登陆页面优化。回头我会写一个项目总结给你们看。这里介绍一下B端登陆页面该怎么去做。其实还挺简单了。因为现在主流的布局就那几个。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
登陆页面:布局分为三种;居左、居右、居中
页面元素:导航、登录框、背景(装饰元素)、互联网信息。
导航高度:68px或48px、文字大小:14(大部分)16(也可以)
登录框大小:大小尺寸不统一、没有固定的尺寸。可以根据自己和领导的喜好决定。对还有要承载的内容多少。
登录方式:扫码、手机号、账号、第三方
标题切换字号:我喜欢用26px(也要其他的16、/18、/20)
输入框高度:48px
按钮文字和高度:16px、和输入框高度一直就行。
背景可以是配的插画(这种最简单)、一般都是科技风
底部要不就是单纯的互联网信息。要不就是快捷入口、联系方式什么。这个就不多说了正常排版就行。
 
1.2、筛选
 
筛选相对是很简单的部分把、因为你直接用规范里的组件。虽然不会很优秀、但是刚重要的是不会出什么错误。主要是就大厂规范能够快速的帮你解决问题。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
筛选的意义:定位数据、缩短查询路径、数据内容分类
 
筛选类型:基础筛选组件(就是我们常见的页面顶部的筛选)、高级筛选(就是那些需要你定义想一想的筛选部分)
 
筛选布局:顶部和左侧
 
筛选样式:平铺;折叠;Tab筛选;单侧选择;表头;综合
 
1.3、栅格
 
这里其实还简单的、首先你要明白栅格在我们的设计里面很重要。你不用当然也可以呀。但是你想要做的更好那就用起来你会有意外的收获。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
怎么用:直接看ant design、TDesign、阿科desing的规范就行、写的很清楚。
 
注意点:不要硬套、我们要根据自己的系统去自己定制。比如我们系统、用的是ant design的框架、但是我们的网格系统是自己定制的。因而我们的边距不是24px、我们是20px
 
1.4、颜色
 
这部分相对来说是我自己的弱项、在写当时的文章的时候也是收获颇多的。明白了大厂规范是怎么确定自己色彩设计规范的。也清楚了自己应该怎么去规定自己的设计规范。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
主色确定:常见的方法、1、用自己品牌logo的颜色;2、用行业色
 
配色确定:我一般是找竞品、或者优秀的配色方案、来确定自己的。多参考大厂的配色方案。虽然不全是好的。但是好的还是站大多数的。
 
大厂色彩:这里我分享了大厂的色彩是怎么去确定的、如何去确定。可以去看看。我在自己的工作中色彩的应用就参考了ant Design的色彩应用方式定制的。
 
1.5、字体
 
字体部分我觉得最有意思是的是分享了、我们宋体、楷体、隶属、甲骨的发展历史和由来。还有就是如何去设计一款自己的字体。还有后台字体规范的制定
B端基础 | 52000余字总结 B 端基础设计知识
 
 
中国文字:这里中国文字的发展历史、所有字体的产生都是有自己发展的历史原因的。很有意思。建议你看看、可以当做你喝酒吹水的谈资。
 
字体规范:我们大部分的字体会采用黑体、可读性强、亲和、现代、清晰。
 
字号:最新的字体12px、正文、14px、通过+2, +4,+8,+12,+16 的步数增长规律
 
行高:通过逻辑得到这样一个公式:「 行高 = 字号 + n 」,8 作为变量正好同时满足与 1.5 倍的「 14px & 16px 」常用字号行高保持一致,总体文字间隙稳定呼吸,行高空间较一致得出计算公式:「line-height = font size+8」
 
字重(就是字粗):建议使用两种常规和加粗(在前端里一般就是400和500)
 
颜色:我是主张带有色彩倾向的颜色应用的。根据字体样式的设计原则,制定了简易好记的透明度数值区间并且将该字色与界面系统的色彩系统结合,文字显示色彩对比满足至少1:4.5( AA级别)。且验证了其中的实用性,共分为亮暗两种模式,4 个色阶。
 
1.6、ICON(图标)
 
你要统一风格成套的去找参考和应用。在我们的系统里我是自己画icon的然后传到阿里巴巴矢量图库让开发直接引用。这个是自己累点、但是可以保障实现效果。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
设计原则:准确、简单、节奏、愉悦。
 
设计实战:采用栅格
我是用的阿里巴巴矢量图库的设计规范、因为我要传到这个平台应用
 
ICON分类:交互性图标、装饰性图标、说明性图标
 
1.7、按钮
 
按钮我觉得这部分是相对简单的、也是要做到风格的统一。直接用大厂组件然后根据自己平台的风格、不如圆角的大小其他的倒是没什么了。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
常规按钮:次要按钮、主要按钮、文字按钮、图标按钮
 
按钮状态:可用、禁用、加载、悬浮
 
尺寸:把按钮分成:迷你、小、中、大,四种尺寸。高度分别为:24px/28px/32px/36px。推荐及默认为尺寸「中」。
 
样式:各个规范对按钮形状的规范基本都一样。提供长方形、正方形、圆角长方形、圆形四种形状。
 
 
布局:这里分享了两个概念、古登堡法则、费茨定律、告诉你我们为什么这么排版。对产品和甲方很有用、哈哈、这是我的秘诀。
 
1.8、弹窗
 
后台弹窗是一个很复杂的内容、但是也是一个相对很好处理的部分。只要你做好规范这部分、简直就是一点开胃小菜。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
弹窗是一个我头痛的问题因为不太好规范。但是我还是把这个弹窗系统、在我们的体系中形成了一个小的规范。感谢领导、感谢前段端的龙哥。
 
我们把前段粗略的分为400px、600、800、1000、最大、广告。业务里我们会采用4、/6、/8、/1、最大、推广和通知我们就统一的尺寸。
 
1.9、表单
 
什么是表单:我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
我们在后台系统中、大部分的场景都会使用上表单。信息采集呀、编辑数据呀等。在表单设计时要遵循的原则、简洁明了、清晰高效、适应业务、即时反馈。
 
表单的构成结构、基本都是由、标签、域、提示、操作按钮这四个部分构成的。
 
表单布局在表单中我们采用多种布局方式。信息分组、内容列表、标签页、分步骤。
 
1.10、表格
 
B端设计中,对数据浏览、操作、过滤、展示是最高效的。这你就不用质疑了。因为结构简单、精准高效、数据形式丰富。
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
表格是用来收集、整理、组织、分析数据的二维矩阵。它由内、外两部分组成。其中,内部包含表头、表体、底栏等。外部包含标题、筛选区、操作按钮区等。
 
表格的类型:基础表格、树形、子表格、交叉表格、图表表格、卡片表格
 
表格的样式:网格型、水平线型、斑马纹、自由形式
 
进阶的一些知识就是表格数据的优化和表格的交互知识了。想了解去看更详细的我的文章11表格设计和12表格优化项目实战。
 
1.11、大厂规范
 
如果你是一个小厂B端设计师、刚好没有自己平台的设计规范。那就去直接用的场的设计规范。去用没问题的。大厂那么多的牛逼设计给你做好了你不用。都塞到嘴巴上、不吃就不给面了。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
在使用大厂的设计规范时然后慢慢的积累自己平台的设计规范。逐渐的你就会形成一个属于你们自己平台业务的高质量设计规范了。
 
2、计划
 
这个基础系列的文章就这样写结束掉吧、希望可以对你的B端设计有所帮助。之后我会写二个系列的文章、去分享我理解的B端设计。
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
第一个系列是B端基础设计的加强版、B端高手。B端高手是会写我的实战里是怎么去做的。其实就是我的设计项目复盘。
 
第二个系列就随便的去分享一些设计知识。比如哪些什么什么原理呀、什么什么法则呀、在设计里的应用。而且会提出和讨论一些设计问题。
 
3、写在最后
 
分别是为了更好的相见、我一直希望我的文章可以帮到你。慢慢来路还很长、总是要一步一步的来。很快我们会再次相见。我是KING(国王)
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
新的开始见.......
 
注解:标题的40000余字也好、50000字也好都是说的我这个系列总计的字数、因为想让你们看到。

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

UI 设计的 10 个细节

清阳

俗话说:“细节决定成败”,细节的把控至关重要,这也是设计师能力的代表。随着项目经验的积累和专业能力的成熟,我们对于设计原则、设计细节和设计经验的沉淀也会越来越多,设计输出也会因为这些细节而显得更优秀。
 
黑马哥结合职场经验和教学经验,总结了 120+ 设计原则、设计细节和设计经验的案例分析。案例内容涉及布局、图标、按钮、文本、配色、配图、规范、交互和设计经验等,目的是为了让我们的设计更规范、更专业、有细节、有亮点、有思维。
 
今天先挑选其中的 10 个案例和大家一起交流一下。
UI 设计的 10 个细节
 
 
 
 
分享目录
 
1. 圆角图片对齐时不要完全左对齐
2. 同属性版块统一图标设计规范
3. 数据表达特殊化
4. 预估好信息呈现的最大值
5. 慎用高饱和度的颜色
6. 通过蒙版降低信息干扰度
7. 利用背景色突出小图标的空间占比
8. 渐变最好选择近似色
9. 保持按钮可读性
10. 浅色背景不适合添加投影
 
 
 
1. 圆角图片对齐时不要完全左对齐
 
设计中遇到图片带有圆角时,文字排版不适合完全基于图片左对齐,视觉上会显得文字太靠左,失去视觉平衡度。适当预留间距视觉上更平衡,版面结构也会更稳重。
UI 设计的 10 个细节
 
 
 
 
2. 同属性版块统一图标设计规范
 
同属性版块需要统一图标设计规范,不要出现风格混搭,遵循图标设计的十大统一性:风格、大小、粗细、圆角、比例、透视、角度、疏密、间距、正负形。
UI 设计的 10 个细节
 
 
 
 
3. 数据表达特殊化
 
在可视化的场景中,针对一些特殊数据展示的时候,可以选择特殊字体增加设计感。再通过字体大小对比、字重对比、颜色深浅对比等来突出数据。
UI 设计的 10 个细节
 
 
 
 
4. 预估好信息呈现的最大值
 
在进行 UI 设计时,需要预估好当前位置所能承载的最大值,不能只在理想化的状态内设计。虽然简化的内容看起来更美观,但是最大值下的设计思考才能避免上线后的误差。
UI 设计的 10 个细节
 
 
 
 
5. 慎用高饱和度的颜色
 
界面设计配色需要考虑用户长时间的预览体验,高饱和度的配色不适合长时间观看,容易造成视觉疲劳。适当降低饱和度使得配色更加舒适,有利于提升用户预览体验度。
UI 设计的 10 个细节
 
 
 
 
6. 通过蒙版降低信息干扰度
 
在图片上面展示文案时,需要考虑图片对于文案信息的干扰度。为了防止复杂场景的图片干扰信息传递,需要在信息区域添加渐变蒙版,以此来降低对于信息的干扰度。
UI 设计的 10 个细节
 
 
 
 
7. 利用背景色突出小图标的空间占比
 
需要突出图标的空间占比时,放大图标会显得视觉焦点太强,也容易暴露图标绘制的缺点而显得粗糙。添加统一的造型和背景色,可以突出小图标的空间占比,提升感官体验。
UI 设计的 10 个细节
 
 
 
 
8. 渐变最好选择近似色
 
在主界面或者一些特殊场景中,需要对按钮添加渐变色时,最好选择近似色等邻近范围的配色,会使得视觉效果更加和谐、舒适。
UI 设计的 10 个细节
 
 
 
 
9. 保持按钮可读性
 
按钮设计需要考虑在不同环境下的适应度,确保用户可以一目了然的发现它。在白色背景、浅色背景、深色背景中都要形成配色对比,始终保持按钮与背景的高对比度和可读性。
UI 设计的 10 个细节
 
 
 
 
10. 浅色背景不适合添加投影
 
浅色背景的卡片、按钮、标签、图片或者其他元素等,在白色背景中都不适合添加投影。投影使得视觉效果对比模糊,画面表现不够干净、通透,去掉投影反而更加清晰自然。
UI 设计的 10 个细节
 
 
 
 
小结
 
以上案例属于 120+ 案例中随机挑选的 10 个作为示意,该系列案例也会持续更新。希望大家可以从这些案例中获得一些设计经验,助力设计输出,能够做出更好的设计作品。经验属于个人职场和教学中的沉淀,如有不足欢迎留言补充。


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

如何从产品角度发起交互设计?

清阳

本文从产品角度出发,深入探讨了如何发起交互设计。通过明确产品目标与用户需求、进行用户研究、构建信息架构、设计流程与界面、进行原型测试以及持续优化等关键步骤,阐述了如何打造出满足用户期望、提升用户体验并实现产品目标的交互设计。
 
一、引言
 
在当今数字化的时代,产品的成功不仅仅取决于其功能的强大,更在于能否为用户提供流畅、愉悦且富有价值的交互体验。从产品角度发起交互设计,意味着将用户置于核心,以实现产品的商业目标和用户需求的完美融合。
如何从产品角度发起交互设计?
 
 
二、明确产品目标与用户需求
 
(一)定义产品目标
产品目标是交互设计的起点,它决定了设计的方向和重点。产品经理需要与团队共同明确产品的定位、市场需求以及预期的商业成果。例如,是旨在提高用户活跃度,还是增加用户转化率,或者是提升品牌形象。
如何从产品角度发起交互设计?
 
 
 
(二)挖掘用户需求
通过市场调研、用户反馈、竞品分析等手段,深入了解目标用户的行为习惯、痛点和期望。这不仅包括对用户显性需求的捕捉,还包括对潜在需求的挖掘。
如何从产品角度发起交互设计?
 
 
 
三、进行用户研究
 
(一)用户画像创建
基于收集到的数据,构建详细的用户画像,包括用户的年龄、性别、职业、教育背景、使用场景等特征,以便更精准地理解用户的行为和需求。
如何从产品角度发起交互设计?
 
 
 
(二)用户场景分析
模拟用户在不同场景下与产品的交互过程,发现可能存在的问题和优化点。
举例说明:
我们要知道,地铁周边美食,这是一个解决方案。真正的需求是什么?一个字一个字地找需求,地铁=快速方便出行,美食=和朋友一起吃饭/自己一人吃饭。这是一个和线下场景很相关的项目,我们要把不同目的核心用户的主要使用场景写出来。经过分析,我们得出了用户会选择我们产品,且产品未来可能存在的各种场景A、B、C、D、E。如下图所示:
如何从产品角度发起交互设计?
 
 
如果按照目标人群所在场景分类,进行细分,则为下图:
如何从产品角度发起交互设计?
 
 
乘地铁去地铁站和附近地铁站区别:前为用户会乘坐地铁去目的地寻找美食;后为用户不用地铁/吃完后使用地铁,地铁边美食没有其他美食团购产品有竞争力。
上班族和普通大众区别:上班族工作日使用固定地铁站上下班,时间可能紧急,快速获取食物;普通找美食吃的大众不使用固定地铁站,目的是通过地铁快速到达某目的地,就近享受目的地美食。
朋友们和个人区别:朋友们一起吃饭,容易出现喝多、吃过点等异常行为,并且在选择地铁旁吃饭地点时需要考虑朋友们家的位置就近选目的地。个人均不需要考虑以上,较为自由。
 
市场定位
经过领域场景的分析,我们知道了真场景都是用户有目的乘坐地铁去到某地铁站出站口寻找美食的。那么我们对这么一群大众进行用户人口统计学类的细分:
如何从产品角度发起交互设计?
 
 
  • 上图为前期定位的目标大众用户群,依靠地铁的工具属性,我们得出了具体的两个影响因素:时间+美食热爱程度。同时我们把直接竞品和间接竞品一同进行用户群比较。可以看到和大美团有相同和不同维度,这就是产品最初冷启动时期的差异化!也就是我们的前、中期场景的主要目标用户类型。
  • 红色部分即种子用户群,以这些群体为冷启动阶段,可以更快的向四周扩张。因为他们有使用地铁的时间属性,同时有较高的美食热爱程度,有利于带动其他时间+热爱程度的用户加入产品,实现快速并有质量的拉新、活跃的目标。
  • 低端直接竞品即用户群工具属性明显,只是搜地铁站,选择美食的用户,无明显其他行为;高端竞品即注重社交、ugc为起点,逼格高的搜寻美食工具。这部分开始很难,工作量巨大,且较脱离大众主流群体。
 
结合上图和要做的场景,我们得出了产品具体目标用户:乘坐地铁快速到达并寻找目的地美食的大众用户(上班族休息日,大学生,个人或一起),要求在地铁站附近便能方便享受目的地美食。且对美食有一定热爱程度。
 
(三)用户测试
邀请真实用户进行产品试用,观察他们的操作行为,收集反馈意见,为后续的设计提供依据。
1、需求接受
需求很有可能是在线上接到的,并不是面对面交流传递的,并且还会遇到很多坑,例如需求本身不具体,或者自己理解有偏差,因此在接到需求后,最好和交互、产品等同事进行面对面的交流和沟通。
详细了解测试目的和关键点,确定用户配比。
最好是让交互带着跑一下整个程序(半成品demo也好,交互稿也行),这样能在头脑中快速形成操作流程的认知,并把相应关键点对应上去。同时把大致的用户配比情况敲定一下,后续就可以直接招募用户了。
了解demo的完成进度,相应确定具体测试时间。
交互、视觉等完成demo的时间具有太多不确定因素,因此我们需要及时了解整个demo的完成进度,在尽可能快的情况下保险安排测试时间,如果邀请的是外部用户,结果用户到了而demo还没出来,那也是够了。
2、方案撰写和确定
让交互稿帮助自己。在完成测试方案撰写的过程中demo还未诞生,具体程序细节记忆又很模糊,不好写测试方案,怎么办?不要慌,去看交互稿吧。
及时沟通。在方案撰写过程中,如果有一些疑问,例如在看交互稿的时候还不是很理解某个具体操作过程,或者自己对产品有疑问的也可以跟交互等沟通,因为自己会遇到的问题,很有可能在测试用用户也会遇到,这样子用户如果问到了,就可以相应作出解释。
核实确定方案。完成方案后,可以在公司沟通交流工具上和交互及产品等同事再确认一下,是否有什么地方遗漏或有不妥之处。
3、用户招募
这是一个大多数人都头疼的一个过程,希望看完了以下几点,可以稍微缓解一下大家的症状。再次确定测试时间。
方案定下来后,再跟交互确认测试时间,了解是否有变动和调整,尽量避免用户来了demo或者测试环境还不ok的情况。
 
撰写招募文案。需要把用户要求、测试日期和地点、报酬、大致的测试时长、用户需要在测试中做什么,以及报名方式等表达清楚。有以下几点可以注意一下,方便我们自己招募:
  • 详细列出测试安排的时间段。例如10:30-11:15、13:30-14:15,让用户自己挑选合适的时间段,这样就不用事后再协调不同用户测试时间了;
  • 优先人力、信息管理、行政等岗位同事。尽量避免相关产品人员、设计岗等同事。
  • 制作简单的招募海报,并检查。可以事先将“海报”用word或者ppt做好,然后保存成图片格式,记得检查核实一下是否有错。因为在公司IM群上直接黏贴确实方便,但是其排版往往不利于阅读,导致用户会遗漏重要信息。而制作成图片格式,可以更好地去避免这个问题,同时还可以显得整个招募过程比较正式,突出了对用户的尊重,也能在一定程度上体现我们用研工作的规范性。
 
多渠道投放招募海报。内部用户可以尝试先在公司IM群组上招募,之前招募样本量比较小,因此很快可以招到,其他途径暂时未尝试,公司论坛应该也可以,不过隐约感觉效率会比较低。外部用户可以在朋友圈试试,效果还不错,大家都很热情帮忙转发,群众的力量大无穷。也可以相应去搜索一些QQ群,加入并发布招募信息。另外还有一些社交论坛什么的,都可以尝试一下。方法很多,针对具体招募情况,大家就尽情发挥吧~
 
用户多了留到下次用。海报发出去后,有时也会出乎意料用户数量超过预期了,这是好事,不要担心,也不要急着拒绝,平和的跟对方说明情况,强调下次还会有测试,把用户相应信息了解一下做个记录,下次招募的时候可以直接先联系这几名用户。当然前提是你真的有下次测试需求,如果没有那还是老老实实说明情况。
 
确保自己和用户能彼此联系上。跟用户强调测试时间和地点,尤其是外部用户,如果招募和正式测试隔了几天,最好在测试前一天再通知一下。给出自己的联系电话,同时询问用户的联系电话。
 
第一个用户尽量安排公司内部同事。很多时候demo的完成情况会出现意外,到了测试时间demo还不能用,内部用户可以方便取消或者更换。另外,在第一次测试前谁都不确定用户会有什么反应,第一个测试是可以起到试水效果,而外部用户成本高,用来试水太奢侈。
4、测试准备
 
材料准备。需要准备的内容有:量表、报酬签收表、记录笔记本、录音笔、会议室借用,以及记录表格,如果是外部用户过来,相应准备一杯水,人家大老远过来也不容易。
 
测试内容准备。其实每次访谈用户自己都会挺紧张的,不知道用户是不是也很紧张(PS:好想当一回用户,体验一下被访的感觉)。为了消除这种紧张,同时也是为了更好的完成访谈,可以有尝试以下几点:
  • 尽可能多的去了解所需测试的产品。有时候demo出来的晚,下午要测试,demo中午才出来,自己都没玩过,测试还怎么搞?之前也说了,那就使劲去看交互稿吧,虽然比不上实际操作来的真实,但是也能有不小帮助,但也要给自己留足熟悉demo的时间。
  • 按照模块来列提纲。其实相当于组块策略,把同一个模块的问题放到一起更方便记忆,并且也在访谈中也方便自己和其他同事发现遗漏点。但模块不要太大,如果太大了就相应拆分一下。例如,在考拉新版测试的时候,有“首页”、“活动”、“购物车”等测试,但是光是首页内容也很多,作为一个模块还是太大了,可以拆分成“首页整体感知”、“商品详情”等几个方面来整理提纲。
  • 根据任务演练提纲。有了提纲后,按照任务大致过一下所有列出来的问题,这个过程会打乱按照模块列好的提纲,有一次这样的排练,在测试的时候更不容易漏掉题目,而且也相当于模拟了一下测试,自己心里会更踏实一点,在实际测试过程中也能有更好的应对。
 
相关人员通知。通知交互和产品的同事具体测试时间和地点,邀请他们一起参与。不建议交互和产品只是后期测试查阅报告,如果他们参与到测试中,能更近距离和用户接触,并能更加深刻感受到产品存在的问题,也能更好的推动产品的改进。
5、正式测试
主持人需要注意的点:
  • 划分我们和产品的关系。在测试之前跟用户说明清楚,我们并不是产品的设计者和开发者,我们只是受产品方委托来进行测试,以免用户不好意思当面如实评价产品。
  • 强调测试的是产品,而不是用户。要跟用户说明产品尚处于不完善阶段,因此邀请用户过来进行测试,帮助发现问题和改进产品设计,但请注意不是为了评价产品。
  • 注意访谈技巧。这个就不用多说了。
  • 尽可能深入的去挖掘用户的需求。不要停留在用户话述表面,更进一步去追问,用户为什么会这么说或这么问,例如,很多时候在测试中会碰到用户说“哦,原来这个按钮是xx功能,我还以为是xx功能“,这个时候可以再推进一步,了解用户为什么会这么认为。
  • 给其他在场的同时发言的机会。主持人如果觉得自己访谈的差不多了,可以询问一下记录者以及交互、产品等同事,了解他们是否还有问题需要补充。
  • 记得量表评分和报酬签收。长时间的测试和访谈后容易忘记量表评分和报酬签收,可以把这两份东西放在显眼的地方,另外可以让记录的同事打个招呼,帮忙提醒自己。
 
记录人员需要注意的点:
  • 仔细观察用户行为并记录。记录不仅仅是用户的观点、想法等,更重要的是记录用户的实际行为。
  • 按照模块记录。记录者可以按照测试方案中的模块来相应记录用户的行为和言语表述。
  • 查漏补缺。主持人可能会遗漏一些点,记录者作为旁观者需要提醒主持人遗漏了什么,或者自己有什么新的内容需要补充。
 
6、测试结束欢送用户。对用户表示感谢,并开门送一下用户,对于外部用户,最好能送到大楼外面可以看见出口的地方。
测试后及时讨论。这个是重点!
在每一名用户测试后及时和交互、产品等同事快速过一下主要发现的问题点,这样做有以下优点:
  • 有效达成共识,确定解决方案。刚访谈结束印象最深刻,因此能快速有效达成对主要问题的共识,并讨论确定相应的解决方案。
  • 体现敏捷优势。确定了一些比较严重的问题后,交互和产品的同事就可以相应去改进产品设计,做到了边测边改,加快迭代速度。
  • 帮助优化访谈提纲,和测试用户安排。有些问题在事先撰写方案的时候可能没涉及到,在讨论后可以补充进去,而有些问题确定后则不需要再测。另外,也可以通过讨论对事先安排的测试用户进行相应调整,例如增删用户,或者调整新老用户测试顺序等。
  •  
    事后帮助我们自己快速撰写方案。通过讨论确定了关键问题,并且,交互和产品的同事也相应清楚了,因此在最后可以快速形成报告。
再次感谢用户。所有用户测试结束后,可以花几分钟时间简单感谢一下用户。
 
7、报告撰写
针对不同大小项目的用户测试,在完成报告撰写过程中有两种具体方式:
  • 小测试项目简单快速撰写报告。对于那些1-2天的小测试项目,由于在每次测试后都有讨论,已对主要问题达成共识,因此在报告撰写的时候就可以快速地将主要的问题和风险点呈现出来。
  • 大测试项目每天总结并反馈主要问题。大的测试项目持续时间比较久,针对每天的测试及讨论,简单总结一下主要发现的问题,并反馈给相关人员,如果到了最后再总结,容易遗忘掉一些内容,并且这样子也方便自己最后撰写报告。
 
四、构建信息架构
思考信息架构有三个核心关键词:用户角色、产品价值、使用场景。
1、明确用户角色
用户角色清晰揭示用户目标,帮助我们把握关键需求、关键任务、关键流程,看到产品哪些是主要的事,哪些是次要的事。我们应该尽可能丰富、形象化我们的用户角色,让它在设计决策过程中发挥作用,设计出更符合用户场景的产品。
2、了解产品的目标价值
作为产品的设计师一定要理解产品的价值,知道用户想要什么,把最重要的优先级提到最高,尽量移除无关紧要的信息,或降低其他优先级的权重,以免对用户造成干扰。
3、提炼产品的使用场景
要了解产品的业务流程,比如目标用户是谁、什么场景、如何使用,要把产品业务流程上的节点一个一个梳理出来,还要考虑这个产品对用户的价值是什么,不要仅仅考虑界面的元素规范、设计细节等等,要知道产品的目标价值体系。
4、信息架构优先级
基于三个核心点(用户角色、产品价值、使用场景)分析,把目标用户人群核心价值的功能点业务流程梳理出来,分清主次关系,切忌功能堆砌,具体方法可以把所有功能业务逻辑的主线列出来,然后根据业务的优先级做评级,分清楚这些功能哪些是主要的,哪些是次要的,然后通过数字做排序,这样我们就知道哪些功能设计需要明显,哪些功能设计需要低调。
5、信息归类及整合
从整体上思考信息类产品的分类及整合,比如用户资料相关的产品会有用户信息、资料、等逻辑,这样就要把所有跟用户相关的信息都归在同一个分类菜单下,不要让他们分散在各个页面中。也就是所谓的一级菜单、二级产品的处理逻辑。
6、要定期审视与迭代
随着产品规模与复杂度的提升,要随时关注信息架构是否满足当前的产品框架,不要等需要时候再去孤注一掷的全盘优化,这样会让项目陷入被动的局面,可以逐渐增强,循序渐进的优化,从小的细节对信息架构进行调整,提升产品的易用性。
 
六、进行原型测试
1、制作原型
使用快速原型工具制作可交互的原型,以便更直观地展示设计方案。
 
(二)内部测试
团队内部进行初步测试,检查功能的完整性和流程的合理性。
 
(三)用户测试
邀请外部用户进行测试,收集他们的意见和建议,发现潜在的问题和改进空间。
 
七、持续优化
 
(一)数据分析
通过收集和分析用户的使用数据,了解用户的行为路径和偏好,为优化提供数据支持。
 
(二)用户反馈处理
及时响应用户的反馈,将有价值的建议融入到后续的优化工作中。
 
(三)迭代更新
根据数据分析和用户反馈,不断对交互设计进行迭代更新,以适应市场和用户需求的变化。
 
八、结论
 
从产品角度发起交互设计是一个综合性的过程,需要充分考虑产品目标、用户需求、信息架构、流程界面、测试优化等多个方面。只有以用户为中心,不断追求卓越的用户体验,才能打造出具有竞争力的产品,在激烈的市场竞争中脱颖而出。
 
在未来的产品开发中,随着技术的不断进步和用户需求的不断变化,交互设计也将面临新的挑战和机遇。产品团队应保持敏锐的洞察力和创新精神,持续探索和优化交互设计,为用户创造更多的价值。
 


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

用户体验一致性思考

清阳

前言
在团队内部,我们已确立了一套设计规范,在日常项目中使用设计规范输出变的高效、统一。然而,在实际操作中,不可避免地会遇到一些特殊情况:某些客户提出的个性化需求并不完全契合既定的设计规范,这些促使我们不得不在保持设计一致性的基础上进行灵活调整。因此,深入反思并优化一致性原则的应用策略显得尤为重要。我们需要探索如何在坚守设计规范核心精神的同时,灵活应对多变的需求,确保设计既保持统一和谐,又能满足特定场景下的独特需求,从而实现用户体验与品牌价值的双重提升。
 
用户体验一致性思考
 
 
用户体验一致性思考
 
 
在UI/UX设计中,雅各布·尼尔森的十条可用性原则中,一致性(Consistency and standards)位列第四。这一原则强调在界面和交互设计上需要遵循既定的规则,无论是在应用内部还是跨平台之间。
背后的心理学原理——重复定律,强调了信息重复对于巩固记忆的重要性。正如赫尔曼·艾宾浩斯通过“遗忘曲线”所揭示的,信息的有效保留离不开重复接触。一致性的应用正是这一原理的生动实践,通过不断重复统一的设计元素与模式,强化用户对产品的认知与记忆,从而提升整体的用户满意度与忠诚度。
艾宾浩斯遗忘曲线
艾宾浩斯遗忘曲线
 
用户体验一致性思考
 
 
用户侧
1、用户学习曲线:
一致的UI/UX设计可以降低用户的学习曲线。当用户在应用程序或网站中遇到一致的元素、布局和交互方式时,他们可以快速理解并准确预测如何与界面进行交互。这减少了用户的混淆和困惑,提高了他们的效率和满意度。
2、提升可用性:
一致性使用户界面更加易于使用。当用户在不同的页面或功能之间找到相似的设计元素和交互模式时,他们可以轻松地将已有的知识和经验应用于新的情境中。这种一致性帮助用户快速完成任务,减少错误和迷失,提供更好的导航和流畅的体验。
3、品牌认可度:
一致的UI/UX设计有助于树立品牌形象和增强品牌认可度。通过在不同的渠道和平台上保持一致的设计元素、标识和视觉风格,品牌可以建立起独特而可识别的形象。用户在不同的触点上都能感受到品牌的一致性,从而增加品牌的信任和忠诚度。
4、用户满意度:
一致性直接影响用户的满意度。当用户在使用应用程序或网站时感受到一致的设计和交互方式时,他们会感到更加舒适和自信。一致性传递了专业和质量的信号,让用户感到被关注和重视。这种积极的用户体验有助于提升用户满意度,并促使他们持续使用和推荐你的产品或服务。
 
用户体验一致性思考
 
 
产研侧
1. 降低设计成本,提高开发效率
无论是设计还是开发,复用已有的组件资源,保持界面的一致性可以有效地减少设计的投入,避免不必要的设计分歧点。
而在开发阶段,可以避免重复造轮子,提高开发的效率,保证落地效果,也可以减少上线前设计走查、测试的工作量。
2. 形成一致的设计风格
根据原子设计理论,通过原子组件的一致性,可以构建出统一的界面框架、布局,形成统一风格和用户交互认知,从而更好地保证用户体验质量。
 
用户体验一致性思考
 
 
色彩
色彩作为一种兼具物理属性与感官享受的复杂现象,其本质在于光波在人体视网膜上的特定波长被反射或吸收后,所引发的视觉感知结果。在设计领域,色彩的选择与运用不仅是视觉艺术的展现,更是品牌身份与个性的直接体现。诸如饿了么标志性的蓝色、美团鲜明的黄色、以及京东热情的红色等,这些品牌专属色彩不仅构成了品牌识别系统的重要组成部分,还通过其高度的一致性,在视觉层面上构建起强烈的品牌认知,营造出统一和谐的视觉体验。
色彩的一致性策略在品牌塑造中发挥着不可估量的作用,它能够有效增强品牌的记忆度与辨识度,深化品牌形象在消费者心中的烙印,进而提升产品的市场吸引力和用户忠诚度。同时,这种策略还促进了设计元素间的和谐共存,包括按钮、图标、字体、标签、背景、以及关键视觉元素如Banner等,均能在统一的色彩体系下实现视觉上的连贯与流畅,极大地提升了产品的可用性、无障碍性,以及用户在使用过程中的整体满意度与交互体验。
 
用户体验一致性思考
 
 
字体
字体作为设计中不可或缺的核心要素,其独特性在于能够精准地塑造文字的视觉形象,涵盖形状、尺寸、粗细、字间距等多维度特征。这些特征共同构建了一种独特的文字风格,不仅承载着信息的传递功能,更在无形中引导着用户的视觉流程,影响着信息的接收与理解深度。因此,在设计过程中,合理选择与应用字体显得尤为关键。
 
字体类型的多样性,如有衬线字体与无衬线字体的对比,不仅体现了风格上的差异,还隐含了不同的阅读体验与情感表达。字体的粗细变化(如细体、常规、粗体等)更是能够强调文本的重要性层级,增强信息的层次感与可读性。此外,字重的调整也是塑造视觉焦点、引导视线流动的有效手段,对于提升设计的整体美观度和信息传达效率具有不可小觑的作用。
 
然而,在实际的开发与实现过程中,若不加节制地使用多种字体,不仅会显著增加页面的加载时间,影响用户体验的流畅性,还可能因风格不统一而导致页面显得杂乱无章,破坏整体设计的和谐感。因此,制定一套统一、规范的字体使用策略显得尤为重要。这不仅有助于提升开发效率,减少后期更新迭代的复杂度,还能有效避免资源浪费,确保设计作品在视觉上的一致性与专业性。
 
用户体验一致性思考
 
 
图标
 
图标作为用户界面设计中至关重要的元素,风格直接影响到用户的使用体验与对产品的整体印象。图标以其简洁、直观且富有表现力的特点,在快速传达信息、引导用户操作方面发挥着不可替代的作用。在设计中,图标的设计与应用更是需要精心考量,以确保其既能够准确传达信息,又能够与整体设计风格保持一致,从而营造出专业、和谐且易于使用的界面环境。
 
设计中视觉上保持统一包括图标的大小、形状、色彩以及设计风格等多个方面,能够增强用户的认知连贯性,降低学习成本,提升使用效率。相反,如果图标风格混杂,不仅会让界面显得杂乱无章,还会给用户带来困惑和不安,进而影响其对产品专业性和安全性的信任。
用户体验一致性思考
 
 
按钮
按钮设计应统一于项目风格,无论是圆形、矩形、圆角矩形还是特定形状,保持一致性是关键。统一的按钮样式不仅彰显专业性,还能增强用户信任,确保体验连贯。过多变化的按钮样式会扰乱用户界面,降低操作直观性,甚至让用户误以为自己已离开应用环境。因此,精心设计的统一按钮样式对提升用户体验至关重要。
 
排版
设计中的排版一致性对于构建高效、用户友好的界面至关重要。一致的排版不仅能够让用户快速适应和理解界面的整体结构,大幅降低学习成本,还能在用户心中激发强烈的归属感和安全感。这种熟悉感使得内容更加易读,用户能够自然地依照既定的视觉动线流畅地浏览页面,迅速定位并获取所需信息,从而显著提升信息获取的效率。因此,在设计过程中,注重并维护排版的一致性,是提升用户体验和界面有效性的重要策略之一。
 
 
用户体验一致性思考
 
 
 
操作流程的一致性
标准化流程:确保用户在执行相似任务时,如购买商品、搜索信息或提交表单等,能够遵循相同的操作流程。这有助于用户快速适应并高效完成任务。
逻辑清晰:操作流程的每一步都应符合用户的认知习惯和行为逻辑,避免让用户感到困惑或不知所措。
用户体验一致性思考
 
 
交互元素的一致性
按钮和控件:确保按钮、输入框、下拉菜单等交互元素的样式、位置和操作方式在整个应用或网站中保持一致。例如,所有按钮都应具有相同的视觉风格和触发机制。
导航和菜单:导航栏和菜单的设计也应保持一致,使用户能够轻松地在不同页面或功能之间切换。
 
用户体验一致性思考
 
 
反馈机制的一致性
操作反馈:当用户执行某个操作时,应用或网站应提供一致且及时的反馈,如加载动画、成功提示或错误消息等。这有助于用户了解操作结果并采取相应的行动。
状态提示:对于长时间运行的操作或需要用户等待的场景,应提供明确的状态提示(如进度条),以减轻用户的不确定感和焦虑感。
 
 
 
 
 
 
在任何维度上,一致性不应成为设计的唯一导向。设计,这一融合了艺术与科学的复杂领域,要求我们在用户体验的细腻雕琢、功能需求的精准满足、美学价值的深刻体现及技术可行性的严格考量间游走。
 
“一致性”作为设计策略,其核心使命在于优化用户路径,降低认知门槛,确保用户在多元界面中穿梭时仍能感受到连贯与和谐。当我们在与设计团队(包括工程师、产品经理等)沟通时,仅仅提及“一致性”可能并不足以说明其必要性和价值。我们需要更深入地阐述为什么需要保持一致性,以及它如何具体帮助减少用户困惑、提高用户满意度和忠诚度。
 
同时,我们应清醒认识到,“一致性”并不是万能的。在某些情况下,为了追求极致的用户体验或解决特定的设计问题,可能需要打破传统的一致性规则。因此,设计师需要在保持一致性和创新之间找到平衡点,根据具体情况灵活调整设计方案。
 
实际落地执行时,要根据产品定位、用户场景,结合业务功能来确定设计方案,不能为了一致而一致。
当我们遇到一致性问题时,还是需要从以下3个方面深入思考,做出准确合理的设计决策。
用户体验一致性思考
 
 
真实项目
真实项目
 
在SaaS产品设计中,特别是面向B/G端(企业用户)时,满足不同用户角色(如普通用户与高权限领导)的需求是至关重要的。
管理端布局设计
普通简洁明了:为普通用户设计的管理界面应简洁直观,聚焦于日常操作,如数据查看、统计和下载。
功能分区:通过清晰的导航栏或侧边栏将功能区域划分开,如“数据概览”、“报表下载”、“任务管理”等,便于用户快速定位所需功能。
操作便捷:确保常用操作(如搜索、筛选、排序)易于触达,减少用户点击次数和页面跳转。
 
首页版心定宽设计
固定宽度:为首页设定一个合适的固定宽度(如1200px、1440px等),以保证内容在大多数屏幕上都能保持一致的阅读体验。
信息模块化:将首页内容划分为多个卡片,每个卡片承载一个独立的信息单元(如数据报表、通知公告、项目进展等)。
视觉层次:通过颜色、大小、阴影等设计元素区分卡片的重要性,引导用户视线,提高信息获取效率。
交互性:为卡片添加交互元素,如点击展开、滑动查看更多等,增加用户参与度和页面活跃度。
 
用户体验一致性思考
 
 
位置差异性分析
根据「认知负荷>视觉负荷>动作负荷」理论,在页面中我们首先要让用户能够找到按钮,然后完成操作。
相对于弹窗,页面的空间更大,边界感偏弱,用户的视觉重心更容易停留在左侧表单内容区域。所以按钮应该紧随搜索条件,便于用户快速发现按钮。
区域用户已经形成下意识操作习惯,虽然区别于规范,只能打破,遵循客户需求
用户体验一致性思考
 
 
一致性是规则
“一致性”作为规则或手段,服务于提升用户体验的原则。规则与原则一致时,促进业务共识与用户价值;冲突时,原则优先。用户体验原则指导下的一致性,要超越表面控件统一,更在于产品决策与价值取向的一致。必要时,为更好的用户体验,可在规则上让步以实现原则统一。打破规则需慎重权衡,确保用户便利足以弥补理解成本,需长期全局考量。规则非僵化教条,而是引导我们谨慎创新的框架。
 
一致性的底线
无论从哪个角度,一致性存在的必要性都是毋庸置疑的。
对于关键的设计元素,如专有名词和颜色体系,保持一致性至关重要。这不仅有助于维护品牌形象,还能减少用户的困惑。
特定设计语言在特定场景下的变体应用,虽然可能带来一定的视觉新鲜感或针对性优化,但往往需要谨慎评估其潜在风险。一旦变体打破了整体设计的一致性,可能会破坏用户对品牌的熟悉感和信任感,甚至引发误解。因此,在追求设计创新的同时,必须确保这种创新是基于一致性的原则之上,以维持品牌的整体性和用户的良好体验。
 
拥抱复杂性
一致性确实不应成为设计师的避风港或限制创新的枷锁,而应是基于对业务深刻理解和多样化设计能力之上的价值选择。设计师的核心任务始终是满足用户的多样化需求和偏好,这需要他们细致入微地观察、理解并解决每个用户的独特问题。
 
在追求一致性的同时,设计师应保持“第一性思考”的能力,即回归问题的本质,从用户需求出发进行创新设计。多样性页面的产出,不仅体现了设计师的创造力和灵活性,也是提升用户体验、增强产品吸引力的关键。
 
一致性与创新设计并非相互排斥,而是相辅相成的关系。真正的一致性不应导致单调或拒绝创新,而应是在遵循品牌或产品核心价值的前提下,鼓励设计师在细节和体验上不断探索和突破。当设计师感到被既定规则束缚时,应勇于质疑并重新评估当前的规范,确保所谓的“一致性”不是刻板的伪命题,而是真正符合用户需求和品牌发展的价值导向。
 
因此,设计师应时刻保持开放的心态和敏锐的洞察力,不断探索和尝试新的设计方法和理念,以更加灵活和创新的方式实现一致性与用户需求的完美融合。
 
用户体验一致性思考
 
 
重要的设计原则
「一致性」作为设计领域中的一项基础性原则,其重要性不言而喻。它不仅为设计过程提供了稳固的基石,还显著促进了开发效率与产品体验的全面升级。在设计实践中,一致性确保了界面元素的统一性和连贯性,使得用户能够迅速熟悉并掌握产品的使用方式,降低了学习成本,增强了操作的直观性和便捷性。
灵活变通使用
一致性原则并非一成不变的强制规定,而是需要根据产品的具体定位和市场环境进行灵活变通的应用。不同的产品可能面向不同的用户群体,拥有独特的品牌调性和功能需求,因此在追求一致性的同时,也需充分考虑这些因素,确保设计既符合品牌特色,又能满足用户的实际需求。
 
提升用户体验是价值所在
一致性的真正价值在于其能够显著提升用户体验。通过遵循用户的认知和习惯,设计师能够创造出更加自然、流畅的操作流程,使用户在享受产品功能的同时,也能感受到品牌所传递的舒适与和谐。因此,在追求设计一致性的过程中,我们始终应以人为本,将用户的体验和感受放在首位。建设有兼容性和长期价值的的一致性框架,在一致性中做到有用户价值的设计,是设计师应该不断探索的命题。

作者:cheny米鱼
链接:https://www.zcool.com.cn/article/ZMTYzNTAzNg==.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

从碎片到系统:设计师必备的知识库搭建指南

清阳

瓷片区是我们设计师在平时的APP设计中经常遇到的设计需求,虽然只是界面中一块较小的区域,设计看似简单,但它涵盖了用户研究、设计心理、UI设计等多个设计知识点。瓷片区对于产品的推广、品牌的传播等也具有着重要的作用。我通过工作中的一些设计心得进行总结沉淀形成此篇设计指南,从多个维度探讨剖析瓷片区的设计方法,希望能够协助设计师更好的规划设计产品,增强用户的满意度和粘性,为用户带来更为舒适流畅的实用体验。文章若有不妥之处,还望共同交流指正。
 
前言
深度剖析|瓷片区设计指南
 
 
此篇文章通过讲解关于瓷片区的一些认知以及设计手法的设计指南,来帮助大家更好的理解瓷片区设计的重要性和应用方法。作为产品设计过程中的考虑因素和规则不是一成不变的,希望在未来的设计中能够有更多的方法和技巧指引设计师们完成更好更优秀的设计作品。
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
瓷片区是APP应用设计中经常出现的一款引导型组件模块,主要在首页主推内容区进行展示,和Banner区、金刚区并行三大运营板块,其权重较Banner区和金刚区略低,一般放在两者之下。瓷片区从外观上看就像是一块块瓷片一样组合“贴”在页面中,构成一组排列在一起的运营广告位,故统称为“瓷片区”。例如京东商城、美团、携程服务、个人中心等产品都含有瓷片区。
瓷片区可以在一个页面区域内划分出不同的组合,且每个区域内会包含产品主体视觉元素(图片)、标题、介绍文案、标签和背景等信息。瓷片区和banner作用较相似,但相较Banner区和金刚区使用更加灵活,应用场景较多。
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
瓷片区本质上就是运营内容区,它更接近于一个功能模块的外部固定广告位。它的展示内容虽然会随着时间场景变化,但是代表的功能模块是保持不变的,每个瓷片就是这个功能模块的窗口,引导用户进入对应功能模块中。
瓷片区不仅较多在电商场景应用中,还可能出现在其他所有应用类型中。例如旅游、金融、娱乐生活等多类产品,但在工具类产品中却不太适用。
1.金融类
金融产品如银行应用、投资平台等,往往包含复杂的服务和功能。此类APP中的瓷片区可用于展示金融产品、投资理财建议等。通过专业的图表、数据和解析,运用图形化的方式简洁明了地传达信息,帮助用户帮助用户快速理解产品特点,更好地了解市场动态,从而做出更明智的投资决策。
2.
生活服务类
在生活服务类APP中,瓷片区可以展示各类服务入口,如美食、旅游、休闲娱乐等。通过直观的布局、明确的分类以及醒目的图片,吸引用户进行探索和预订,帮助用户快速找到所需服务,提升用户体验。同时根据用户的浏览记录和购买历史,推荐相关的商品或服务。或者根据用户的地理位置和时间信息,推荐附近的餐厅、景点等,通过个性化的推荐方式能够提升用户的满意度和粘性。
3.新闻资讯类
新闻资讯类APP中的瓷片区可用于展示热门新闻、重要事件或专题报道。通过及时更新内容,瓷片区可以帮助用户快速获取最新信息,同时提高用户对APP的依赖度和使用频率。
4.虚拟类
对于软件、游戏或数字内容等虚拟产品,瓷片区能够通过创意插画或图形,增加产品的调性和趣味性,提升用户体验。
5.设计类
设计相关的应用或平台使用瓷片区也可以展示设计作品、设计理念或者设计工具等,通过视觉艺术吸引目标用户群体。
6.电商或商城类
在电商类APP中,瓷片区常被用于展示热门商品、促销活动等,通过精美的高质量产品图片展示和吸引人的文案,直接影响用户的点击率和购买意愿,从而促成交易。
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
瓷片区类似于
一种产品服务展示,是主要负责流量导流功能,吸引用户注意力,帮助业务推广产品。瓷片区一般都位于用户最容易点击的区域,方便引导用户点击进入,使用户更容易寻找自己所需产品。在现如今的产品设计中,瓷片区具有着十分重要的作用和意义。
1.流量引导与转化
瓷片区是APP设计中不可或缺的组件,它是流量的入口和转化点。通过精心设计的瓷片区,可以有效地吸引用户的注意力,引导他们点击并深入了解相关的内容或功能。这有助于提升用户的参与度,同时增加APP内特定内容或服务的曝光率,从而促进流量的转化。
2.引导用户注意力
瓷片区通过展示商品图、代言人等视觉元素,有效吸引用户的注意力,起到引导用户点击和进一步探索的作用。
3.个性化推荐与用户体验
瓷片区通常也具备个性化推荐的功能,可以根据用户的兴趣和行为习惯,展示符合他们需求的内容。这种个性化的推荐方式不仅可以提高用户的满意度,还能增强用户对APP应用的黏性。同时,通过优化瓷片区的交互设计和视觉呈现,可以提升用户的使用体验,使其更加便捷、舒适地浏览和选择内容。
4.提升转化率
由于瓷片区能够集中展示多个促销信息或功能模块,它通常具有较高的转化率,这对于提升用户的购买行为或参与度是非常有利的。
5.增加产品留存率
良好的瓷片区设计能够提升用户的使用体验,从而提高整个产品的留存率。
6.业务推广与品牌展示
瓷片区是进行业务推广和品牌展示的重要场所。设计瓷片区往往会考虑到美观性和艺术性,这有助于提升产品的整体视觉效果,增强用户对品牌的良好印象。通过出色的视觉展示核心产品或服务,帮助企业有效地传达品牌形象和价值,吸引潜在用户的关注。同时,结合特定的营销活动或促销策略,瓷片区还可以提升用户的购买意愿,促进业务的发展。
7.数据收集与优化
瓷片区的设计和实施还涉及到大量的数据收集和分析工作。通过对用户点击、浏览等行为的追踪和分析,可以了解用户的偏好和需求,为后续的优化工作提供数据支持。这有助于APP不断改进和完善瓷片区的功能和表现,提升整体的用户体验和效果。
深度剖析|瓷片区设计指南
 
 
在众多产品中,通过瓷片区的设计能增加对商品、功能的曝光,使用户群更愿意去购买或了解感兴趣的商品、功能。设计师根据瓷片区导流入口-落地页-转化率设计,通过整个流程中收集数据,提升优化设计体验,实现设计价值。
深度剖析|瓷片区设计指南
 
 
瓷片区是在一个APP中将一块矩形区域内划分出不同的矩形组合,每个二级矩形内一般会包含标题、介绍文字、主体视觉元素、标签等信息,通过摆放推广相关的内容吸引用户点击进入。
1.瓷片区是具有营销性的功能区域
瓷片区在设计层面上是具体的运营模块,而不是一种单纯的设计形式。瓷片区是对于存在的产品进行流量扩充,是提高产品点击率,是产品存在后方便调整流量使用。下图中遮照区域是产品的核心功能区,不是简单的营销入口,不能被删除,否则会影响用户使用。
深度剖析|瓷片区设计指南
 
 
2.瓷片区是静态固定的区域模块
APP软件中常出现功能列表页,它是后台获取数据的入口,是一种整齐排列,一层层叠加的片区,可以以一个单独模块的形式出现,不是像瓷片区类似贴瓷砖组合呈现。在没有产品展示的情况下瓷片区可以显示空状态,区域整体拼接结构不变,以静态固定状态显示。下图中页面本身为功能列表,模块性质本身不属于营销性质。
深度剖析|瓷片区设计指南
 
 
3.瓷片区不是金刚区
瓷片区不是设计形式,它的拼接表现形式不是只限定于瓷片区可以用,在任何其他位置和模块都可以采用这种样式进行设计。瓷片区的功能权重较金刚区略低,金刚区较多的为产品核心功能入口,而瓷片区多为运营活动的营销导流入口。
深度剖析|瓷片区设计指南
 
 
4.瓷片区不是快速入口
我们经常会看到一些快速入口会像瓷片区一样做成卡片拼贴的样式,但不管样式如何改变,瓷片区和快速入口在内容承载上有着本质的区别。
瓷片区有较强的诱导性,通过展示的信息元素、图片,如商品图片、产品代言人,来
诱发用户关注并点击,在删除后不会影响产品的正常使用。快速入口它主要应对的是
用户的主动行为,通过把功能入口密集的罗列出来方便用户进行查找和点击。它主要以展示主题入口相关图形为主,可以是图标也可以是图片、图形 ,如果删除会影响产品使用。
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
在瓷片区设计中,一般常见的类型分为3种:实物照片类、插画类、淘宝电商类
1.实物照片类
优点:识别度高,不需要明确的文案标注,图片代入感强,带有图片本身属性的名称和样貌、可复用性强,设计效率较高。
缺点:对图片素材要求高,图片显示有细节。
场景:对实物图需求较大的应用产品类型,如外卖、家居、服装、旅游等产品使用较多。
深度剖析|瓷片区设计指南
 
 
2.插画类
优点:可高度描述瓷片区的运营意义,精美的插画有助于提升细腻性,产品的细节品质和趣味,插画本身色彩明度低饱和度高,图形表现活跃,风格可控。
缺点:偏抽象的产品,没有合适的实图可替代,此类产品多以插画的形式去表现。矢量插画类页面对周围环境,所表现的内容需要进行一对一绘制,需要高度的概括主题的图形。由于针对属性比较强,所以难以复用。同时图形构图绘制时间较长,时间成本较高,绘制时需要特别注意对关键信息的提炼以及识别度。
场景:对设计风格有明显要求,如金融、理财、教育、生活等产品。
深度剖析|瓷片区设计指南
 
 
3.淘宝电商类
优点:根据用户反馈数据提供高频输送内容,与浏览数据时时对应,符合用户心智,转化率更高。
缺点:通过大数据真实反馈内容推动产品营销,每个产品单独以个性化形式展示,其他商家产品难以复制,具有技术实现难度。
场景:对设计千变万化,定制多样,常用产品为电商类等。
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
在进行瓷片区设计时,我们往往需要投入更多的精力进行细致化设计。而瓷片区究竟是由哪些元素组成呢?
背景、图片、文字是瓷片区主要构成元素,其中也可以运用插画、图标、标签、装饰等进行搭配使用,作为设计延展元素。背景、图片、文字在瓷片区一般必须出现,他们是对产品展现、描述或对营销目标表达的关键因素,插画、图标、标签、装饰等可根据设计风格、饱满度、产品需求上加以使用,丰富视觉,突出特殊标识。
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
瓷片区是一个需要视觉比较突出的组件,拥有较强的视觉感才能起到引导用户点击的效果。如何设计好瓷片区,从了解瓷片区各个元素设计开始。
1.框架布局
要了解瓷片区的设计方法,要先了解瓷片区的布局。在整个产品组件区域内,需要有
效分配空间给不同的瓷片。首先在前期设计中,要优先确定瓷片区框架的四周内边距,然后再根据要放置的瓷片数量和重要性进行合理分配,一般可将模块拆分出 2*2、3*2、4*2、4*1的基本网格系统。
深度剖析|瓷片区设计指南
 
 
如果各个模块的重要性不同,可以将多个小瓷片按照纵向或横向排列合并为一个大瓷片,或将大瓷片拆分成多个小瓷片,以瓷片区域的大小来形成视觉权重的区分。
深度剖析|瓷片区设计指南
 
 
布局的结构的划分是整个瓷片区设计的主体,除了以上常用的最基本构图方法外,还有很多不同的瓷片分布方式,要通过不断的积累实验发挥自身创新能力,设计出更丰富的瓷片区展示形式。
2.元素排版
单个瓷片区内的元素一般由背景、文字、图片/图标/标签/装饰构成。常见的排版方式一般有左右排版、上下排版、对角线排版、Z字型排版这四种通用的排版形式。
(1)左右排版
一般在配图为图片、图标时适用,一般一行显示一块或两块瓷片。
深度剖析|瓷片区设计指南
 
 
(2)上下排版
采用上文下图的形式,一般在界面的功能入口较多时适用,一般一行显示不少于3块瓷片。这种元素排版,在营销型展示上一般为上图下文,偏功能型的展示则为上文下图。
深度剖析|瓷片区设计指南
 
 
(3)对角线排版
文字和图片呈对角线布局,一般一行显示两到三块瓷片,此种布局可显示较多文字信息。
深度剖析|瓷片区设计指南
 
 
(4)Z字型排版
文字、图片和标签成Z字型排布,文字可跨度到图片区域,一般一行显示两到三片瓷片,此布局也可显示较多文字。
深度剖析|瓷片区设计指南
 
 
根据业务需求,在不同场合可以选择一种以上布局排版组合使用,使得版面更加丰富,排版上也能够有所变化,突出优先级,增加设计美感,做出更符合产品需求的设计效果。
3.文字使用
文字部分是瓷片区重要的组成内容,应该简明清楚,准确传达核心信息。文字与图片的合理摆放能够使得信息层次清晰易读。
(1)文字的大小
文字是瓷片区重要的组成部分,一般从文字尺寸上可分为标题、副文本两种大小,副标题、标签、价格可统称为副文本,他们的尺寸基本一致的。由于受瓷片区内文本量尺寸限制,可选择的文字大小范围较小,所以一般会定义两三种规格的字段使用。在APP端主标题文字字号建议在30-34px,副文本文字建议在24-26px,而其他说明性副文本文字不能小于20px。
深度剖析|瓷片区设计指南
 
 
(2)文字的位置
在瓷片区内,文字放置的位置在左侧、上侧和左上侧,如果根据视觉排版需要也可以把文字放在右侧、下侧等,排版上没有固定要求。同时,文字排版还需要保证跨瓷片对齐。虽然在不同瓷片区中不同的对齐方式可以增加视觉变化,如果一个瓷片一个样子,容易造成杂乱不统一,在设计中还需尽量保证跨瓷片文字对齐。
深度剖析|瓷片区设计指南
 
 
(3)文字的层级
瓷片区主标题和其他副文本文字设计要做好层级区分,可以通过文字大小、粗细、颜色等体现主次关系,尤其要注意文字颜色的使用问题,主标题相较于其他副文本文字颜色要更清晰更突出。副文本作为主标题的辅助和延续,不能喧宾夺主,主次关系混乱。而标签的文字也要符合层级划分,根据产品属性和调性,按需求设计符合的标签文字样式。
深度剖析|瓷片区设计指南
 
 
(4)文字的分类
瓷片区文字一般可分为非标签类文字和标签类文字。非标签类文字是主标题加基础副文本构成。
深度剖析|瓷片区设计指南
 
 
标签类文字可分为主副文字两个板块,标签为彩色标签或透明色标签,结合业务产品属性和需要突出的文案,分别对应不同的标签。主要文案一般位于瓷片区域的左上角和上部垂直居中的位置,副文案一般位于左下角、右侧或下部视觉较弱的位置。
深度剖析|瓷片区设计指南
 
 
4.图片应用
图片是瓷片区的核心元素,需要选择高质量的实物实景图或者创意插图,确保图片清晰、美观且能够真实反映产品特点。
(1)实物、实景图片
瓷片区中的产品图片大多为商品实物图或实景图,是用户购买的真实实物产品或地区实景,具有较强的代入感,图片要有高质量的标准,整体品质精美,画面清晰美观,抠图干净舒适,在多张图片使用的情况下,还需要保证图片视觉感受风格大小一致,这样才能吸引用户的点击。
深度剖析|瓷片区设计指南
 
 
(2)插画图
瓷片的图片如果偏抽象、没有合适的实物图或者设计要求的原因,图片也可以矢量的插画或图标形式替代,例如部分瓷片运营位需要赋予更多的视觉展示性功能,就可以为其单独进行插画或图标设计,用表意的图形增添产品调性和趣味性。
深度剖析|瓷片区设计指南
 
 
5.背景
瓷片的背景主要为了
充实模块,营造氛围,一般在背景色彩形式上常使用高明度低饱和的纯色或者选用渐变色为主。
(1)纯色背景
可选取跟图片或插图主色调邻近色彩进行设计,保证模块主体突出,减少背景视觉影响。
深度剖析|瓷片区设计指南
 
 
(2)渐变色背景
可同色系渐变,选取同种颜色,饱和度发生变化。相邻色系渐变选取相邻色相和饱和度变化,也可选定浅色或向白色过渡,不论采用何种背景都不应干扰主体元素的突出。
深度剖析|瓷片区设计指南
 
 
(3)浅灰色背景
一种近似乳白色,和底板颜色有细微差别即可,期望用户能够看到模块化的层级处理而起到衬托作用。
深度剖析|瓷片区设计指南
 
 
(4)白色背景
视觉上展现没有颜色或者只存在部分线框,画面整洁干净属于百搭背景,在产品中使用较为普及。
深度剖析|瓷片区设计指南
 
 
(5)全景配图背景
配图覆盖整个瓷片区域,较多的适用于外卖类、旅游类、家装类产品,使用户快速记忆了解产品,点击进入形成流量转化,提高用户转化率,核心成交率。
全景配图图片素材要求高质量,图片一般要选取1000*1000px以上分辨率图片,满足多个终端显示效果。图片要求色调明亮,饱和度高,图片色彩视觉感受和谐。画面主体约占面积1/2,要保留留白区域,背景简洁呼吸感强,有空间感。全景配图因为图片整体色彩元素呈现丰富,背景复杂,一般可以添加蒙层提高文案阅读和标识性。
深度剖析|瓷片区设计指南
 
 
(6)局部配图背景
这时瓷片区会一分为三,三分之二的位置放置文案,配图约占据三分之一区域位置,这种排布适用于大多数产品,使得产品左右和谐平衡。而这类图片素材和插图要求高质量,色调明亮,饱和度高。插图图标既要满足品牌色及延展,插图图标样式风格也要保持一致,绘制注意提炼文案信息,图文表意一致,概括性强,统一图片或插图的高度和视觉面积。
深度剖析|瓷片区设计指南
 
 
6.装饰点缀
在设计瓷片区时还可以加入装饰点缀,这是为了烘托模块氛围,让画面更丰富饱满,给用户带来不一样的视觉感受。
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
写在最后
当我们在开始设计瓷片区时,首先需要明确瓷片区的目标和功能,一定要考虑当前产品与展示的内容是否匹配,包括用户目标的受重点是否需要瓷片区,这有助于确保设计方案与业务需求一致。
其次要注重细节,在设计时需要注意配图的质量、尺寸和视觉面积的统一性,图片之间的差异性以及关键文案信息的提炼。
在瓷片区的设计时还应与产品应用的整体风格和品牌形象保持一致,以增强用户对品牌的认知。瓷片区的设计不仅要考虑美观,还要考虑如何有效地传达信息和提升用户体验,考虑用户的操作习惯和视觉习惯,确保界面的直观性和易用性。
最后完成设计后要进行用户测试和收集反馈,根据用户的实际使用情况进行优化。
瓷片区设计是一个既考验创意又注重细节的过程,在广泛的应用场景中,我们需要根据不同的产品类型、用户需求和业务目标进行灵活应用,创建出既美观又实用的瓷片区。通过合理规划和设计瓷片区,可以有效提升产品的用户体验和商业价值。
感谢阅读,希望这篇文章能对大家有所启发,创作更有价值和影响力的设计作品。


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

交互设计的核心:用户体验与创新思维的融合

清阳

在数字化时代,交互设计(Interaction Design)已成为产品成功的关键因素之一。无论是移动应用、网站还是智能设备,优秀的交互设计都能为用户带来流畅、直观的体验。今天,我想和大家探讨交互设计的核心要素,以及如何通过创新思维提升用户体验。

1. 以用户为中心的设计理念

交互设计的核心是“以用户为中心”。设计师需要深入理解用户的需求、行为和痛点,通过用户研究、原型测试等方法,确保设计能够真正解决用户问题。例如,简洁的导航、清晰的反馈和一致的操作逻辑,都是提升用户体验的基础。

2. 创新与功能的平衡

在追求创新的同时,设计师需要确保功能的实用性和易用性。过度复杂的设计可能会让用户感到困惑,而过于保守的设计则可能缺乏吸引力。如何在创新与功能之间找到平衡,是每个交互设计师面临的挑战。

3. 情感化设计的力量

交互设计不仅仅是功能的实现,更是情感的传递。通过色彩、动画、音效等元素,设计师可以创造更具吸引力和情感共鸣的体验。例如,微交互(Micro-interactions)的巧妙运用,能够增强用户的参与感和满意度。

4. 跨平台与多设备的一致性

随着用户使用设备的多样化,跨平台设计变得越来越重要。设计师需要确保在不同设备和平台上,用户都能获得一致且无缝的体验。这不仅需要技术上的支持,更需要设计思维的全局观。

5. 数据驱动的设计优化

通过数据分析,设计师可以了解用户行为,发现设计中的不足,并持续优化产品。A/B测试、热图分析等工具,能够帮助设计师做出更科学的决策,提升产品的整体表现。

31.png

结语

交互设计是一门融合艺术与科学的学科,它需要设计师不断学习、实践和创新。无论是新手还是资深设计师,我们都应保持对用户需求的敏感,以及对技术趋势的关注。期待大家在评论区分享自己的见解和经验,一起探讨交互设计的未来!


希望能激发大家的讨论和思考!如果你有更多想法或案例,欢迎留言交流

 

 

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

清阳

近两年出现了不少“解放设计师双手”的设计工具、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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

个人资料

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

存档