首页

设计方法论 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“首页”

 
 
选择使用通栏分割线还是卡片分割,主要取决于你的设计目标和内容需求。以下是三个参考建议,帮助你做出更好的选择:
 
1.当内容已有自然分割线时:
如果你的主题内容本身就已经有明确的分割线,比如列表项、段落分隔等,那么采用非通栏分割会是一个好选择。卡片可以清晰地界定每个内容块,使主题信息层次更加分明,提高用户的阅读效率。
 
2.当内容类型多样且占据较大空间时:
如果单个主题内部包含了多种类型的内容,如文字、图片、视频等,且这些内容在垂直方向上占据了较大的空间(例如,内容长度超过屏幕高度的一半),使用非通栏分割会更加合适。卡片能够有效地圈定内容范围,为用户提供一个明确的视觉边界,帮助他们更好地理解和消化信息。
 
3.当需要增强横向空间感时:
如果你希望扩展页面的横向空间,或者暗示用户可以横向滑动页面查看更多内容,那么非通栏卡片会是更好的选择。非通栏卡片的设计能够利用横向内容连续性原则,帮助用户建立页面可以横向滑动的意识,从而提升页面的互动性和用户体验。如下图知乎“发现”、站酷“推荐”。

 
 
卡片分割更适合图文混排
卡片分割设计以其独特的布局方式,成为图文混排中的理想选择。它能够巧妙地将不同大小、媒介的内容统一呈现在一个界面中,
实现了内容的多样性与统一性的结合
。这种设计不仅让单屏区域能够显示更多内容,还通过合理的空间划分,确保了文字和图片之间的和谐共存,既维持了视觉的一致性,又
巧妙地平衡了文字和图片的视觉强度
。因此,在需要同时呈现多种内容和媒介的场景中,卡片分割无疑是一种高效且美观的解决方案。如下图知乎“想法”、站酷“首页”

 
 

 
 

 
 
留白分割的定义:
留白分割是目前设计的主流趋势,越来越多的产品在使用留白分割设计。留白分割主要通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),将信息进行自然的视觉分组。
 
留白分割具有以下优势:
 
1.突出重点信息:
通过增加间距,可以将关键信息与其他内容区分开来,使用户更容易注意到。
 
2.提高可读性:
适当的留白可以使文字或图形元素之间的界限更清晰,减少视觉干扰,从而提高用户的阅读效率。
 
3.增强设计感:
留白可以为设计增加呼吸感,避免元素过于拥挤,使整体布局更加和谐、美观。
 
当元素之间的间距保持均匀时,整个视觉呈现会显得平衡且协调,大脑默认为一个整体。然而,一旦元素的横向和纵向间距发生变化,我们的大脑会
基于接近性法则
,本能地将距离较近的元素视为一个整体或群组,这就是留白分割。(如下图)

 
 
留白分割在
有规律且卡片样式较多
的页面中表现尤为突出,在有大量卡片样式的页面中,每个卡片通常都包含一定的信息。通过留白分割,可以清晰地划分每个卡片的信息区域,使用户更容易区分和阅读每个卡片的内容,增加呼吸感,避免元素过于拥挤,从而提高整体的可读性。例如下图中主流的音乐类App

 
 
相反,如果在没有规律且页面内容较多的情况使用留白分割,则会使页面杂乱无章。比如下图咸鱼的“广场”界面feed流中,图片从1~9张都有的情况下,使用留白分割,页面就会变得杂乱,影响视觉效果。而脉脉则采用了卡片式分割样式,页面模块则相对清晰很多。

 
 
 
 



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

产品设计中的心智模式:深度理解用户需求与行为|北京蓝蓝UI设计公司

前端达人 设计资源

产品设计中的心智模式:深度理解用户需求与行为|北京蓝蓝UI设计公司
 
 
一、引言
在产品设计的世界里,心智模式是一个至关重要的概念。它反映了用户的内在需求、期望和行为习惯,是产品设计的核心依据。本文将带你深入了解产品设计中的心智模式,掌握如何通过洞察用户心智模式,创造出真正满足用户需求的产品。
二、什么是心智模式?
简单来说,心智模式是指人们对于世界的认知和理解的内在模式。它是人们对事物的看法、经验和行为习惯的集合,影响人们对世界的感知和反应。在产品设计中,了解和利用用户的心智模式,可以帮助我们更好地把握用户需求,创造出更符合用户习惯和期望的产品。
三、如何洞察用户心智模式?
  1.  
    观察研究:深入观察用户在实际生活中的行为、习惯和需求,理解他们的真实需求和痛点。这需要设计师具备敏锐的观察力和同理心,能够设身处地地站在用户的角度思考问题。
  2.  
    用户调研:通过问卷、访谈等方式,直接获取用户的反馈和建议。这有助于了解用户的期望、偏好和顾虑,进一步揭示他们的心智模式。
  3.  
    竞品分析:研究市场上类似产品的设计,理解其满足用户需求的优点和不足。通过竞品分析,可以洞察用户在不同产品间的选择和行为模式,从而深入理解他们的心智模式。
