首页

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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

设计的意义

蓝蓝设计的小编

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

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

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

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

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

保罗·兰德就是一位我们公认的设计大师、艺术家。他是当今美国乃至世界上最杰出的图形设计师、思想家及设计教育家之一。他最出名的企业标志设计,包括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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

精通B端界面设计:揭秘7大弹窗类型及其实战案例分析

蓝蓝设计的小编

 
 
 
面向企业用户、注重效率与管理、解决企业痛点、技术与服务并重、决策过程复杂
B端关注的是如何通过技术手段赋能企业,提升其业务处理能力和管理效能,是企业间或企业内部运作不可或缺的工具和服务。
弹窗-聚焦任务处理与即时提醒的高效交互工具;作为一种常见的交互设计元素,在提升用户体验和效率方面扮演着重要角色。
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
 


作者:Miao_C
链接:https://www.zcool.com.cn/article/ZMTYyNDEwMA==.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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

个人资料

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

存档