首页

常见的 10 大图标设计风格

杰睿

图标是产品中不可或缺的部分,随着设计趋势的不断变化,图标设计风格也在不断丰富。在产品中会出现哪些常见的图标设计风格呢?结合产品案例体验,今天黑马哥为大家简单梳理一下,列举出常见的 10 个图标设计风格。
常见的 10 大图标设计风格
 
 
 
 
1. 线性功能图标
线性功能图标是产品中最常见的风格,设计时控制好图标规范即可。常见的多为单色(无彩色系、品牌色等),也有用品牌色作为点缀色的案例。
常见的 10 大图标设计风格
 
 
 
 
2. 面性功能图标
面性功能图标与线性风一样,也是产品中最常见的风格。有单色单图形、多色叠加风、微渐变风格等表达形式。
常见的 10 大图标设计风格
 
 
 
 
3. 磨砂玻璃质感图标
磨砂玻璃质感图标是轻质感的表达形式之一,也是近些年较为流行的趋势。可以扁平也可以微质感,在立体感图标上面也可以运用这类效果。
常见的 10 大图标设计风格
 
 
 
 
4. 微质感图标
微质感图标相较于扁平化设计而言,更能突出细节的深入和真实感的体现。微质感图标的层次感也更丰富,该技法也是设计师的必备技能。
常见的 10 大图标设计风格
 
 
 
 
5. 晶白风图标
晶白风图标常用于金刚区栏目,利用白色不透明度关系和背景色关系进行图标设计,图标质感、层次感、空间感等都能得以体现。
常见的 10 大图标设计风格
 
 
 
 
6. 立体感图标
立体感图标分为 2.5D、伪 3D、3D 建模等形式,特别是随着三维设计趋势的普及,立体感图标的运用也逐步普及,也可以利用 AI 工具完成该类型图标。
常见的 10 大图标设计风格
 
 
 
 
7. 插画风图标
插画风图标是插画风格的简化融入,以此提升图标设计的特征感,使得图标具备差异化的视觉效果,也能烘托出整体设计的质量。
常见的 10 大图标设计风格
 
 
 
 
8. 主题化图标
主题化图标设计风格多样,会结合活动主题或者节日庆典等内容,根据主题设计图标更能体现产品温度。
常见的 10 大图标设计风格
 
 
 
 
9. 写实类图标
写实图标是以技法表现实物特征,比较考验质感表现、透视光影等技法能力。随着扁平化趋势,写实类设计逐步被淡化,但是也有部分产品会局部性运用。
常见的 10 大图标设计风格
 
 
 
 
10. 实物图图标
直接将产品实物图作为图标相对较少,但是依然有产品会选择使用,还原其内容表达的真实性。
常见的 10 大图标设计风格
 
 
 
以上为产品中常见的图标设计风格,根据不同需求采用。对于设计师而言,这也是首先需要掌握的图标技能。
 
本文由 @黑马青年(heimaui)原创发布。未经许可,禁止转载。

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

小卡片大布局-带你掌握卡片设计攻略

杰睿

UI界面中的卡片设计是一种常见且有效的设计方式,它通过将内容以模块化、层次化的形式呈现,提升了界面的可读性和用户体验。通过分割特性,可以赋予界面更多的层次感,为用户带来视觉上的愉悦。然而,卡片式设计并不是无懈可击的,由于其分割的特性可能会对用户的沉浸式浏览体验产生一定的影响,例如造成横向和纵向空间的浪费等问题。因此,在决定是否使用卡片式设计时,我们需要根据实际场景和内容形式进行判断,而不是刻意追求“卡片式”而设计。
卡片在移动端设备上,运用的越来越多,然而,在选择使用卡片设计、视觉呈现方式以及其优点和缺点等关键因素方面,仍然存在一些被忽视的细节。在进行卡片设计时,我们应该注意哪些细微之处呢?以下我们就一起来探讨下如何设计卡片。
一、卡片的概念
小卡片大布局-带你掌握卡片设计攻略
 
 
什么是卡片?
 