四、如何运用心智模式进行产品设计?
  1.  
    明确目标用户:了解目标用户的心智模式,根据他们的需求和行为习惯进行产品设计。这有助于确保产品功能、交互和视觉设计等方面符合用户的内在期望。
  2.  
    优化用户体验:基于用户的心智模式,优化产品的使用流程。例如,通过合理的信息架构、易于理解的交互设计和符合用户直觉的视觉语言,提升产品的易用性和用户体验。
  3.  
    创新设计:通过深入了解用户的心智模式,发现潜在的需求和痛点,为产品设计带来创新点。这有助于创造出真正解决用户问题的产品,提升市场竞争力。
  4.  
    迭代优化:在产品发布后,持续收集用户反馈,了解用户在使用过程中的感受和体验。根据用户的反馈和行为数据,不断优化产品设计和用户体验,以满足用户不断变化的心智模式。
五、结语
在产品设计过程中,了解和运用心智模式至关重要。通过深入洞察用户的心智模式,我们可以创造出更符合用户需求的产品,提升用户体验和市场竞争力。因此,设计师应不断提升对用户心智模式的认知和理解,以更好地满足用户需求,推动产品的持续创新和发展。
蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,添加vx蓝小助ben_lanlan,报下信息,蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等,欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
 
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
产品设计中的心智模式:深度理解用户需求与行为|北京蓝蓝UI设计公司



AI实操:用WHEE辅助设计app启动页

前端达人 设计思维

今天我们继续用WHEE,带你玩转AI实操,设计春天出行启动页运营海报!
这次的主题是春天出行!
(文末已附上同款配方链接)
 
Part 01
AI实操:用WHEE辅助设计app启动页
 
 
第一,先找一下灵感参考图
第二,从三个方向来分析
  1.  
    版式
  2.  
    元素
  3.  
    色调
 
收集灵感图时,有4点要注意
  •  
    风格:整体风格是否符合我们的主题和目标用户群?
  •  
    版式:版式是否清晰、易读?
  •  
    元素:运用的元素是否与主题相关?
  •  
    色彩:色彩搭配是否和谐、美观?
 
我们先来看一下“春天”
AI实操:用WHEE辅助设计app启动页
 
 
-版式
从版式上面来看一下他们共同的特征, 基本上都是一个上下结构的版式特征
这种结构简单明了,合适各种类型的内容
上方主标题,下方logo落款,这种排版方式我感觉是最稳的一种结构
即使是新人也能很容易出排版效果
标题的排版方式呢,有横向排版和竖向排版
它除了使用常规的黑体字
还有手写体,我感觉手写体更加符合主题
-元素
从元素结构来看
天空,河流,山川,阳光、花草等等
这些元素能够让人联想到春天的清新、活力和愉悦,增加了海报的吸引力和代表性
-色调
色调呢基本也是以蓝色,白色,绿色为主旋律
也就是阳光、白云、绿色植物
 
接着来看看“出行”
AI实操:用WHEE辅助设计app启动页
 
 
-元素
元素呢也是在上面“春天”的基础上面
多出车,人,露营等周边关于户外的元素
这些元素能够更加生动地展现春季户外活动的场景和氛围
-色调
色调也基本蓝、白、绿
这个主题我觉得还是要有生机感、有活力一点的色调才对
 
总结设计方向和关健词提取
AI实操:用WHEE辅助设计app启动页
 
 
版式
整体的版式规划采用上下的结构
主标题放在上方,横排版,用手写黑体
AI实操:用WHEE辅助设计app启动页
 
 
关键词
核心词:草地,拖车、车辆、山川
效果词:可爱的卡通设计、梦幻的视觉效果、鲜艳的色彩
 
