首页

10分钟带你快速了解Bento设计风格

博博

Part.1 起源与流行
 
Bento风格设计是一种独特且富有创意的设计方式,其灵感主要来源于日式便当盒的布局形式。这种设计方式强调将内容划分为不同的小块,并以网格的形式进行排列组合,以此达到视觉上的和谐与统一。
10分钟带你快速了解Bento设计风格
 
近几年,Apple引领了设计大趋势,而 Bento 正是其中之一。他们在很多场景开始使用这种设计风格,包括网页设计、APP设计、产品介绍等,随处可见。
 
Bento设计风格的简约、清新和富有变化的特点也符合了现代审美趋势,特别是在数字产品和互联网应用方面。随着人们对于界面美观性和易用性的要求不断提高,Bento设计风格也逐渐受到了更多设计师和用户的青睐。
 
与许多其他 UI 设计趋势不同,Bento 实际上不仅仅是一种漂亮的布局风格。它现在已经发展到包括产品演示,与其他一些独特的布局混合,甚至采用新的视觉设计概念进行风格化。
 
10分钟带你快速了解Bento设计风格
 
Part.2 风格解析
10分钟带你快速了解Bento设计风格
 
内容分块与结构化布局
Bento风格设计注重将整体内容分割成一个个小的区块,并通过网格系统来布局这些区块。这种分块化的设计使得内容更加结构化,易于用户理解和浏览。同时,网格系统也确保了设计的整齐和一致性,提升了视觉美感。
 
视觉层次与优先级
擅长利用不同区块的大小、颜色和位置来创建视觉层次,从而突出内容的优先级。重要的内容通常会被放置在更显眼的位置,或者通过更鲜明的颜色或更大的字体来吸引用户的注意力。
 
简洁性与清晰度
Bento风格设计追求简洁明了,避免过多的装饰和复杂的元素。这种设计方式不仅使得界面更加清爽,也提高了信息的可读性。同时,清晰的布局和明确的导航也能帮助用户快速找到所需内容。
 
灵活性与适应性
Bento风格设计具有很高的灵活性和适应性,可以适应不同尺寸和分辨率的屏幕。这使得设计能够在多种设备上保持一致的用户体验,无论是手机、平板还是桌面电脑。
10分钟带你快速了解Bento设计风格
 
Part.3 布局原理
10分钟带你快速了解Bento设计风格
 
「形式服从功能」是建筑大师路易斯·沙利文提出的著名设计原则,这一原则强调设计的首要任务是满足功能需求,而形式则应该服务于这一功能目标。
 
形式要体现功能,更要服务好功能。它也是UI设计进入扁平化时代后,界面设计所一贯遵循的基本原则之一。但时下随着各种3D、拟物风格的再次流行,以及大量的动画、插图等运用,这一原则更难让设计师们把握。
 
而现在Bento设计风格又恰恰形式感极强,我们该如何把握呢?首先我们可以先了解Bento布局原理逻辑再说,相信能找到答案。
 
原理分析
假如我们在一个 1440X900 像素的框架内添加 bento 式布局,那首先要有一个下图这样的基础网格:
10分钟带你快速了解Bento设计风格
 
适合Bento的网格如何得出呢?我们可以基于 4 点网格,把列数和行数皆设为 8(也可以不一致),间隔均设置为 20 像素,列宽和行宽不必设定,在框架内弹性自适应就可以了。
 
那我们可以分别得出纵向网格及横向网格:
10分钟带你快速了解Bento设计风格
 
 
10分钟带你快速了解Bento设计风格
 
再把横、纵向两套网格交叠就可以得到一开始的基础网格,接下来,你就可以根据需求随意设定 bento 式布局了。
 
10分钟带你快速了解Bento设计风格
 
到这里是不是感觉很容易了?是的,原始网格的参数可以根据你的设计需求来定,布局的自由度也很大,可以设计出各种不同组合的Bento。
10分钟带你快速了解Bento设计风格
 
Bento布局与网格逻辑紧密相连,形成了一种独特且高效的视觉呈现方式。网格在这里不仅是布局的基础,更是实现内容有序排列和组织的关键工具,网格为Bento布局提供了一个清晰、规范的框架。设计师基于网格的行列结构,将整体内容划分为一个个独立的区块。这些区块在网格的指导下,按照既定的规则进行排列,确保了布局的整齐划一和视觉上的和谐统一。
 
网格逻辑还使得Bento布局具有高度的可扩展性和适应性。设计师可以根据实际需要调整网格的尺寸、间距和排列方式,以适应不同屏幕尺寸和设备类型。这种灵活性使得Bento布局能够在各种场景下都呈现出良好的视觉效果和用户体验。
 
Part.4 案例运用
 
Bento在banner中的运用
Bento布局帮助设计师在banner中合理安排各个元素的位置和大小,确保整体布局的和谐与统一。通过精心设置网格,设计师可以将文字、图片、按钮等元素放置在恰当的位置,使banner看起来整洁有序,易于吸引用户的注意力。
巧妙的把不同的素材的以Bento形式组合在一起
巧妙的把不同的素材的以Bento形式组合在一起
 