在日常生活中,一些常用的银行卡、名片、VIP卡、扑克牌等就是一张卡片,这些卡片主要是用来传递卡片本身的一些信息。例如使用者可以从银行卡上获取卡片的所属银行、卡号等信息;可以从名片中知道卡片所属人以及此人的一些基本信息等。
UI界面中的卡片设计是一种常见且有效的设计方式,它通过将内容以模块化、层次化的形式呈现,提升了界面的可读性和用户体验。
小卡片大布局-带你掌握卡片设计攻略
 
 
卡片出现在了我们生活中的方方面面,如名片、不干胶标签、便利贴、会员卡..等,不管是何种类型的卡片,它都将代表着我们现实生活中的某个特定信息。卡片,通常包含图片或文本信息,是一种有效的信息承载方式。UI界面中的卡片设计是一种常见且有效的设计方式,它通过将内容以模块化、层次化的形式呈现,提升了界面的可读性和用户体验。
小卡片大布局-带你掌握卡片设计攻略
 
 
卡片式设计是一种常见的UI组件,它能够将不同的内容分层次组合在一起,从而让页面看起来更有秩序感。卡片通常由标题、内容描述、图像、按钮等元素组成,自带简约和易用的属性,方便用户快速理解和操作。
小卡片大布局-带你掌握卡片设计攻略
 
 
二、卡片的交互设计
小卡片大布局-带你掌握卡片设计攻略
 
 
当用户与卡片进行交互时,卡片需要星现特定的视觉反馈。常见的卡片状态包括默认、
悬浮(pc端)、激活、选中
等。
小卡片大布局-带你掌握卡片设计攻略
 
 
为了更好的区分卡片和背景,可以用填充底色、措边、添加阴影来让卡片与背景有区分。
小卡片大布局-带你掌握卡片设计攻略
 
 
卡片的可读性主要取决于字体的选择和字号的大小,例如,即使两个卡片具有相同的布局,但如果选择的字体和字号不同,它们的可读性和视觉效果可能会有很大的差别。
小卡片大布局-带你掌握卡片设计攻略
 
 
卡片上的文字间距最好有一定的规律,这里可以按网格法来规划,比如8px网格,10px网格等等。网格的使用其实可以很灵活,比如我这里的卡片其实就用到了8px网格,各间距就会用8的倍数来做。大小比例就尽量用黄金比例来处理,这样做目的一方面是为了让界面有秩序,另一方面是提升决策效率。
小卡片大布局-带你掌握卡片设计攻略
 
 
在设计卡片布局时,通常会将多个卡片以网格的形式排列在页面上,以保持水平方向和垂直方向的对齐,这样可以使页面看起来更有序、更规范。
小卡片大布局-带你掌握卡片设计攻略
 
 
当卡片中包含标题、内容、图片和按钮等多种元素时,需要考虑到标题与圈片的位置关系以及标题和内容的长短等因素。例如,如果卡片的顶部是标题,由于标题字数可能不确定,我们可以在卡片上方保留至少两行的空间以容纳标题,而保持卡片内的图片和按钮位置不变。
三、常见的卡片样式
小卡片大布局-带你掌握卡片设计攻略
 
 
小卡片大布局-带你掌握卡片设计攻略
 
 
边距卡片,
这种类型的卡片在UI设计中最为常见,柔和的固角、边缘阴影以及四周很自然的留白,让内容模块的存在感更加强烈,整个页面信息的层级也更加清晰。
小卡片大布局-带你掌握卡片设计攻略
 
 
悬浮卡片
并非模态弹窗,与模态弹窗相比,悬浮卡片无需主动操作触发,可作为临时控件或长期固定显示。此外,悬浮卡片能承载更多信息内容,可通过伸缩来定义卡片中的信息数量,多则展示全部内容,少则仅显示关键信息,非常灵活。
通栏卡片
具有更强的视觉阻断,对区分不同的功能模块有不错的效果,不过这种类型只通过页面背最色保留上下边间、且不会过多,不然页面会显得零散、杂乱。
四、卡片、列表、无框设计的区别
什么是卡片设计
卡片式设计借用了现实世界中的卡片的特征,就像一张信用卡或名片,它承载了图片、文字、按钮等元素,以一个缩略的形式提供了快速浏览信息的模块。在视觉表现形式上,卡片式设计可以分为扁平式卡片和通栏式卡片,前者更像传统意义上的卡片,上下左右都留有空隙:后者仅在上下留有空隙,甚至无空隙。
卡片式设计的优点
1.独特的设计语言
,卡片本身是一种设计语言,就像面形图标一样具有矩形的形状,带着圆角或直角,甚至还有轻微的阴影。这种独特的设计语言可以快速地从扁平化设计中区分出来,带给用户强烈的辨识度。例如 Google 将卡片作为 Material design 的设计语言,运用到 Android系统所有的移动设备上,形成了独一无二的视觉风格。
小卡片大布局-带你掌握卡片设计攻略
 
 
2.灵活的空间扩展
,相比传统的列表式设计只能纵向滚动浏览,卡片式设计的空间扩展性更加灵活多变。由于每一个卡片都是独立存在的因此既可以纵向滚动,也可以横向滑动。例如马蜂窝的卡片式设计通过横向滑动在狭窄的屏幕上展示更多内容,花瓣的两列卡片式设计也为界面空间提供了更多的展示内容,这些都大大提高用户的浏览效率。
小卡片大布局-带你掌握卡片设计攻略
 
 
3.清晰的视觉呈现。
卡片化繁为简,将不同类型的元素有效地组织!在一起,形成一个封闭式的视觉形式。每一个卡片之间都具有独立性不会相互干扰,它们保持着一致的外观,让界面看上去干净和简洁。例如 App Store 和去哪儿赋予每一个卡片一个主题,以简单明快的内容表现形式吸引用户的注意力,简洁、连贯的卡片也避免了因为内容太长让用户产生畏惧心理。
小卡片大布局-带你掌握卡片设计攻略
 
 
4.易于的内容整理。
卡片是一个容器,将不同纬度的内容进行区分或将相同纬度的内容归纳在一起,形成一个独立的模块,能有效地避免信息散乱和分类不清晰的状况发生,让界面的视觉层次变得清晰。例如途牛在一个界面中展示了多种不同形式的卡片式设计,通过卡片的大小颜色、图文组合进行区分,视觉层次清晰明了。再例如腾讯视频将相同功能的列表进行分组,有助于用户快速获取信息。
小卡片大布局-带你掌握卡片设计攻略
 
 
5.特殊的功能属性。
卡片不仅是内容的容器,同样也是操作和交与的载体,由于它的视觉表现是独立存在的,因此可以用于背景之上的对话框设计,以强烈的视觉表现力寻求一次互动。例如进入后弹出一个对话框,请求用户开启通知。再例如滴滴出行和美团外卖将一次活动推广展现在卡片上,以此快速吸引用户的注意力。
小卡片大布局-带你掌握卡片设计攻略
 
 
什么是列表式设计
列表式设计是 App 中最常见的表现形式,它使用分割线对不同的元素进行有效的组织,帮助用户理解界面的视觉层次。在视觉表现形式上,列表式设计根据分割线的不同长度可以分为半分割线式列表、缩进分割线式列表和通栏分割线式列表。
列表式设计的优点
1.轻量化的设计。
列表式设计是真正意义上的扁平化设计,不像卡片式设计那样有着清晰的视觉层次,它让所有的信息内容处于同一个平面。这样的好处是干净的界面可以减少对用户的视觉干扰,以便用户顺畅的进行浏览。亲切和友好的用户体验是列表式设计的最大优点,它非常适合于形式简单的信息内容。例如网易云音乐和今日头条的每一条动态都有着相似的形式,轻量化的列表式设计让用户的浏览变得轻松和优雅。
小卡片大布局-带你掌握卡片设计攻略
 
 
2.提升浏览效率。
列表式设计没有宽厚的空隙作为信息内容的区分而是使用一条细窄的分割线。它非常适合于非常多的同类的信息内容、可以极大地节省界面的空间,让狭小的屏幕显示更多内容,在无形中就提升了用户的浏览效率。例如 微博 和腾讯新闻的商品都是左图右文的结构,使用简单的列表式设计,有助于用户快建地进行浏览。
我们再来试看分析微博动态为什么使用卡片式设计,而不是列表式设计。首先,微博强调每一个动志的丰富内容和独特个性,希望用户进行分事、评论和点赞操作,卡片式设计有效地将用户的注意力停量在当前的卡片上;其次,五花八门的内容形式使用卡片式设计易于整理,可以保持清晰的视觉层次。
什么是无框式设计
无框式设计是一种去形式化的设计,它强调化繁为简,去除一切与内容无类的装饰性元素,旨在突出内容本身、好让重要的信息及功能更容易被关注,让用户更加清晰和直观地进行浏览。在无框式设计中,你几乎看不到区分内容的分割线,它通过大间距就完成了视觉层次的划分留白是它的最大武器。
小卡片大布局-带你掌握卡片设计攻略
 
 
无框式设计的优点
1.极简主义风格。
相比卡片式设计追求“多”,无框式设计则追求“少”,即用最简单的形式和最理性的设计创造最深入人的艺术感受例如余音使用白色的背景,左小右大的边距和大量的留白,呈现出一种独特的产品气质。列表设计去掉分割线,干净到一尘不染的界面让用户产生极为深刻的印象。
2.掌控注意力
。无框式设计最显著的特征就是去除装饰性的分割线通过间距的亲密和疏远对比进行视觉层次的划分。大量的留白设计把空间留给内容,把内容留给用户。使用了无框式设计没有了那些分割线的干扰,有效地掌控了用户的注意力,让用户把目光集中在内容本身。
3.保持界面整洁。
设计是连贯、统一的,没有了边框可以让界面保持干净、整洁的画面。而一旦有了边框,这种简洁的设计就会被打部精王德商处可见那些细碎的分副线或描边,使得界面变的拥挤不堪。大部分用户都喜爱干净、整洁的画面,微博和腾讯新闻就是这样的设计。
五、卡片的应用场景
小卡片大布局-带你掌握卡片设计攻略
 
 
瀑布流
瀑布流主要正针对图片较多、或以图片为主的内容设计,它最大的优点是无需过于在意图片的高度,最大限度的还原原始图片效果。
信息流
信息流主要通过文字、图片或视频等媒介来展示较长的内容,这需要用户花费一定的时间进行滑动和浏览,才能筛选出对自己有用的信息。
左右滑动
在音乐、视频等以图片为主要内容的产品中,卡片式左右滑动的设计最为常见。这是因为卡片式设计能够更好地展现内容的层次感和吸引力,尤其对于以图片为主的产品来说,卡片式设计可以提供更丰富的视觉效果,增强用户的浏览体验。
页面头部
卡片式设计是一种有效的布局方式,它可以在个人中心、个人主页、会员等页面中,将关键信息进行整合和概括,从而形成清晰、连贯的视觉结构。
 