Part 02
接下我们看一下WHEE的参数
AI实操:用WHEE辅助设计app启动页
 
 
提示词、模型这里维持默认就好
当然也还可以使用它的智能联想功能
看看有什么新灵感,亦或者是反向词等等
AI实操:用WHEE辅助设计app启动页
 
 
风格模型
在模型商店里面,这里我用了citypop的风格模型
当然这里面还有很多的模型,比如新中式风格,工笔画盲盒等等
所以在关键词里就不需要在写风格的关键词了
直接选择相对应的风格模型会更加高效率
出来的画面结果也更加接近目标视觉
AI实操:用WHEE辅助设计app启动页
 
 
参数这里保持默认就好
我们第一次跑图主要还是测试关键词
后续看情况在进行调整
AI实操:用WHEE辅助设计app启动页
 
 
这是我一共刷了两次图
从呈现的结果上面来看
第一排比较符合想要的感觉
画面上方也好做文字的排版
添加关键词“露营、帐篷”
添加关键词“露营、帐篷”
 
 
氛围的感觉还是少了一点,因为少了露营和帐篷的元素
我们可以在右侧这里,选“重新编辑”按钮
这样我们就可以延续之前的设置继续编辑
然后我们把露营和帐篷关键词加上,其它不变
AI实操:用WHEE辅助设计app启动页
 
 
从结果来看第一张有帐篷的氛围更好
第三张和第四张有点脱离了
但是第三张处理一下拿来做弹窗感觉效果也会非常好
AI实操:用WHEE辅助设计app启动页
 
 
然后我们在右侧这个放大一下像素
这样就可以得到一个更高清的分辨率
 
Part 03
接着我们来做一下主标题的字体设计
就用手写黑体
AI实操:用WHEE辅助设计app启动页
 
 
我们先找一些毛笔字字形作为笔画垫字
AI实操:用WHEE辅助设计app启动页
 
 
 
用钢笔工具描出字形(这里先以春字为例)
我们挑选出重要的笔画特征就好
其实是不需要跟原来的一样
这样会更有灵性
比如这里“春”字,上部首里的三横
我这里只要第三横连笔的特征
后面的几个字也是以此类推
AI实操:用WHEE辅助设计app启动页
 
 
描绘完之后呢,我们加一粗一点描边的大小
同时将端点和边角都设为平头
基本的字体结构完成了
下一步就是细节的调整了
AI实操:用WHEE辅助设计app启动页
 
 
首先调整一下字间距
排版的话,我给它是上下错落
这样会给人比较轻松的感觉
AI实操:用WHEE辅助设计app启动页
 
 
整理细节的话,就需要注意
笔画之间的关系和空间感
例如“春”字上部首的第三横与“日”中间那一横
“出”和“行”的连接,以及它们相互之间的关系
AI实操:用WHEE辅助设计app启动页
 
 
完成主标题的设计之后,我们先来对画面进行二次构图
天空部份我们不需要太多
第一是文案放在上方识别度较低
第二放大主体元素露营车和帐篷后,它也能够更好的突出主题氛围
AI实操:用WHEE辅助设计app启动页
 
 
按照原先的计划做上下结构的版式设计
上面我们放主标题文案信息
但是单看着主标题设计还不够丰富
所以需要在添加一些细节
在“日”字上方和“出行”下方
我们在用文案做成曲线跟随字形弧度
同时他们也是相互呼应的
描述信息直接放在主标题下方
居中对齐的样式就好
AI实操:用WHEE辅助设计app启动页
 
 
 
下面就放辅助的信息
同时也是居中对齐的样式
这样上下就有元素关系的呼应
统一的居中对齐的样式
也会让文字阅读效率大大提高
AI实操:用WHEE辅助设计app启动页
 
 
最后在放入一些固定落款的元素就完成啦~
 
Part 04
总结
1. 设计方向和关键词提取
通过收集和分析同类题材,得出设计方向和关键词
前期的方向确定是很重要的,有效的方向可以减少后期改稿
2. 视觉风格
选择对应的风格模型,得到想要的视觉风格
WHEE模型库中有很多风格模型,这大大的提升了工作的效率
3. 主标题字体设计
以毛笔字字形作为基础字形,设计出主标题
毛笔字结合黑体的感觉非常合适这轻松、放松类型画面
4. 画面排版
根据前期版式分析确定的方向,对画面进行文字排版
文案与文案之间,标题字体设计
都需要注意它们之间的关系,以及统一性
 
今天的分享到这儿就结束啦
我们下篇见咯
 
以下同款配方链接
01
 
02
 

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

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

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



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

2024年动效设计前瞻

前端达人 设计思维