Bento在产品介绍中的运用
Bento强调形式服从功能的设计原则,这在产品介绍中尤为重要。设计师会深入挖掘产品的功能和特点,通过合理的布局和视觉元素,将产品的实用性、易用性和创新性等方面凸显出来。这样的设计不仅能让消费者更好地了解产品,还能增强他们对产品的信任感和购买欲望。
10分钟带你快速了解Bento设计风格
 
Bento在个人博客中的运用
Bento设计注重色彩搭配和视觉元素的运用。在个人博客中,设计师可以根据个人喜好和博客主题,选择适合的色彩和字体,以及添加适当的图片和图标,从而打造出独特且吸引人的视觉效果。这样的设计不仅能够吸引读者的眼球,还能增强博客的品牌形象和个人特色。
10分钟带你快速了解Bento设计风格
 
Bento在复杂数据中的运用
Bento设计强调信息的结构化。对于复杂信息,如大量的数据、文本或多种类型的媒体内容,Bento通过网格化的布局和模块化的设计,将信息划分为不同的区块,并依据逻辑关系和重要性进行排列。这种结构化的设计方式使得复杂信息更加有序,用户能够轻松地找到所需的信息,提高了信息获取的效率。
10分钟带你快速了解Bento设计风格
 
Bento在品牌设计中的运用
Bento在平面设计中的运用主要体现在其独特的布局理念、视觉层次感和设计细节上。这些元素共同为平面设计作品赋予了清晰、专业且富有吸引力的外观。
10分钟带你快速了解Bento设计风格
 
Bento在移动端设计中的运用
Bento在移动端设计中的运用非常广泛,并且取得了显著的效果。其基于严格网格的布局方式特别适合在移动设备(如手机或平板电脑)的小屏幕上展示内容,这种设计不仅易于浏览,而且使得内容在有限的空间内得以高效展示。
10分钟带你快速了解Bento设计风格
 
Bento在电商设计中的运用
Bento强调信息的清晰呈现。在电商设计中,这意味着商品信息、价格、促销活动等关键内容需要被突出展示,以便用户快速了解和比较。Bento通过网格化的布局和简洁的视觉效果,将复杂的信息进行有序的组织和分类,使用户能够轻松找到所需信息,提高了浏览和购物的效率。
10分钟带你快速了解Bento设计风格
 
Part.4 优势总结
ok,我们前面详细分析了Bento设计的原理以及在各个场景中应用,那我们应该如何运用到我们日常工作中去呢?Bento设计切记生搬硬套,一定要根据需求而来,下面就讲讲Bento的优劣势,希望能够帮助到我们更好的理解Bento设计风格。
 
优势
 
清晰高效,有效传达信息
基于严格网格的布局使得内容呈现有序且易于理解,Bento设计通过明确的分隔,为界面提供了清晰的结构,使用户可以快速理解和导航。不同的功能和内容被组织在不同的隔层中,有助于提高信息的可读性和可理解性。
 
形式感强,视觉冲击力足
通过调整内容块的大小、样式和颜色,可以轻松创建出视觉层次感,突出重要信息,提升页面的可读性和吸引力。
 
设计规范,逻辑有规律可循
网格为Bento布局提供了一个清晰、规范的框架。设计师基于网格的行列结构,将整体内容划分为一个个独立的区块。这些区块在网格的指导下,按照既定的规则进行排列,确保了布局的整齐划一和视觉上的和谐统一。
 
包容万象,随意拓展、适配
Bento几乎支持所有主流的媒介,如链接、图片、视频、文字等,甚至还包括地图,这使得用户能够轻松地在平台上展示和分享各种类型的内容。
 
劣势
一定程度上限制了灵活性和创意性
由于Bento设计强调基于网格的布局,这在一定程度上限制了设计的灵活性和创意性。设计师可能需要在遵循网格规则的同时,努力寻找创新和突破。
 
图片展示比例限制
由于展示的尺寸样式有限,有时可能无法很好地展示原图的比例和效果,这可能会影响用户对内容的理解和接受度。
 


作者:墨一影
来源:站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

从混沌到有序:设计规范全方位指南

前端达人

从零开始,打造设计规范:设计原则、流程与工具的全方位指南
整个文章我们会讲
 
  •  
    为什么建立设计规范?
  •  
    什么时候建立设计规范
  •  
    以及具体的设计规范怎么做
 
一、设计规范的目标?
首先需要明确设计规范的目标,也就是为什么建立设计规范,这里包括提高用户体验、降低开发成本、提高团队协作斜率等。这些目标将为后续的规范制定提供方向。
还有就是大家都知道,在做项目时如果没有明确的目标和价值,是很难推动的。
从混沌到有序:设计规范全方位指南
 
 
二、什么时候建立设计规范?
在项目全面进入ui设计之前,先设计几个核心页面的demo
,确立整体的基础规范和设计风格,把一些基础的设计规范定义出来,例如
命名、尺寸、间距、颜色、字体、核心控件
等、这样在开展设计的过程中保持一致性和统一性,当然,在项目设计过程中,UI设计规范也需要根据实际情况去调整补充。
从混沌到有序:设计规范全方位指南
 
 
三、设计规范具体要怎么做?
这里先讲一些基础通用的规范
3.1、间距
在间距部分我们需要把一些
页面间距、模块间距、元素间距
,这些要定义出来
像我平时在工作中
通常以8px作为基数
,以此衍生出
8、16、24、32、48、64
,这6个间距数值,完全能够满足绝大多数的使用场景。当然,针对信息较少的页面也会使用到
120、160、200...其他间距数值,例如缺省页、登录页面等。出去这些特殊页面,基本上通用的就上面那6个就足够了
从混沌到有序:设计规范全方位指南
 
 
 