六、卡片的设计原则
在UI界面中,卡片设计是一种重要的布局方式,它以其简洁性、模块化和可自定义特性而备受设计师与使用者青睐。以下是卡片设计时需要遵循的一些关键原则:
小卡片大布局-带你掌握卡片设计攻略
 
 
一、简洁清晰原则
信息精炼:每张卡片应仅展示关键信息或功能,防止信息负荷过大,确保用户能够快速获取所需内容。
视觉元素简洁:避免在卡片上添加过多的装饰性元素,保持设计的简洁性。
二、一致性原则
视觉风格统一:不同卡片之间应保持一致的视觉风格,包括颜色、字体、图标等,以提高用户识别及使用效率。
布局规范:卡片的布局应遵循一定的规范,如边距、圆角大小等,以保持整体的一致性。
三、层次性原则
信息层级明确:通过字体大小、颜色、图标等方式明确信息的层级关系,引导用户按照重要性顺序浏览信息。
视觉空间感:利用投影、前后颜色设定等手段提升整体设计层次感,使卡片看起来更加立体和自然。
四、交互体验原则
操作便捷:为用户提供充足的操作空间与方式,如点击、滑动等,鼓励用户深度参与信息生成与传播过程。
反馈及时:在用户与卡片进行交互时,应提供及时的反馈效果,如颜色变化、动画等,以增强用户的交互体验。
五、适应性原则
响应式设计:卡片设计应能够适应不同屏幕尺寸和设备类型,确保在各种环境下都能保持良好的显示效果。
内容灵活:卡片的内容应具有一定的灵活性,可以根据实际需求进行调整和更新。
六、设计细节原则
圆角设计:圆角的设定应符合整体的风格调性,大圆角表达柔和,小圆角表达硬朗。
边距与留白:合理的边距和留白可以提升整体设计的层次感,使内容更加突出且易于阅读。
标题与正文:标题应简短明了,用于说明卡片的内容;正文部分则应简洁精炼,避免冗余信息。
卡片设计在UI界面中扮演着重要角色,它不仅能够提升用户体验,还能增强信息的可读性和可理解性。因此,在进行卡片设计时,应遵循简洁清晰、一致性、层次性、交互体验、适应性以及设计细节等原则,以确保卡片设计的质量和效果。
总结
随着科技的不断进步和用户需求的变化,卡片设计也在不断发展和创新。未来,卡片设计将更加注重个性化和智能化。通过用户行为分析和机器学习等先进技术手段,可以为用户提供更加精确和个性化的推荐和服务。同时,虚拟现实(VR)和增强现实(AR)等新技术的发展也将为卡片设计带来更多元化的应用场景和更丰富的用户体验。
综上所述,UI界面中的卡片设计是一种重要且有效的设计方式。通过遵循设计原则、掌握设计技巧并借鉴优秀案例,可以设计出既美观又实用的卡片界面。


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