在数字化时代,动效设计已经成为吸引用户眼球、提升用户体验不可或缺的一部分,动态元素的呈现效果,相比纯图片也新增了很多乐趣与惊喜,融入进我们生活中的方方面面。
2023年,我们看到了许多令人眼前一亮的动效设计形式,例如尼桑Ariya车机交互中,当驾驶员启动车辆时,信息娱乐系统的启动界面会展示一个动态的汽车品牌标志,伴随着流畅的过渡效果和音效,营造出一种高科技感和品牌认知度。
 
Current Time 0:00
/
Duration Time 0:08
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
从微交互到增强现实,从三维动画到自然运动,随着技术的不断发展与用户的不断变化,动效设计也在不断演进和创新。那未来的动效设计会是怎样的形式呢?在本文中我们一起来探讨一下吧!
温馨提示:以下图片均来源网络,GIF格式文件需要加载,感谢耐心阅读~
一、2023年动效设计表现形式
动效设计在用户界面、广告营销、游戏开发等领域都发挥着重要作用,常见的表现形式有微交互动效、3D动效、数据可视化动效以及场景化动效。
1、微交互动效
在2023年,微交互动效成为了设计师们关注的焦点。通过细腻的动画效果,提升用户体验,增强用户对界面的感知,使用户操作更加直观和愉悦。
2024年动效设计前瞻
 
 
在移动应用界面中,按钮、导航栏、滑动卡片等交互元素中常见微交互动效,例如美团小象超市,当用户点击底部标签栏按钮时,文字的颜色发生变化,图标右下角增加主题绿色填充,页面同步切换,给予用户直观的反馈,告知其操作已被识别;
美团-小象超市-手机录屏
美团-小象超市-手机录屏
 
车机界面中,导航栏通常用于切换不同的功能页面或查看系统状态。例如问界驾驶模式调节,用户通过手势操作导航栏显示,按钮高亮效果,驾驶模式以微交互动效呈现预览,以使界面切换更加流畅、直观,同时帮助驾驶员更轻松地操作界面,提升驾驶安全性和用户体验。
问界驾驶模式,来源网络
问界驾驶模式,来源网络
 
2、3D动效
三维技术制作的动画效果,通常具有立体感和逼真感,能够在屏幕上呈现出立体空间中的物体运动和变化。这种动效在视觉上更加生动、震撼,常用于影视特效、游戏开发、虚拟现实等领域。
视频来源网络
视频来源网络
 
在电影、电视剧等影视作品中,3D动效常被用于创造出各种特效场景、人物动作或者虚拟世界,增强视觉冲击力和真实感。例如好莱坞大片《复仇者联盟》中,各种特效场景和超级英雄的动作都采用了大量的3D动效制作,如钢铁侠的攻击动作、蜘蛛侠的飞行、蜘蛛网特效等,让观众身临其境地感受到了超级英雄的力量与魅力。
2024年动效设计前瞻
 
 
 
游戏开发中,3D动效被广泛应用于游戏角色的动作表现、场景建模、特效设计等方面,提升游戏的沉浸感和视觉体验。
王者荣耀破晓版
王者荣耀破晓版
 
车机界面中,可以通过3D动效制作出全景效果,使驾驶员在车内就能感受到真实的车外景象,增强驾驶体验和安全感。例如导航系统中,使用3D地图和路况动效,让驾驶员更清晰地了解路况和行驶路径。
Apollo anp3.0-障碍物绕行
Apollo anp3.0-障碍物绕行
 
3、数据可视化动效
数据可视化动效通过直观的动画展示数据变化,增强数据的可读性和理解性,使数据更生动、直观地呈现在用户面前,帮助用户更好地理解数据的含义和趋势。这种动效在金融、统计等领域尤为常见。
2024年动效设计前瞻
 
 
在商业领域中,数据可视化动效常被用于制作各种分析报告、销售演示等,通过动态图表、实时数据更新等动态效果,可以让数据报告更具吸引力和说服力。例如企业的数据监控面板中,可以使用数据可视化动效来实时展示销售额、用户访问量、库存情况等数据指标的变化情况。
来自DataV-设计中心
来自DataV-设计中心
 
并且通过动态变化的图表、实时更新的数据指标等动效效果,可以让管理者更及时地了解业务状况,做出相应的决策。
来自DataV-设计中心
来自DataV-设计中心
 
在科学研究和教育领域,数据可视化动效可以帮助科学家和教育工作者更好地展示研究成果和教学内容。例如,通过动画效果展示监测数据的动态变化、预警统计等,可以使抽象的概念更具体化、更易于理解。
来自DataV-设计中心
来自DataV-设计中心
 