3.2、颜色规范
我们要先把主色调和辅助色,通常主色都是根据
品牌形象和目标用户
的需求选择。
拿在颜色的定义中需要注意以下几点
1、使用色彩心理学:
根据不同的颜色和情感联想,选择适合的颜色来传达品牌形象和用户体验。例如,蓝色通常被认为具有专业、信任和稳定的感觉,而红色则具有激情、活力和创新的联想。
 
2、建立层次结构:
使用颜色的饱和度和明度来建立层次结构。将重要的设计元素设置为高饱和度和明亮的颜色,使其在页面上突出显示,而将次要的设计元素设置为低饱和度和较暗的颜色。
3、避免使用过多的颜色:
过多的颜色可能会使页面显得混乱和难以聚焦。在设计过程中,尽量使用有限的颜色组合,并且要避免使用过多的对比色或互补色。
从混沌到有序:设计规范全方位指南
 
 
3.3、文字规范
我们需要把
字体、字号、颜色、行距
、这些给定义清楚,有规律的大小字号更有利于阅读,(另外要注意一些特殊字体的版权问题)
常用的字体大小
20px、24px、28px、32px、36px,44px,48px,且都是间隔4px
,设计师需要根据具体场景去决定字体大小,以确保用户能够轻松阅读和理解界面信息层级比重。
 
3.4、UI图标规范
图标是UI设计的重要组成部分,它可以使图标看起来更加
美观、易用、统一和有吸引力
。也传达着整个UI视觉风格调性,和系统功能的作用。
在图标设计上一定要简单清晰,定义规范时要对
图标的大小、圆角、线条粗细、等有明确的指示
,在绘制的时候我们可以制定自己的
网格规范
,以便参考。
从混沌到有序:设计规范全方位指南
 
 
3.5、按钮
按钮尺寸:
一般来说,按钮的尺寸应该能够适应不同的屏幕尺寸和分辨率,并且应该能够突出显示。
按钮形状:
应该具有清晰的轮廓和圆润的边角,圆角大小是多少
按钮颜色:
按钮的颜色应该与整体UI设计风格相协调,并且应该能够突出主题和重点信息。一般主按钮大多使用主题色。
按钮文本:
按钮的文本应该简短明了,并且应该能够清晰地表达按钮的功能。还需要定义清楚按钮中限制的字数。
按钮内边距:
按钮的内边距应该能够扩大按钮的可点击范围,并且应该能够提高用户点击按钮的准确性。需要考虑极限情况下,最小应该保持多少内边距。
按钮状态:
按钮的状态应该能够表达按钮的状态和功能。一般来说,按钮的状态包括正常状态、点击状态等。
从混沌到有序:设计规范全方位指南
 
 
 


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

简洁之美,细节成就卓越:打造极致移动端弹窗体验

前端达人

细节成就卓越,从精致弹窗设计开始。
在移动端应用的世界里,弹窗不仅是信息传递的桥梁,也是用户体验的微妙触点。一个精心设计的弹窗能够在正确的时刻捕捉用户的注意力,以一种既美观又功能性强的方式提供必要信息或引导用户操作。从视觉清晰度到操作简便性,再到出现的时机和频率,每一个细节都关乎着用户对应用的整体感受和满意度。让我们一起探索如何通过细致入微的设计思考,打造既符合业务目标又让用户感到愉快的移动端弹窗,提升体验,创造细节之美。
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验

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

弹框关闭的七种交互方式

前端达人

前言:日常设计工作中,我们设计师可能会面临以下设计问题:
  1.  
    移动端弹框什么时候需要关闭按钮?什么时候不需要关闭按钮?
  2.  
    界面中间的确认取消警示弹框,是否需要在右上角添加“关闭”icon按钮?
  3.  
    手势关闭弹框需要注意什么?
  4.  
    iOS和安卓两端关闭弹框有什么区别?
  5.  
    点击弹框中的任务按钮,弹框是关闭还是不收起?
弹框关闭的七种交互方式
 
 
弹框关闭的七种交互方式
 
 
弹框关闭的七种交互方式
 
 
 