B端基础 | 弹窗设计基础知识

杰睿

建筑设计师尤哈尼·帕拉斯玛说、简约并非简单,它是通过深思熟虑后对事物本质的准确把握。知其然、知其所以然。这次文章会尽量简洁一点。
 
奔跑的日子、总是希望优秀的你和我一起同行。让我们一起在艺术的环境里生菌、知识的海洋里狗刨~
 
B端基础 | 弹窗设计基础知识
 
 
第一部分 | 弹窗基础知识
如果你只是想了解一下弹窗的基础知识,那么看这部分就够了。只需3分钟无痛、来去自如不影响上班哦。
弹窗定义;弹窗来历;弹窗拆分;弹窗分类;弹窗尺寸;
B端基础 | 弹窗设计基础知识
 
 
1、弹窗定义
弹窗是用户和系统交互信息的容器
。(在网上搜了一些文章看,他们的弹窗定义写的基本都是各写各的)我的这个定义绝对靠谱。站的维度高,从人机交互工程出发。这定义没错的妥妥的。说出去基本不会有人反驳你(如果有人敢反驳你把我的名字告诉他,反正我他也不认识我哈哈哈)
 
2、弹窗来历
弹窗最早的起源可以追溯至上世纪90年代。当时,互联网广告的投放形式主要是将广告嵌入在页面内容中,但这种方式存在一些问题。广告商担心消费者在浏览负面内容时,会将广告与负面信息联系在一起,从而对品牌造成不利影响。因此,网页托管网站trippod.com利用网页脚本程序,发明了一种在新开窗口发布广告的方法,这就是网络弹窗的起源。
B端基础 | 弹窗设计基础知识
 
 
3、弹窗拆分
整体的去分析、在大部分的弹窗类型里都会包括
关闭、内容区、模态层
(非模态类别的没有个元素)
B端基础 | 弹窗设计基础知识
 
 
3.1、模态层
模态层通常是搁在原页面和弹窗之间的半透明黑色。其主要的作用是1、降低用户在操作中被强打断的不适和跳出当前页面的恐慌感。让我们的用户更加的聚焦弹窗内容。
B端基础 | 弹窗设计基础知识
 
 
我个人在设计时模态层基本都是50%的纯黑,但并不是一定要用50%的纯黑,要结合自己的平台业务、设计风格等方面去制定。偷偷的告诉你这个模态层加入一点微微的色彩倾向在视觉上往往会更好一点。
3.2、关闭
弹窗的关闭是用户退弹窗的重要途径、一般都会在弹窗内容右上角。弹窗关闭按钮也有在弹窗范围外的。我们要保证弹窗关闭的清晰明确,来方便用户操作。
在弹窗中、关闭弹窗的途径除了叉掉。还可能有其他的。如取消按钮。
3.3、内容区
内容区的内容是根据弹窗类型的不同,内容就会有所不同。什么都可能有、图标、确认信息、选择框、输入框。只要是页面上能出现的都可能会出现在弹窗的内容区域。
B端基础 | 弹窗设计基础知识
 
 
4、弹窗分类
弹窗的分类从交互形式差的差异。我们可以将其分为
模态类和非模态类
。这两个大类就比较好区分,看看有没有那层模就行了。常见弹窗类型表单弹窗、抽屉、警告提示、全局提示、通知提示、气泡确认等。
B端基础 | 弹窗设计基础知识
 
 
4.1、模态类
模态是目前我们比较常见的类型、模态类弹窗打断用户的操作行为,用户必须对其进行操作才能解散弹窗,否则不能进行其他操作。模态类最常见的就是、
表单弹窗、确认弹窗
。当然还有其他的文件选择、信息展示、等等。
B端基础 | 弹窗设计基础知识
 
 
4.1.1、表单弹窗
这弹窗在B端设计里是最最最常见的一种弹窗。虽然我们现在的系统大部分是很智能的。但是复杂的业务就意味着你会和系统产生大量的交互信息的交换。所以这表单可太常见了哪哪都是他。(烦死个人)不过在你制定好一套规使用规范后。基本这样的弹窗是不太需要设计介入的,产品和FE两人一对使用模版就上了。
4.1.2、确认弹窗
这种弹窗就比较好理解了。承载较为紧急的信息,让用户快速处理;如:用户未保存,就点击离开当前页面,通过对话框让用户做出选择。在执行一个重要信息的删除时,通过二次询问引起用户的注意,让用户再次做判断;这类弹窗;
4.1.3、优点/缺点
优点:
强不会让用户忽略或跳过,确保信息的交互响应;引导用户操作;增加用户的参与度,可以提升用户的活跃度和参与度。
缺点:
01、会中断用户的操作流程,打断用户的思路或行为。
02、可能会影响用户体验,因为用户需要等待关闭弹窗后才能继续其他操作。如果弹窗内容过多或过于复杂,用户可能会感到困惑或不知所措。
03、如果过度使用模态类弹窗,例如频繁弹出广告或无意义的信息提示,用户可能会对其产生反感甚至抵制使用相关软件或平台。
4.2、非模态
可以不打断父应用程序,无需停止进度,用户仍可以对父级内容进行交互。大部分应用于信息的反馈和提示。常见的非模态类弹窗大概有、警告提示、全局提示、通知弹窗、气泡确认框;
B端基础 | 弹窗设计基础知识
 
 
4.2.1非模态优点/缺点
优点:
不打断操作流程;不会干扰用户操作用户体验更好;常用于轻量级的信息或提示。
缺点:
可能会被忽略,导致信息传递不畅;不适合展示重要信息;形式通常比较单一,不能满足复杂的展示需求
4.3、其他
林子大了什么鸟儿都会有,一定会有我没有接触到的前沿交互方式。所以这个其他留给未来更优秀的我们去发现。
5、弹窗尺寸
弹窗的尺寸和电脑屏幕分辨率是有关系的。主流的分辨率1920*1080像素。其他的还有1024x768、1280x800、1366x768、1440x900、1680x1050、1920x1080、2560x1440等。
我在设计界面是一般用的是1440*900的设计尺寸。在做弹窗的时候已经不考虑1366*768分辨率以下的屏幕了。多以弹窗的安全高度要小于600px
弹窗的宽度还是要根据自己业务需求去定义的。比如我们的业务最宽的弹窗1280像素。像站酷的查看作品他是整屏的宽度。
模特还怪好看的
模特还怪好看的
 