车机界面中,可以通过数据可视化动效来展示车辆的驾驶数据,如车速、油耗、行驶里程等。例如,通过动态图表、实时更新的数据指标等动效效果,可以让驾驶员更清晰地了解车辆的行驶情况,帮助其做出更安全、更经济的驾驶决策。
@ Musemind UI/UX Agency,dribbble
@ Musemind UI/UX Agency,dribbble
 
4、场景化动效
场景化动效通过模拟真实世界的场景,让用户在虚拟空间中获得更自然的交互体验。产品展示或推广中,场景化动效可以帮助展示产品的特点、功能和优势。例如,在欧莱雅巴黎振兴霜互动 AR邀请卡,可以使用场景化动效展示产品的成分含量,以吸引消费者的注意力和兴趣。
欧莱雅巴黎振兴霜互动 AR 邀请卡,@KIVISENSE
欧莱雅巴黎振兴霜互动 AR 邀请卡,@KIVISENSE
 
车机界面中,我们也能看到场景化动效展示驾驶模拟场景,帮助驾驶员更直观地了解车辆的行驶状态和安全提示。例如导航系统中,展示车辆在雨天、雪天或夜间等不同路况下的行驶情况,以提醒驾驶员注意安全驾驶。
HUDWAY Drive,来源网络
HUDWAY Drive,来源网络
 
二、2024年动效设计发展方向
2023年动效设计不仅追求美观,更注重与用户的深度沟通。每一个动效都在讲述品牌故事,引导操作,提升易用性和趣味性。站在这个时间节点上,我们不禁要思考:接下来的一年,动效设计又将如何进化?它将如何继续深化与用户的互动,提升整体的用户体验呢?
1、智能化动效
随着人工智能技术的不断发展,利用人工智能(AI)技术或者智能算法来设计和生成动画效果,以实现动效的智能化、个性化或自适应。这类动效可以根据用户的行为、喜好或者环境变化实时调整,以提供更符合用户需求和情境的动画体验。
音乐专属推送
音乐专属推送
 
在移动应用、网页设计等界面中,可以利用智能化动效来实现智能交互界面,根据用户的操作习惯和需求动态调整动画效果。例如,苹果音乐专属推送,根据我的浏览、检索等行为和歌曲收藏、喜好等,智能调整动态加载的内容,建立我的专注音乐空间,提升我整体的使用体验和满意度。
2024款小鹏G9 超智驾豪华纯电SUV,小鹏汽车官网
2024款小鹏G9 超智驾豪华纯电SUV,小鹏汽车官网
 
在车机界面中,可以利用智能化动效设计车载智能助理系统,根据车辆状态、道路情况和驾驶员行为实时调整动画效果,提供更智能、更安全的驾驶辅助功能。例如,根据车辆的自动驾驶状态实时调整驾驶模拟场景的动画效果,帮助驾驶员更好地理解车辆的行驶情况和驾驶状态。
2024款小鹏G9 超智驾豪华纯电SUV,小鹏汽车官网
2024款小鹏G9 超智驾豪华纯电SUV,小鹏汽车官网
 
根据车内温度和湿度调整空调和座椅加热系统,实现智能化的温度控制和舒适度提升。
2、增强现实(AR)和虚拟现实(VR)的融合
2016年至今,AR和VR技术的发展持续加速,增强现实和虚拟现实融合动效成为热门话题。越来越多的行业开始关注和应用AR/VR技术,如教育、医疗、零售、汽车等领域,这种动效在现实环境中叠加虚拟物体和效果,使用户能够与虚拟内容进行互动,创造出更加丰富和沉浸式的体验。
2024年动效设计前瞻
 
 
虚拟试衣间
@Amol Arora
@Amol Arora
 
用户可以利用增强现实和虚拟现实融合技术,在现实环境中体验虚拟试衣间。通过智能设备查看虚拟衣服和配饰,以便在不实际试穿的情况下预览其外观和适合度。
虚拟家居设计
@ Bell'Arte Living - Estofados
@ Bell'Arte Living - Estofados
 
利用AR/VR融合技术,用户可以在现实空间中体验虚拟家居设计,例如在现实环境中预览家具、装饰品等虚拟物体的摆放效果,并根据实际需要进行调整。
车机领域
@ Shutterstock
@ Shutterstock
 
在车机场景中,汽车制造商可为客户提供汽车内容定制体验,客户通过AR应用或VR头盔在虚拟环境中预览汽车内部的不同配置和颜色方案,并根据个人喜好进行定制选择。
Acura Parts & Service
Acura Parts & Service
 