弹框关闭的七种交互方式
 
 
统一使用图标按钮,以icon“x”的形式,显示在底部弹框的右上角,用户通过点击“关闭icon”图标按钮来关闭弹框。
使用场景
当弹框中包含内容和功能操作时,应提供一个关闭icon“x”的图标按钮,以让用户能够主动关闭弹框并进行相应的操作。
何时不需要关闭按钮icon“x”?
1.操作型弹框,需要用户确认或选择操作项,不需要显示关闭按钮,需统一使用文字主按钮,以文本“取消”的按钮形式,显示在弹框面板底部,用户通过点击“取消”按钮来关闭弹框。例如当用户进行删除或提交操作时,弹出的确认框通常只需要“确定”和“取消”按钮,而不需要显示关闭按钮。
2.全局提示toast(自动关闭)。
3.功能入口类型弹框,为了保持界面简洁,不需要“关闭icon”,如智能文档编辑模式的底部悬浮工具栏。
4.警示或通知类型的弹框,不要关闭icon。
弹框关闭的七种交互方式
 
 
关闭按钮位置
关闭按钮需统一显示在弹框右上角。遵循iOS和Android系统规范、用户使用习惯、阅读习惯「Z字型」、避免误操作「关闭之前需要先确认信息和操作项」。
关闭按钮icon“x”何时需要展示在左上角?
页面级:当页面层级超过3级时,为了便于用户能快速回到一级页面,无需原路返回,可以将关闭按钮“x” 置于左上角,位于「返回」按钮右侧。
多语言和国际化用户习惯:特定语言和文化习惯,从右向左阅读顺序,遵循用户阅读习惯。例如台湾、日本等。
弹框关闭的七种交互方式
 
 
用户点击弹框外部区域,即遮罩层,可关闭弹框。
弹框关闭的七种交互方式
 
 
遮罩层不可点击场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,遮罩层不可点击。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
 
遮罩层展示逻辑
1、非模态弹框,不加遮罩层;模态弹框,加遮罩层;
2、遮罩层统一使用半透明黑色蒙层,色值和不透明度的数值由UI定义;
3、遮罩层可视高度,遵循移动端最小点击区域48dp*48dp高度的交互热区,保证用户可点击
 
遮罩层的覆盖范围
  1.  
    遮罩层需覆盖标题栏,需遵循iOS、Android、微信小程序平台规范。其中微信小程序端,遮罩层覆盖标题栏,但不可覆盖标题栏右侧胶囊按钮。
  2.  
    若是内嵌H5页面,因客观条件限制,则弹框之下的遮罩层无需覆盖标题栏。
  3.  
    以上提到模态弹框和非模态弹框两种弹框模式,要想更清晰理解两种模式弹框的关闭交互方式,需要理解两者之间的交互区别。‍‍
 
模态弹框和非模态弹框的交互区别
模态弹框‍‍‍‍‍‍‍‍‍‍‍‍:
用户只能操作弹框内的交互元素,弹框外部区域不可操作,需要加半透明遮罩层。例如底部操作型弹框。
非模态弹框‍‍‍‍‍‍‍‍‍‍‍
用户可以并行操作弹框内和弹框外部区域的交互元素,不要加半透明遮罩层。例如苹果地图App。
 
弹框关闭的七种交互方式
 
 
用户在底部弹框区域向下滑动手指,弹框会随之向下移动,当到达当前弹框高度的1/2位置后,会触发关闭交互,用户继续向下滑动松手则关闭弹框。
弹框关闭的七种交互方式
 
 
交互逻辑
1、支持下拉关闭的弹框,头部区域需统一展示水平条icon,样式由UI定义
2、交互热区:底部弹框全部区域
3、手势方向:手指只能向下移动
4、下拉触发关闭弹框阈值:当前底部弹框高度的1/2位置
 
使用场景
长内容类型弹框,需使用下拉关闭交互手势,关闭弹框
 
不可用下拉手势关闭弹框的场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,不可下拉关闭弹框。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
 
弹框关闭的七种交互方式
 
 
用户在屏幕上向下滑动(包括左下或右下滑动方向)至任意位置后松手释放,可关闭弹框;当用户手指下滑未松手,继续向上滑动到任意位置后松手释放,则可取消关闭弹框。
弹框关闭的七种交互方式
 
 
使用场景
仅图片大图模式场景使用。用户向下滑动屏幕,图片随之向下移动,松手后触发关闭图片查看器,关闭图片弹框
例如:手机相册
弹框关闭的七种交互方式
 
 
用户从弹框区域左边缘向右轻扫,即快速向右滑动后松手,则触发关闭弹框操作,关闭弹框。
弹框关闭的七种交互方式
 
 
不可从界面左边缘向右轻扫场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,不支持向右轻扫关闭弹框。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
除以上场景外,均需要支持弹框左边缘向右轻扫手势关闭弹框,包括Android、iOS、小程序。
 
特殊场景
1、当同时存在页面向右滑和弹框向右轻扫手势时,在弹框区域向右轻扫,先关闭弹框,再次沿着屏幕左边缘向右滑动,则返回上级页面。
2、键盘展开场景,iOS端不支持左边缘向右轻扫收起键盘,遵循iOS平台规范。
弹框关闭的七种交互方式
 
 
对于安卓设备,用户可以使用设备上的物理返回按钮来关闭弹框。当用户按下返回按钮时,可关闭弹框。
交互用法
1、点击物理按键,需原路逐级返回,不允许跳级返回
2、模态弹框,遮罩层覆盖物理返回按键,不支持左边缘向右轻扫关闭弹框
3、安卓手机将系统导航方式切换到全面屏手势,则不存在物理返回按键
弹框关闭的七种交互方式
 
 
  1.  
    点击弹框中的功能按钮,通常需要立即执行并关闭弹框。一定是先执行再关闭弹框,而不是先关闭弹框再执行。用户执行某功能按钮后,遵循即时响应原则,系统必须要反馈用户在执行用户操作。
  2.  
    为什么点击执行功能按钮需要关闭弹框?因为弹框是否关闭,和用户目标有关。用户主动触发某操作唤起弹框,首先是有用户目标的,其次,用户通过点击弹框内某功能按钮,执行任务来实现用户目标。
  3.  
    此外,也存在点击执行功能按钮立即执行不关闭弹框的场景,比如开关选择器,但本质还是围绕当前用户目标来进行决策是否关闭弹框。
 