我在我们平台定义的表单弹窗宽度虽然很不严谨、好像也没有什么理论支撑。但是确一直再用。尺寸分别为、400、600、800、1000、1280。之后还是要细化的。这样的定义弹窗尺寸导致的结果是,开发还原想过不是太好。
B端基础 | 弹窗设计基础知识
 
 
第二部分 |弹窗2.0项目里
承载内容、为什么会有这么多的弹窗类型。问题不在于弹窗,而在于合适的承载内容和交互类型。
B端基础 | 弹窗设计基础知识
 
 
1、弹窗、抽屉、界面
在项目里我们应该怎么去选择这三种内容呈现方式呢。如果你只是设计师大部分时间你也不用选。你只有建议的权利没有决定的权利。如果产品原型是弹窗、你给做了个抽屉。你可以从下面几方面去找支撑点去和产品撕逼、干翻他的原型用你的效果图。
AI的提高画面质量还是有待提高呀
AI的提高画面质量还是有待提高呀
 
1.1、内容
弹窗和抽屉或界面他们承载的内容量是不一样的。所以在选择用那种交互方式时可以从我们业务需要展示的内容量来考虑。简单的确认或通知适合用弹窗、需要展示大量内容或进行复杂的功能时就适合用抽屉或者界面了。
1.2、体验
我们可以从用户体验方面出发、如页面的空间感、考虑空间大小和布局。操作流程上、考虑用户在界面上被打断进程的成本。一致性、确保与其他业务模块交互方式保持一致,为用户提供一致的体验。
1.3、效率
考虑到用户的使用成本、B端设计中效率的提升优先率老高了。考虑系统的加载速度、确保我们使用的交互方式不会影响整体的性能和体验。
 