关于车辆维修和保养方面,通过AR应用,车主可以在现实车辆上查看虚拟的维修部件和保养步骤,以便更容易地进行维护保养。
The future of AR in Cars,Behance
The future of AR in Cars,Behance
 
同时也可应用于驾驶辅助和车载娱乐,例如智能导航、虚拟HUD、驾驶模拟和增强现实车载娱乐,进一步提升车机系统的智能化水平和用户体验,为驾驶员和乘客带来更安全、便捷、有趣的车载生活体验。
3、交互式动效
2024年动效设计前瞻
 
 
交互式动效在2024年仍会继续保持流行,并有望进一步发展,使用户能够更直观地参与到动效的生成和表现中。例如在车机系统中,通过交互式动效显示车辆的驾驶状态、周围环境和导航路线等信息,驾驶员可以通过触摸屏或语音指令与系统进行交互,调整设置并获取所需信息,提升驾驶安全和便捷性。
UI Motion Reel-百度Apollo,@ SeanCham
UI Motion Reel-百度Apollo,@ SeanCham
 
使用手势控制技术,驾驶员和乘客可以通过手势在车内控制屏幕显示和功能操作,例如多屏影音同步、开关车窗等,提高驾驶员的操作便捷性和安全性。
Li L9, Flagship Intelligent Cockpit.
Li L9, Flagship Intelligent Cockpit.
 
4、环保与可持续性动效
International Competition for the Xinxiu District Masterplan Con,@ McGregor Coxall
International Competition for the Xinxiu District Masterplan Con,@ McGregor Coxall
 
 随着环保意识的日益增强,对于具有环保和可持续性理念的动效设计也将受到更多关注和青睐。例如通过动效设计呈现城市绿色化规划的效果,城市绿道、绿色建筑等,向用户展示城市环境的改善和生态环境的保护。
@ Ahmad Sulaiman
@ Ahmad Sulaiman
 
在车机界面中,设计能源监测动效,显示车辆的能源利用情况,包括电池电量、油耗情况等,提醒驾驶员合理使用能源,节约能源资源。
5、跨界融合动效
未来的动效设计也将更加注重跨界融合,设计师可以借鉴其他艺术领域的元素和创意,将不同领域的美学观念融入到动效设计中,创造出新颖而富有创意的动效形式。
BTS - NB Numeric - NM1010 Tiago Lemos Signature Model
BTS - NB Numeric - NM1010 Tiago Lemos Signature Model
 
例如在品牌推广中,混合媒体新形式,模糊现实世界和虚拟世界的界限,Nike结合了实拍场景视频、草图、模型等形式的融合,创造跳出屏幕的动态内容。
来源网络
来源网络
 
车机系统中,应用全息投影技术,将导航地图以立体全息的形式显示在车内,提供更直观、更生动的导航体验;
Waymo cars,Google Design
Waymo cars,Google Design
 
Waymo汽车收集了大量关于周围物体和交通模式的数据,反馈乘客看到的是整洁的视觉图像和清晰标记的行程更新,增强驾驶安全与便捷性。
 
总之,2024年的动效设计将继续成为各行业中不可或缺的重要组成部分,呈现出更加多元化、智能化和个性化的特点。作为设计师,我们需要不断学习和探索新的设计理念和技术手段,以创作出更加出色的动效作品,为用户带来更丰富、生动和愉悦的体验。同时,我们也需要关注环保、可持续性等社会问题,积极推动动效设计的绿色发展。
以上视频、图片均来源网络,若侵可联系修改删除,欢迎交流探讨,谢谢~
 

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

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

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



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

智慧电力可视化大屏管理系统

前端达人 设计资源

 
 
 
 
智慧电力可视化大屏管理系统
 
 
 
 
Current Time0:00
/
Duration Time0:05
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
智慧电力可视化大屏管理系统
 
 
 
 
智慧电力可视化大屏管理系统
 
 
 
 
智慧电力可视化大屏管理系统
 
 
 
 
智慧电力可视化大屏管理系统
 
 
 
 
智慧电力可视化大屏管理系统
 
 
 
 
智慧电力可视化大屏管理系统
 
 
 
 
智慧电力可视化大屏管理系统
 
 
 
 
智慧电力可视化大屏管理系统
 
 
 
 
智慧电力可视化大屏管理系统
 
 
 
 
智慧电力可视化大屏管理系统
 
 
 
 
 

《UnitLife》APP界面/交互设计案例

前端达人 设计资源

下面开始:
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例


 

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

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

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

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

B端产品的C化该怎么去做?

前端达人 B端界面设计文章及欣赏