结语:任何设计都有它遵循的规律
弹框关闭的七种交互方式
 
 
 
 
 
 
 
 
 


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

思考|B端产品如何建立用户画像

鹤鹤

在做C端产品设计时,我们常常将碎片化的用户调研信息,通过归类整理将用户进行分类,赋予姓名性别等用户信息以及用户性格,建立起一个个立体的用户画像,帮助我们快速了解用户,建立对用户的有效认知。

 

谈谈设计创意获取的思路

前端达人

谈谈设计创意获取的思路
 
 
读了一本书,杰夫戴维森的《The 60 sencond Innovation 》,讲的是
创意的获取方式
。因为国外的设计环境与国内还是有很大区别的(所以这本书的微信读书书评并不是很高),我摘选了几个我认为
适合国内现状的创意获取方法,与大家共享
谈谈设计创意获取的思路
 
 
一、关于设计趋势
设计创意是符合设计趋势的,我们需要关注设计趋势。
我觉得趋势这个词,书里面有个观点还是可以的:
关注长期趋势
为什么这么说呢,因为趋势不是朝三暮四的,往往会保持很长的时间。所以我们在做设计创意的时候可以适当关注长期趋势。
1.1关注社会趋势的重要性
最直接影响的就是职业生涯的发展
。譬如你是一名UI设计师或者即将毕业的学生,在当前的形势下UI设计师已经趋于饱和,你想完成一次职业方向的确定或转变,你会往哪里走?
那么你需要关注设计趋势。
如果你选择的是一个接近饱和的方向,那么你的薪资几年内肯定也得不到提高。有的设计师经常会说我做UI设计5-7年了,但是薪资依然还是1万,我
只能说你现在没有什么竞争力。
所以趁着年轻,你可以考虑换一条细分的赛道。
譬如逐渐趋于饱和的车载HMI设计,即将爆发的类似于Vision Pro的增强现实设计。。。
来自于苹果官网
来自于苹果官网
 
1.2如何了解设计趋势
首先,最直观的就是设计大事件。
譬如苹果等著名品牌引导的设计承载方式的变革。从罗永浩推出无限屏概念开始,其实类似的空间设计就已经处于慢热状态。直到苹果正式发布了Vision Pro,这种大事件直接将增强空间设计推向了高潮。
我们可以通过苹果的官方网站,去了解Vision Pro的使用方法,以此来感受Vision pro可以改变什么?文本编辑、影视、阅读以及游戏等等用户体验与手机操作的不同点,从而延伸出未来可以商业化的场景方向,可以做预知性的推断。
有兴趣的设计师还可以通过苹果发布的
Vision pro模拟器
,来尝试性地输出一些创新的想法和创意,以此来建立自己在增强空间设计上的设计经验和竞争力。
其次,可以通过设计网站、社区和平台。
譬如优设、站酷、人人都是产品经理等一些设计资讯平台。很多设计师会将国外的一些好的设计趋势的文章翻译,我们可以通过这些文章来获取设计趋势。
再者,可以通过行业内的研究报告。
譬如艾瑞咨询发布的《2023年AIGC场景应用展望研究报告》,里面就阐述了下一年甚至是未来AIGC的发展方向。
二、经验积累促进设计创意输出
2.1经验积累到一定程度的好处
一般设计师在自身发展的同时,也都会留意身边设计师发展的如何,嫉妒和对比是很正常的。有的设计师会觉得为什么他年纪不大却能当领导,为什么他的薪资比我多那么多,为什么每次任务下来后他总是做的又快又好。。。
因为这是工作/设计经验给他带来了各种红利。
为什么经验丰富的设计师创意那么多呢?那就是
尤尼卡效应(灵感的悄然而至)
。有经验的设计师,职业生涯过程中看过无数的案例,想过无数的方案,做过无数的作品。所以,他们可以在看到问题的时候,立马给你输出设计方案。如果你能达到这种地步,你的竞争力也将无可匹敌。
2.2经验积累下的灵感输出
做到两点:
【建立方向】和【埋头苦干】
毕业5年内的设计师,可以不用过多的去关注别人与自己的差别,你要做的就是【建立方向】和【埋头苦干】,幸运只光顾有准备的头脑。
那些有经验的设计师也都是摸爬滚打一点一滴练出来的。过年的时候跟大学同学吃饭,设计耕耘10余载,他已经是某设计院的总监了。想想与他一起住过的小黑屋,想想我们打地铺黑灯瞎火的做项目,为了钱么?是因为热爱,想做出更好的作品。再看看他一路走来的工作历程,他基本上在一个垂直方向上深耕细作,从场馆的设计方案到制定预算,从项目投标到施工流程,整个一套流程都驾轻就熟了。
2.3不断尝试后的灵感输出
设计师们都知道,灵感不会轻易上门。
创意是被逼出来的
!这一点设计师们都很有感触。
这里的经验积累不完全是工作年限的意思,也有深度挖掘之意
尤尼卡效应要求我们,即使在设计工作中没有灵感的时候,继续尝试着梳理思路不断钻研,肯定会有灵感乍现的那一刻。就像书中说的那样:
因为创新是一个渐进的过程,一次加上一点思考,最终会柳暗花明。
MIdjourny输出:设计师绞尽脑汁
MIdjourny输出:设计师绞尽脑汁
 