本身弹窗、抽屉或者界面的使用选择是需要很综合考虑的。总的来说核心是提升效率、保证我们用户好的体验。
2、弹窗交互优缺点
当涉及到B端弹窗的交互方式时,有以下几点核心优缺点:
B端基础 | 弹窗设计基础知识
 
 
2.1、优点
提供及时反馈
弹窗可以快速向用户显示重要的信息或请求,使用户能够即时了解系统的状态或需要执行的操作。
简化操作流程
对于某些复杂的操作或任务,弹窗可以提供直观的界面和简化的步骤,使用户更容易完成目标。
吸引用户注意力
通过使用弹窗,可以确保用户在操作过程中不会被其他界面元素分散注意力,从而更专注于当前的任务。
提供额外的信息或功能
弹窗可以包含更多的详细信息或额外的功能选项,使用户能够更深入地了解或操作某个特定内容。
2.2、缺点
干扰用户操作
过度或不合适的弹窗可能会干扰用户的正常操作,打断用户的工作流程,影响用户体验。
误导用户
不清晰或误导性的弹窗信息可能会使用户产生困惑或误解,导致错误的操作或决策。
影响性能
弹窗的弹出和关闭可能会增加系统的负担,影响性能和响应速度。
不符合用户习惯
对于习惯于传统界面的用户来说,过于复杂或与众不同的弹窗交互方式可能会造成使用上的困扰和不适应。
3、我的一些设计
我们项目里把升级弹窗做成了模版、广告弹窗也是模版。当然像二次确认这样的弹窗是组件,上货看东西。
B端基础 | 弹窗设计基础知识
 
 
这个是系统的一个展示弹窗、和一个从弹窗形式优化到抽屉的模块界面。
B端基础 | 弹窗设计基础知识
 
 
这个就是一个在线聊天界面。是从SaaS里跳转新建页面。
大概是想了想、平时做的项目确实比较碎、最近也没做整理盒复盘。所以界面的展示就不放太多了。而且有的信息页模糊了。不是我不信家人们。是我不信自己、朦胧也是一种美吧。哈哈哈
 
B端基础 | 弹窗设计基础知识
 
 
最后
我大学设计史陈老师告诫过我们。她说同学们,我其实不怕你们眼高手低。我怕的是你们眼都不高。和优秀的人一起前行、希望和优秀的你们一起去经历设计、生活、工作的美好。
期待你的加入、我们的大伐木累。我可以作品集指导反正闲着也没事不要钱。我和群里的小伙伴都是多年一线设计师来自于天南海北,不乏有互联网大厂设计师。再次
期待你的加入...
 
参考
优设网:4个方面层层递进,分析如何设计B端产品的弹窗
知乎:B端设计指南04-弹窗
知乎:运营弹窗的设计要点拆解
知乎:浅谈B端产品弹窗一级设计方法
人人都是产品经理:WEB端弹框掌握着几天就够了
 


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

设计的两面性:理性决策与感性表达

杰睿

引言
设计应该是感性的还是理性的?设计是感性重要还是理性重要?此类问题一经出现便会引起争议无数,每个人对此都有自己的见解与理由,还有些人主张“理性与感性需要平衡”“既要理性也要感性”,此类观点看似正确,却缺乏任何实质性的指导价值。
实际上,很多人都没注意到问题本身存在的多义性。究竟什么是“设计”?有些人认为是设计决策的过程,而有的人则认为是最终产出的设计作品。大多时候,理性和感性两种观点看似针锋相对,实际上是站在设计的不同层面进行讨论。
设计的两面性:理性决策与感性表达
 
 
 