B端C化由来已久,概念化的东西怎么变为现实?阿鱼带你一步一步来...(ps:纯干货,有图有真相)
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?

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

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

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



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

今天来聊一聊视觉语言的体验升级

前端达人 设计资源

视觉表现不关乎体验?拜托,信息的传达都是靠眼睛的好吧,哈哈
今天来聊一聊视觉语言的体验升级
 
 
今天来聊一聊视觉语言的体验升级
 
 
今天来聊一聊视觉语言的体验升级
 
 
今天来聊一聊视觉语言的体验升级
 
 
今天来聊一聊视觉语言的体验升级
 
 
今天来聊一聊视觉语言的体验升级
 
 
今天来聊一聊视觉语言的体验升级

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

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

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



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

如何利用动效 打造B端的用户体验

前端达人 设计资源

说到B端后台产品,我们会想到业务复杂、信息庞大、用户角色多、页面层级深、使用门槛高等特征。这些特征让后台产品在设计时更强调“简单直接”,无需多余的设计元素,相比之下,没有C端产品有趣。而作为B端后台设计师在工作中会面临很多复杂场景的设计需求,有时候需求方未必能理解设计理念,会让设计师陷入“头秃”的状态。 针对B端后台产品某些体验问题,我们可以借助动效的力量去解决。
下面将结合工作经验,以及线上文章,分享如何利用动效来提升B端后台产品的体验。
 
主要分为两大块:
如何利用动效  打造B端的用户体验
 
 
如何利用动效  打造B端的用户体验
 
 
使用动效不是为了炫技,而是辅助解决设计中发现的问题。我们要思考的是,眼下的问题结合动效能否达到1+1>2的解决效果。设计方案除了要得到需求方的认可,还要有开发团队的支持。设计师做到从痛点中出发,于可行处落地,才是有效的设计。那什么场景下的问题可以考虑结合动效呢?
 
1、信息量折叠收纳
B端业务的复杂程度决定了产品的信息体量,这也考验着设计师设计页面时,能为用户在有限的空间里获取多少信息。举个例子,用户的办公设备是小型笔记本,它的屏幕小,用户一屏看到的内容有限。这时需求方建议减少留白,压缩空间,信息往上堆积,页面最后会拥挤不堪。庞大的信息体量力求对用户的吸收效率,也对设计造成困扰,针对这种情况我们可运用“折叠收纳”法
 
应用案例1: 按钮折叠
如果一个页面的按钮太多,可“折叠”按钮。以下面的科目树为例,每个科目有若干个功能按钮,如按钮全部展示,不利于用户聚焦重要信息。用户必定是先看科目标题,如有需要才对科目进行操作,基于这个思路可把按钮折叠起来,待用户鼠标悬浮至科目才出现按钮。在恰当的场景下将按钮折叠,有助于精简页面结构。一个页面按区域划分功能区和信息区,信息区被文案铺满了,可简化功能区的表现形式。比如按钮和解释文案,可对解释文案进行收纳,用户鼠标悬浮上去显示。对于用户来说,一个按钮的含义只要使用一次便清楚。
如何利用动效  打造B端的用户体验
 
 
应用案例2: 内容折叠
B端后台因信息量大有很多长页面,这时可在用户进行页面滚动浏览时,根据用户滚动的内容进行折叠。如下的筛选项占据了页面头部一定的空间,用户滑到结果列表内容时,已选项固定在顶部精简展示。
如何利用动效  打造B端的用户体验
 
 
小结:通过“折叠收纳法”优化页面布局,根据用户的操作行为给予内容变化,帮助用户降低信息量过大带来的阅读疲劳,也让设计师在有限的设计空间里“堆积”信息。
 
2、对路径进行引导,及时给与用户反馈,提高效率
B端产品会有极其复杂的功能,这些功能通常用步骤条来拆分,引导用户分步完成。面对复杂功能。需求方希望
在页面的各个位置添加用法提示文案。但用户并不想阅读一串串文字,这时可结合用户的操作行为,及时响应引导下一步操作。
 
应用案例1:
操作响应如下的这个页面需要用户把左边的字段拖拽到右边生成卡片。当用户拖拽时,给予动效反馈让用户感知字段拖拽方向。这种可视可感知的方式帮助用户快速掌握用法,提升效率。
如何利用动效  打造B端的用户体验
 
 
应用案例2:引导响应
在工作中我们也许会接到类似的修改需求:“按钮不够突出,不够大,要又大又突出”。你看完后心里想:“还不够突出吗,要这么大干什么呢?”这时沉住气,分析修改的根本目的,它想要突出的目的是什么?
1、这个按钮在整个页面中承载极其重要的功能,视觉上用户需立刻注意到2、点击按钮后的内容十分重要,希望增强点击欲。
当用户鼠标悬浮至按钮时,及时响应引导,一个箭头既起到醒目作用,也引导着用户去往下一步。
如何利用动效  打造B端的用户体验
 
 
小结: B端后台页面信息繁杂,功能多。通过动效帮助用户在使用过程中增强反馈和引导,正确的引导能缩短用户的操作路径,提升效率。
 