三、创意汇报
3.1高中低方案战略
要想实现创意被大家更好地接受,通常可以准备三种可能的方案:1.最佳方案2.中间方案3.最差方案
领导的决策,也需要有一定的参考。我们给出的方案,尽量涵盖高中低三种维度,以便进行对比。
3.2选择时机进行推荐
创意方案出来后,你可以安排一次会议/宣讲会,阐述一下自己的设计方案。聪明的做法就是在会议召开之前,先私下把方案简单过一下,以获得一定的支持。
3.3学会倾听
你在汇报项目的过程中,别人会有一些想法和建议,麻烦你认真倾听。不要着急去打断,以免造成厌恶性沟通。
3.4不要放弃
创意被否定很正常。
真正能一次通过的创意实属罕见,就好比不能因为拿不到第一就不上场比赛一样,你也不应该因为创意被否一次就永远自暴自弃。
四、创意输出需要心流状态
心流状态是指自己已经完全沉浸在设计创意中了。
心流状态可以很好地帮助设计师提高工作效率,促进设计创意的输出。
4.1如何获得心流状态
环境很重要。
对于设计师而言,通过调整周围的环境,比如说引进一些比较明亮的色彩、图片、标语等,可以大大激发一个人的学习能力。
开放、整洁、平整的表面有助于整理人的思维,所以一般来说,你的桌子越干净,就越容易提高工作效率,应对工作中的各种挑战。
五、创意伙伴日常沟通
众人拾柴火焰高。
5.1与什么样的人沟通
与相同价值的人沟通。
《探寻第一名》(Looking Out for Number One)一书中,作者罗伯特·林格(Robert Ringer)指出,持久的关系——一方为另一方提供相同的价值,双方的利益交织在一起,让这种关系持续下去——非常有价值。
因此
你找的人必定是彼此都珍视的人,可以成为创意伙伴
。你可以每个月找创意伙伴聊聊天喝喝茶充充电,获取一些新的想法,让自己的大脑保持常青常新。马云说过,企业在不缺钱的时候融资,而不是缺钱了再去融资。
设计圈有认识的大佬都很重视沟通,会经常跟身边的朋友聊天,其实这很大程度上
可以让一个人拥有多个人的经验和能力。
所以设计师应该尝试着开放一些,而不是闭门造车。
MIdjourny输出:设计师聊天
MIdjourny输出:设计师聊天
 
六、公司层面:讨论/沟通氛围的重要性
公司层面,应该鼓励设计师在会议上多阐述自己的意见。
很多公司是不是有这样一种现象:开会的时候鸦雀无声,只听到汇报的人胆怯地练着演讲稿或者说着自己的方案,让其他人给意见的时候基本无人举手,只能等领导给一些修改意见,
然后这个设计方案就变成了领导认可的设计方案了。
其实这种工作氛围真的非常糟糕,限制了设计师的创意的发挥,同时也让产品成为了一个片面性的产品。
6.1建立讨论沟通氛围的好处
所以团队的讨论氛围一定要建立起来。
书里这样描述:
1.当一个人感觉自己的想法受人欢迎的时候,他会想出更多有创意的点子来解决眼前的问题——有时可能会在会上发表看法,有时则是在私下里提出建议;
2.如果团队的每个成员都感觉更有满足感,他们的参与热情就会高涨。想想看,如果人人都愿意献计献策,事情将会变得多么容易啊!
6.2好好先生对设计创意的阻碍
讨论沟通,也促进了不同声音的展现。团队需要不同的声音,团队需要谦和而坚定的人来告诉我们事情的本来面目,要听到赤裸裸的现实。
 
感谢大家阅读。
【阿琦设计日记】,用最接地气的语言,讲述设计师成长道路上的故事。

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发



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

C端产品体验设计走查模型

博博

设计输出质量对于设计团队来说是极为重要的事情,在设计过程中,存在着许多潜在的风险,这些风险可能会导致用户直接流失,甚至是品牌形象受损,且对于C端产品来说更是如此。因此,作为一名用户体验设计师,降低体验设计风险是我们工作中不可或缺的一部分。
当然体验问题可能来自技术、设计、运营等多个环节,本文主要从体验设计师的视角去思考如何降低体验风险。
 
C端产品体验设计走查模型
 
 
一、设计团队如何降低体验风险
1、可以建立一套体验设计走查模型,通过建立走查模型,我们可以对设计过程进行全面检查,及时发现并解决设计中的问题。
2、建立设计内审机制,通过多名设计师和关键项目组角色共同内审,减少出错风险。
3、需要将体验问题的发现和解决纳入设计师工作当中,并且有明确的责任划分,确保产品遗留问题得到有效解决。
C端产品体验设计走查模型
 
 
二、建立适合自己的体验走查模型
走查模型的作用是帮助设计师产出全面的设计方案,尽可能避免有遗漏场景,造成体验事故和不必要的返工。市面上有很多不同的体验走查模型,具体需要根据自身产品情况确定。
所以好的体验走查模型需要符合3个要求。
1、实用性:需要通过模型将主观感受描述成客观的场景、标准,确保大家理解一致,不要造成使用偏差。
2、符合平台自身属性:结合自身产品类型和过往最常见的问题类型,有选择性的制定,不用追求大而全。
3、能够真正纳入工作当中:走查模型建立后,一定要在真实的项目中发挥作用,比如作为设计内审的具体通过标准之一。
C端产品体验设计走查模型
 