01|设计决策
从设计决策的角度来看,感性设计指的是设计师在设计过程中主要依靠个人情绪或情感进行创作。许多人误认为,只要在设计时能与用户产生共情,理解其情绪波动,并将这些喜怒哀乐、喜好厌恶融入设计作品,就算是感性设计了。然而,共情并不等同于感性。共情是一种能力,理解他人处境与情感,并善于换位思考。而感性则是自己对外界事物产生的直接感受和情绪反应,强调的是个人视角。
在艺术领域,感性占据主导地位,但设计并非艺术。设计的主要目标是解决问题和满足特定需求,而艺术更多地关注自我表达和情绪传递。设计始终受到客户需求、商业目标、市场趋势和技术可行性等一系列的限制与约束。由于这些条件的存在,直觉与天赋这些感性力量只能得到极其有限的发挥。这也是设计与艺术的显著区别。
设计的两面性:理性决策与感性表达
 
 
站在感性“对立面”的理性,将设计视为一项工程或科学,力求流程化和系统化,讲究方法论,注重各方面的调研,一切动作因问题存在而起,以问题解决而终
。甚至在实际场景中持续观察作品表现,以期得出可复用的设计模型或定律,为后人更加高效地解决类似问题提供帮助。
所以,从解决问题的本质属性出发,理性应该才是设计的底色。数据驱动、方法论支撑、可用性测试、竞品分析、用户研究等都属于理性思维的具象化体现。
由于大部分设计师的出身多以艺术打底,所以一旦设计与艺术的界限在心中变得模糊,会习惯性地
将产品看作自己的"作品",而非用户的"解决方案"
。如此一来,当面对来自各个方向的边界与不确定性,本能的反应就不是思考了,而是抵触,尤其是“完美”的方案已在脑中形成,如果突如其来的新要求打乱了这一切,哪怕假以用户之名也要选择怼回去,并不断美化、合理化自己的设计理念。对设计师来说,这是一种自私、不负责任和缺乏职业素养的表现。
设计的两面性:理性决策与感性表达
 
 
接下来,想象一下你的手中有一把枪,准备射击某个目标。你的第一个动作是什么?大概率是瞄准。因为大家都知道,射击前通过瞄准镜或者准星,先对目标位置进行瞄准校正,射击时才能提高命中率,这也正是理性对于设计的重要性所在。
理性在设计中的作用类似于瞄准动作,它帮助我们在设计过程中做出科学的决策,确保设计方案的准确性和可执行性。未经理性思考的设计,就像是不瞄准就立即开枪,其结果往往难以预测。当然也可能会击中目标,这基本上取决于两个因素:
  1.  
    目标远近:
    近处的目标,即使不瞄准,也很容易击中;但对于远处的目标,命中率则必然大幅下降。我们可以把目标远近理解为设计需求的难易程度,对于简单需求,不用过多的理性分析,直接设计也能完成任务,但面对复杂的设计项目,如果不进行充分的理性分析上手就画,大概率就要偏离产品目标了。
  2.  
    个人经验:
    经过反复练习,可以练就不瞄准也能远射的本领,随着经验积累还能不断提升距离值;在经验不足的情况下,还不瞄准,就只能选择一些近距离的射击目标了。设计也是这样,对于某类产品的设计经验较多,不用太多理性的分析决策,也能达成设计目标;缺乏经验时,还凭借直觉草率地进行设计,再简单的项目也可能会搞砸。
设计的两面性:理性决策与感性表达
 
 
所以,没有理性支撑而完全依赖直觉经验的设计,一个致命性的问题就是
不稳定
!日常工作中,设计师的有效输出和稳定输出至关重要。
 
02|设计表达
假设经过瞄准后的射击都能顺利击中目标,那么接下来要关注的是什么呢?子弹的冲击力和杀伤力!这里的子弹就是我们最终输出的设计作品。在这一环节,理性设计指的是方案完全围绕产品功能来呈现,追求效率与极简认知,较少运用装饰性设计元素,即使使用,也大多兼具辅助内容理解的功能性目的。
而感性设计,我并不太愿意使用“感性”这一措辞,正如在上一段中的定义,感性强调的是个人出发的情绪表达。其实,“情感化设计”才更负荷大家口中常说的“感性设计”所想表达的含义,相比“理性”的设计作品,情感化设计更具有“一击必杀”的效果。
在满足基础功能需求的基础之上,通过色彩、排版、图像、动画等元素给予用户充分的情感体验,也可以利用叙事、对话、情景、微交互等策略引发共鸣。丰富多样的情感化设计策略,让用户与产品之间更容易建立情感连接。
设计的两面性:理性决策与感性表达
 
 
在设计决策的阶段,理性确保了我们更高的命中概率,而情感的注入让我们的设计表达具有深入人心的穿透力和影响力。典型设计案例如Apple、Tesla等产品设计无一不是理性决策和感性表达的充分结合。因此,回到开篇提出的问题,设计应该是感性的还是理性的?我的回答是:
作为设计师,要
坚持理性的设计决策
,同时
追求感性的设计表达
设计的两面性:理性决策与感性表达
 
 
 
03|两者关系
很多人认为,不同的设计领域对理性和感性的要求有所不同,在B端产品中,理性占据主导地位,而C端产品更强调感性。从设计最终所呈现的效果来看,这种观点在一定程度上是合理的。B端产品多用于生产场景,追求的是可用性,是克制和效率;C端产品面向普通大众的各种生活场景,因此关注体验的愉悦感受。两者往往在风格调性上差异化很大。
但是,对于设计决策来说,无论C端、B端还是G端,都属于设计项目,都要进行理性的需求分析和策略制定,即使某些产品类型最终选择了偏感性的或情感化的表达手法,也是
基于理性决策后的一种选择
,是实现目标的一种手段。
所以我想说的是,理性和感性两者既不是对立关系,也不是并列关系,而是先后关系或嵌套关系:
理性是设计的基础和第一步,感性则是在理性之上的选择和展开
 
最后的话
作为设计师,对于设计中的理性与感性之问,不应停留在非此即彼或既要也要的简单认知里,任何深入的思考都是有意义的。在这个存在分歧的问题上,希望我的观点可以为你提供一点点启发,也希望各位设计师既能够通过理性的分析制定出有效的设计策略,又能够通过感性的表达手法创造出动人的设计作品,不断提升自身的设计价值,与产品实现共赢


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

动效让这些设计更惊艳

杰睿

微动效在产品设计中的运用已经非常普及了,无论是在图标还是界面场景中,都运用得很普遍。通过动效的辅助不仅可以提升设计情感化,也能解决更为复杂的交互场景,让设计更惊艳。
 