3、增加情感化体验
B端后台产品大部分是给专业人员使用的,信息表单居多,页面内容相似,比较单调。加入适当友好的情感化式效可以提升产品的趣味性,减少用户使用的倦怠感。
应用案例1: Loading动效
常规的Loading动效通常是一个圆在转圈,当用户面对长时间加载时,一直盯着一个圈会产生焦虑感。情感化Loading动效可总结为两类:
1、产品本身有一个IP形象,可围绕IP进行创作。例如“加薪猫”,加载的时候猫咪追着钱币奔跑,增加了跑步流汗的细节,提升它已经在努力加载的形象感;
2、根据Loading的文案进行拓展设计,提取文案元素,图形场景化,分散用户等待的焦虑。
如何利用动效  打造B端的用户体验
 
 
应用案例2:化抽象为形象
有些B端产品的业务背景专业而又抽象,可借助动效的力量化繁为简,化抽象为形象。以下面数据字典为例。用通过该字典进行与业务相关的字段查询。该页结构较简单:搜索栏和热词入口。我结合模块名称,对特征进行具体物化,在页面加入字典和放大镜元素。通过物化让用户快速感知该模块的作用。类似的大入口页面也可以运用3D效果,它能让物化更加立体。
如何利用动效  打造B端的用户体验
 
 
如何利用动效  打造B端的用户体验
 
 
比较常用的动效设计工具有: Ae、Principle、ProtoPie。这里分享一下我在工作中常用的并能解决大部分问题的工具。
1、Principle:快速制成交互动效演示Demo
Principle是一款只能用于Mac OS系统的交互设计工具,它的操作界面跟Sketch类似,学习成本较低。它搭配Sketch使用,能对界面做转场过渡动效和一些细节的交与动效。当你想提出某个交互动效提案时,可用Princidle快速制成演示Demo,导出GIF或视频给到需求方,让他们快速明白你的想法及可行性后台界面演示demo可直接选择箭头光标,呈现效果更贴合真实场景。
 
如何利用动效  打造B端的用户体验
 
 
2、After Effect: 适合各种场景下的动效制作
AE是绝大UI设计师必备的动效制作工具。它支持Mac OS和Windows系统,其自身有着强大而丰富的特效库。现在也能通过AEUX插件,把Sketch里的图层直接导入到AE使用。AE的功能大而全,日堂工作中多用干制作情感化需要的图形动效,比如Loading、lcon点击动效等等。
如何利用动效  打造B端的用户体验
 
 
小结: 设计师需要学习和掌握的软件很多,软件更新迭代的速度也很快。可选择能解决工作中绝大设计需求的软件精学,其余可在空闲时作为知识技能储备来学习。
 
总结
做适合的动效为B端产品体验赋能
当你在设计一款从0-1或是重构的B端后台产品,你可重新定义设计风格、规范控件。当你是半途介入一款风格规范都已相当成熟的B端产品,通常遇到的问题较为繁琐,可能是对一个按钮、一个颜色、一句文案去精打细磨。这时设计师需提升产品全局观,在设计过程中对遇到的问题层层剖析,洞悉设计的发力点,并在恰当的场景下紧贴产品特性和业务需求,提出恰到好处的动效方案,以小点出发,真正为产品的体验赋能。

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

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

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



作者:CNLILY
链接:https://www.zcool.com.cn/article/ZMTYxMTI2OA==.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设计风格相协调,并且应该能够突出主题和重点信息。一般主按钮大多使用主题色。
按钮文本:
按钮的文本应该简短明了,并且应该能够清晰地表达按钮的功能。还需要定义清楚按钮中限制的字数。
按钮内边距:
按钮的内边距应该能够扩大按钮的可点击范围,并且应该能够提高用户点击按钮的准确性。需要考虑极限情况下,最小应该保持多少内边距。
按钮状态:
按钮的状态应该能够表达按钮的状态和功能。一般来说,按钮的状态包括正常状态、点击状态等。
从混沌到有序:设计规范全方位指南
 
 
 


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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档