那么如何制定出符合平台要求的走查模型?其中比较有效的方法是梳理过往遇到的体验问题,并按照场景归类,梳理出典型的问题,并纳入到走查模型中。
比如在一些偏活动属性的产品设计中,我们发现设计师经常遗漏平台品牌性的信息,于是我们把品牌识别性也纳入到了走查模型当中。
C端产品体验设计走查模型
 
 
三、沉淀体验走查模型
体验走查表确定后,可以打印出来并且以表格的形式进行共享。
C端产品体验设计走查模型
 
四、如何避免流于形式,让走查模型真正发挥作用
一、以走查模型为交付标准。
产品从需求到落地,中间会经历多个环节和角色,体验走查模型一般在2个环节着重使用。
1、需求梳理阶段:帮助设计师围绕具体需求明确设计范围。
2、设计交付前:对照自查表,查漏补缺。
二、作为设计内审通过标准之一
在设计内审阶段,可以将体验走查模型当作通过的标准之一,走查模型可以和设计规范配合使用,确保在设计输出的时候是尽可能完整的。
C端产品体验设计走查模型
 
 
C端产品体验设计走查模型
 
 


作者:微店UED
来源:站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

如何巧妙的呈现龙年氛围感

前端达人

龙年春节已结束,回顾一下各大产品是如何营造龙年氛围感的,今天黑马哥精选了部分场景,我们一起来看看吧!
如何巧妙的呈现龙年氛围感
 
 
 
 
一、封面边框营造氛围感
 
通过对主界面配图营造氛围感相对直接,可以针对封面设计进行创意,也可以在边框上面进行装饰。
 
爱奇艺首页推荐的影片封面设计中,在不改变结构布局的基础上,对封面边框进行氛围装饰,简洁直观地呈现出龙年氛围感。通过对封面设计进行创意,可以避免改变产品结构,方便随时更换,灵活性较高。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
二、通过图标配色营造氛围感
 
营造氛围感最直接的表现就是颜色层面,可以通过配色突出主题氛围。
 
马蜂窝 App 首页金刚区图标,春节期间运用红黄渐变进行图标配色,以此强化春节氛围感。不改变图标造型,也能便于用户记忆和适应变化,表现形式简洁有效。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
三、主题活动替换品牌区域
 
利用品牌 Logo 进行主题演变可以是品牌造型层面设计,也可以在品牌区域位置上面替换内容,针对预留的位置发挥性更强。
 
夸克 App 在主页默认展示品牌 Logo,春节期间以主题活动进行替换,不仅突出氛围也能增加活动曝光度。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
四、烟花动效突出顶部视觉区域
 
通过春节元素进行动效表现,可以让氛围感更突出,比如绽放的烟花、鞭炮、祥云、生肖元素等。
 
携程旅行首页顶部视觉区域,春节期间以绽放的烟花动效进行表现,氛围感十足。不仅突出年味,也能让区域视觉感更突出。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
五、主题文案嵌入图标设计
 
金刚区就如同百变金刚一般,更换内容非常便利,灵活性很高。针对图标设计风格、主题风格、主题文案等形式进行设计融入,均可突出各类主题风格。
 
安居客 App 首页金刚区图标设计,在春节期间结合主题文案进行嵌入,氛围感表现得直观清晰。再配合春节氛围的 Banner 展示,新春氛围渲染得非常到位。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
六、按钮设计中的画龙点睛
 
针对主按钮设计进行发挥较为常见,可以在按钮造型、配色、装饰等层面发挥,表现形式丰富多样。
 
携程旅行订票查询按钮设计中,可谓是画龙点睛。将中国龙和春节元素融入到按钮装饰中,不仅突出氛围感,眨眼睛的动效也是点睛之笔。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
七、主题皮肤氛围感拉满
 
在产品的各区域都可以进行主题氛围营造,形成不一样的主题皮肤,带给用户节日的沉浸式体验。
 
嘀嗒出行 App 从不错过每个节日的表达,春节期间在多个场景营造氛围感,使得主题皮肤氛围感拉满。在背景区域、各局部视觉区域、图标、弹窗、按钮、配图等,把春节氛围表现得淋漓尽致。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
八、满屏红包抢不停
 
对于春节而言怎能少得了抢红包的环节,将抢红包的游戏结合到活动中,氛围感和参与度都非常到位。
 
腾讯视频 App 就将抢红包的游戏结合到活动表达中,满屏的红包让你抢不停,用户的参与度瞬间被激活啦!通过游戏化的形式表达活动主题,更能符合年轻用户的需求。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
九、主题化 IP 形象表达
 
针对 IP 形象进行主题换肤,是强化主题氛围最直接的设计形式。
 
自如将主题化 IP 融入到个人中心和头像等表达中,也能突出春节氛围。在金刚区图标设计中也将春节元素进行发挥,整体的氛围营造非常到位。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
十、无处不在的云放烟花
 