最近在体验一些产品的过程中,黑马哥也发现了几个借助动效表达的设计方案,效果十分的惊艳,分享出来和大家一起学习一下。
动效让这些设计更惊艳
 
 
 
 
目录
一、3D 动效呈现会员等级
二、情感化 IP 提升搜索关注度
三、结合场景的情感化动效
四、3D 空间感的 Banner 设计
五、通过动效引导用户操作
六、微动效引导 VIP 续费
七、动态还原实时天气
八、动态 IP 引导按钮设计
九、微动效赋予品牌活力
 
 
 
一、3D 动效呈现会员等级
会员中心通常会通过 3D 图标来助力会员等级设计,除了静态的表达也会通过动效和新颖的交互形式呈现,以此提高会员中心的视觉表现力。
 
最近在体验腾讯视频 APP 时,会员专区在表现用户会员等级的设计中,没有使用传统的徽章形式,而是以 3D 数字结合动效的形式表达。3D 动效的设计使得会员等级区别于常规形式,更有吸引力。 
动效让这些设计更惊艳
 
 
 
 
二、情感化 IP 提升搜索关注度
IP 形象是成就品牌的关键因素之一,被广泛运用到产品感官体验的设计中,带来的情感化共勉也是显而易见的。
 
在使用悟空浏览器 APP 时,启动产品进入首页后搜索框上方出现悟空的 IP 形象,悟空呈现出左右环顾、上下打量,最后看向搜索框的系列动作等表现。不仅提高了搜索功能的关注度,也使得产品设计更具情感化。
动效让这些设计更惊艳
 
 
 
 
三、结合场景的情感化动效
根据不同的业务场景进行设计表达,可以更好的服务目标用户,而情感化的设计提升,可以拉近产品与用户之间的亲和力。
 
为了降低用户等餐过程中出现的负面情绪,饿了么 APP 下单之后在详情页中根据点餐的不同设计了情感化的动效表达。无论是快餐还是冷饮等,都针对性地设计了微动效的元素,以此来表现当前状态。
动效让这些设计更惊艳
 
 
动效让这些设计更惊艳
 
 
 
 
四、3D 空间感的 Banner 设计
通过突出设计、交互、布局结构等的创意性,可以使得 Banner 具备更强的差异化,以此来突出 Banner 的存在感。
 
腾讯视频 APP 首页的 Banner 布局也会经常呈现出一些很有创意的方案,比如之前体验到一个结合 3D 空间感营造的设计案例,就非常有吸引力。通过动态过度到立体空间,再恢复到默认形式,这个动态的过程演变就能让用户过目不忘。
动效让这些设计更惊艳
 
 
 
 
五、通过动效引导用户操作
针对一些使用频次不高或者过于隐藏的功能,为了提高用户的操作概率,会通过一些特殊的设计表达来提升用户的关注度,引导用户进行相关操作。
 
比如麦当劳 APP 首页中,为了吸引用户下拉进入二层楼,通过动效的形式设计了一个摇摆的铃铛,以此来吸引用户的注意力。用户看到像是随风飘动的铃铛,就会忍不住去拉动,这就达到了引导用户操作的目的,提高了二层楼内容的曝光度。
动效让这些设计更惊艳
 
 
 
 
六、微动效引导 VIP 续费
针对一些无法通过占比面积进行突出的元素,运用微动效的形式设计是常见的设计手法。
 
网易云音乐 APP “我的”板块中,为了突出 VIP 续费按钮,黑胶唱片以动效的形式在按钮中来回滚动,以此强化续费按钮的关注度。
动效让这些设计更惊艳
 
 
 
 
七、动态还原实时天气
天气类产品从简单的静态预告升级为动态实时还原,可以让用户更加直观的判断天气变化,也能提高界面设计的感官体验。
 
比如 iPhone 自带的天气 APP,以动态还原实时天气作为界面背景,不仅便于用户识别天气,也使得产品设计更具情感化体验。
动效让这些设计更惊艳
 
 
 
 
八、动态 IP 引导按钮设计
按钮设计样式可以发挥的空间很大,除了在造型、配色、空间感等方面突出设计以外,也能通过按钮微动效或者动态引导等形式强化。
 
比如智行火车票 APP “抢票”板块中,为了突出“添加抢票”按钮的存在感,以动效 IP 引导进行设计。不仅使得按钮更突出,设计感也显得俏皮可爱,凸显亲和力。
动效让这些设计更惊艳
 
 
 
 
九、微动效赋予品牌活力
立足于品牌做设计是突出产品差异化的关键,这也是产品设计未来的演变趋势之一,如何提高品牌的曝光度和记忆度,成为设计师不断探索的方向。
 
最近在使用夸克 APP 时,微动效赋予品牌 LOGO 的活力感让人印象深刻。在众多特殊节庆等时间段,夸克也会以动效的形式赋予品牌更多变化,不仅使得产品更具年轻化属性,也能更好的传递品牌基因。
动效让这些设计更惊艳
 
 
动效让这些设计更惊艳
 
 
 
 
小结
动效使得产品具备更多的变化,也能辅助解决更多复杂功能的交互场景,探索动效的场景运用可以提升设计灵感,希望本期的分享可以带给大家更多设计灵感。本文描述属于个人体验总结,不足之处我们努力改进。
 
本文由 @黑马青年 原创发布。未经许可,禁止转载。


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

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

日历

链接

个人资料

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

存档