燃放烟花爆竹才能体现出年味,在产品中的云放烟花也能让用户感受到乐趣。
 
高德地图无处不在的云放烟花,不仅让用户感受到烟花的乐趣,也能让云端年味变得更有氛围感。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
十一、突出卡片设计氛围
 
卡片式设计通常较为简单,以白色卡片居多,特殊情况下也会进行局部氛围营造。
 
高德地图个人中心在春节期间,推出了拜年相关的版块,以春节氛围营造卡片设计,氛围感十足。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
十二、营造底部标签栏氛围感
 
底部标签栏图标发挥是营造主题氛围的最佳选择之一,各大产品都会在这个区域进行设计发挥。
 
结合春节元素进行图标设计,或者在背景层面突出氛围等,设计表现形式非常多样化。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
小结
 
营造龙年氛围感的形式和案例非常多,这里仅选择了小部分作为欣赏。希望可以抛砖引玉,和大家一起在体验和积累中不断进步。
 
作者:黑马青年(vx: heimaux)
本文由 @黑马青年 原创发布。未经许可,禁止转载。
 


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

设计规范全方位指南

博博

一、设计规范的目标?
首先需要明确设计规范的目标,也就是为什么建立设计规范,这里包括提高用户体验、降低开发成本、提高团队协作斜率等。这些目标将为后续的规范制定提供方向。
还有就是大家都知道,在做项目时如果没有明确的目标和价值,是很难推动的。
从混沌到有序:设计规范全方位指南
 
 
二、什么时候建立设计规范?
在项目全面进入ui设计之前,先设计几个核心页面的demo,确立整体的基础规范和设计风格,把一些基础的设计规范定义出来,例如命名、尺寸、间距、颜色、字体、核心控件等、这样在开展设计的过程中保持一致性和统一性,当然,在项目设计过程中,UI设计规范也需要根据实际情况去调整补充。
从混沌到有序:设计规范全方位指南
 
 
三、设计规范具体要怎么做?
这里先讲一些基础通用的规范
3.1、间距
在间距部分我们需要把一些页面间距、模块间距、元素间距,这些要定义出来像我平时在工作中通常以8px作为基数,以此衍生出8、16、24、32、48、64
,这6个间距数值,完全能够满足绝大多数的使用场景。当然,针对信息较少的页面也会使用到120、160、200...其他间距数值,例如缺省页、登录页面等。出去这些特殊页面,基本上通用的就上面那6个就足够了
从混沌到有序:设计规范全方位指南
 
3.2、颜色规范
我们要先把主色调和辅助色,通常主色都是根据品牌形象和目标用户的需求选择。
拿在颜色的定义中需要注意以下几点
1、使用色彩心理学:
根据不同的颜色和情感联想,选择适合的颜色来传达品牌形象和用户体验。例如,蓝色通常被认为具有专业、信任和稳定的感觉,而红色则具有激情、活力和创新的联想。
2、建立层次结构:
使用颜色的饱和度和明度来建立层次结构。将重要的设计元素设置为高饱和度和明亮的颜色,使其在页面上突出显示,而将次要的设计元素设置为低饱和度和较暗的颜色。
3、避免使用过多的颜色:
过多的颜色可能会使页面显得混乱和难以聚焦。在设计过程中,尽量使用有限的颜色组合,并且要避免使用过多的对比色或互补色。
从混沌到有序:设计规范全方位指南
 
3.3、文字规范
我们需要把字体、字号、颜色、行距、这些给定义清楚,有规律的大小字号更有利于阅读,(另外要注意一些特殊字体的版权问题)常用的字体大小20px、24px、28px、32px、36px,44px,48px,且都是间隔4px,设计师需要根据具体场景去决定字体大小,以确保用户能够轻松阅读和理解界面信息层级比重。
 
3.4、UI图标规范
图标是UI设计的重要组成部分,它可以使图标看起来更加美观、易用、统一和有吸引力。也传达着整个UI视觉风格调性,和系统功能的作用。在图标设计上一定要简单清晰,定义规范时要对图标的大小、圆角、线条粗细、等有明确的指示,在绘制的时候我们可以制定自己的
网格规范,以便参考。
从混沌到有序:设计规范全方位指南
 
 
3.5、按钮
按钮尺寸:
一般来说,按钮的尺寸应该能够适应不同的屏幕尺寸和分辨率,并且应该能够突出显示。
按钮形状:
应该具有清晰的轮廓和圆润的边角,圆角大小是多少
按钮颜色:
按钮的颜色应该与整体UI设计风格相协调,并且应该能够突出主题和重点信息。一般主按钮大多使用主题色。
按钮文本:
按钮的文本应该简短明了,并且应该能够清晰地表达按钮的功能。还需要定义清楚按钮中限制的字数。
按钮内边距:
按钮的内边距应该能够扩大按钮的可点击范围,并且应该能够提高用户点击按钮的准确性。需要考虑极限情况下,最小应该保持多少内边距。
按钮状态:
按钮的状态应该能够表达按钮的状态和功能。一般来说,按钮的状态包括正常状态、点击状态等。
从混沌到有序:设计规范全方位指南



作者:考思考
来源:站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

日历

链接

个人资料

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

存档