首页

UI设计中的微文案:细微之处见真章

博博

在UI设计中,微文案往往被视作细枝末节,容易被设计师们所忽视。然而,正是这些看似不起眼的文字,却在用户体验中扮演着举足轻重的角色。微文案,即那些短小精悍、直接明了的文字描述,它们不仅能够指导用户操作,还能够增强产品的情感价值,提升用户满意度。
 
资深设计专家Joshua Porter曾指出:优化界面体验的一个快捷方式,就是提升文案的质量。 他在《Writing Microcopy》一文中首次提及“微文案”这一术语,并以确认弹窗的文案为例,展示了如何通过清晰的表述“账单地址是你卡上显示的地址”,有效减少用户在使用过程中的错误。 简而言之,要想快速优化界面体验,提升文案水平是一个行之有效的途径。
 
一、了解微文案
如果你有学习过尼尔森的十大可用性原则,你会发现10条中有4条都与文案有关。
系统状态 —— 告诉用户当前正在发生什么,是卡住了还是处在loading中或是其它什么状态。
一致性和标准化原则 —— 有一些约定俗成的规则,其中有一些普遍接受的术语,明确的操作提示,在不同界面保持统一等等。
防错原则 —— 帮助用户明白当他们做什么操作会发生什么结果,或者清晰的解释某个操作会有什么行为。
明确错误 —— 错误信息应该用人话表达(不要用代码),较准确地反映问题所在,并且提出一个建设性的解决方案。
 
1、微文案的定义
微文案(Microcopy)指的是在界面中,能够引导、帮助用户与界面交互行为的简短文案,可以是一个单词、也可以是一句话,常见的有表单文案、按钮文案、弹窗文案、错误提示等,大部分微文案都会对用户的行为产生直接的影响,如下所示:
UI设计中的微文案:细微之处见真章
 
2、微文案被重视的原因
微文案,作为用户与产品交流中最直接的触点,不仅有助于用户预见潜在问题,更能激发他们继续操作的意愿。通过预先洞察用户在操作过程中可能遭遇的障碍并提供针对性的解决方案,微文案在很大程度上降低了用户的流失率。 优秀的微文案能够精准地揭示问题核心,消除用户的疑虑,从而加速他们的决策过程,为产品创造更多价值。
此外,微文案所传达的语气和态度,对用户情绪有着显著影响。用户的情绪状态往往决定了他们是否愿意继续在产品中深入探索。因此,众多产品在追求体验优化的过程中,都将微文案作为重点改进的一环。
UI设计中的微文案:细微之处见真章
 
3、微文案专设岗位
国外对于微文案的重视不止反映在公司对于职位的要求上,更反映在国外的教育市场上。国外有很多教育机构相继开设了UX Writing的课程体系,比如 UX Writer Collective 以及 UX Writing Hub。这都代表着国外市场对于微文案设计的重视程度提高。
相比之下,国内除了头部大厂在微文案方面有着较强的意识,其余以下尚未获得足够的重视,但其重要性正迅速提升,展现出巨大的发展潜力。
 
二、如何设计微文案
 
1、少用技术专业词汇
每个领域、每个公司都有专业的词汇,设计师和开发者通常会在产品当中潜移默化地使用这些专业词汇。而用户群体却是包罗万象,所以需要做的,是将专业的技术信息简单易懂地表述出来。
避免含糊文案,明确表述问题和指引。力求简洁,词语能达意则不用句,一句话能说明则不赘言。用户没有耐心来看你写小说。
避免含糊文案,明确表述问题和指引。力求简洁,词语能达意则不用句,一句话能说明则不赘言。用户没有耐心来看你写小说。
 
2、不要拘束于一种表达方式
设计常常赋予产品独特的个性。在完成了前面的步骤后,我们往往需要将微文案与设计理念相融合。不同的设计与微文案结合,会产生不同的效果,但绝不应是单调冷漠的提示。相反,我们应赋予其人性化的口吻,比如将“未设置收货地址,请添加”修改为“您需要我们送到哪里?…”,从而使整个文案更具情感温度,成为一个温暖而富有亲和力的声音。
在一些特殊的场景下,微文案能起到安抚用户情绪、引导用户选择后续行为的作用
在一些特殊的场景下,微文案能起到安抚用户情绪、引导用户选择后续行为的作用
 
3、谨慎开玩笑,除非你对你的产品非常自信
虽然幽默风趣的微文案可以让人更加轻松,但是也要分场合,玩笑和俏皮的语言应该在氛围合适的时候使用,并且并不是所有人都能Get到特定的笑点。
有些笑话在文章当中或许合适,但是在UI界面当中就不一定那么有意思了。 比如,你所提交的数据无法保存,结果文案是“糟糕!您的数据好像无法保存呢”,这对于当前的状况毫无裨益。
这样的表达方式既直接指出了问题所在,又给出了简单的解决方案或建议,更有助于用户理解和处理当前的问题。
这样的表达方式既直接指出了问题所在,又给出了简单的解决方案或建议,更有助于用户理解和处理当前的问题。
 
4、克制与诚信是微文案应用的基石原则,它们共同构成了我们在运用微文案时应当坚守的底线
有时,我们过于依赖这些标签,使得人们对信息逐渐变得麻木不仁。又或是由于虚假、夸大其词的数据泛滥,使得人们开始对社会证明持怀疑态度。
正如张小龙在2017年微信之夜中所言,当App的推送变得过于频繁时,人们往往会选择忽视,以至于任何一个推送都无法引起他们的关注。
当全部都是特惠时,你还会因为优惠而冲动购买吗?
当全部都是特惠时,你还会因为优惠而冲动购买吗?
 
结语
微文案不仅是文字,更是沟通的桥梁。请确保微语言准确、清晰,同时注重情感化和个性化,以贴近用户。同时,保证可读性和可理解性,避免复杂表达。保持微语言的一致性和连贯性,提升用户体验。通过精心设计的微语言,为用户创造更舒适、便捷的体验。
UI设计中的微文案:细微之处见真章
 
 
作者:晚上去拔罐
来源:站酷

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

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

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


著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

设计方法论 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设计公司



UI设计师如何使用能力模型

资深UI设计者

在UI设计不仅仅是UI设计的今天,如何给自己的能力进行定位至关重要。

UI 职业的发展在今天已经越来越复杂,越来越多元化,不同企业对 UI 设计师的要求各不相同,包括了产品、交互、视觉、协作、创意等等五花八门的领域。

这种现状为在职设计师和新人带来很多负面的影响,不仅觉得自己要学习海量的技能,并且因为方向太多陷入选择困难症,越是想要提升就越觉得迷茫。

所以,想要解决这样的现状,就要应用我们今天说的重点——UI设计师能力模型。

UI设计中常用设计模型方法论

资深UI设计者

做设计的时候如果只是依赖设计感觉,在输出设计观点的时候,就会缺乏理论支撑从而无法说服别人,所以,了解一定的设计模型方法论,可以让你的设计更加有理有据,同时设计师在思考设计的过程中,也可以通过一些设计模型帮助我们开拓思维,突破瓶颈。

UI、UE、UXD能力模型分析

资深UI设计者

要想看起来毫不费力,你就需要非常努力,每一个领域,都会有很多专业的人。你必须马不停蹄的学习,才有能保持和他们的距离,不努力不学习,一不留神就会掉队。特别在设计这个青春行业,新知识、新风格、新技能更新的很快,更需要我们保持警惕心,时刻迎接新的挑战,敢于突破自己。

 

UI交互动画/UI交互动效/UI设计/UI界面设计

资深UI设计者

动效有多重要? 动效可以帮我们提升UX(用户体验),使UI界面显得更加一致和真实,并给整个产品带来创新的感觉

详解国内外十大设计系统

ui设计分享达人

设计系统(Design System)是一套综合性的指导原则、组件和规则,它协助团队以一致、高效的方式设计和开发数字产品。设计系统通常包括以下几个关键要素:
 

带你了解全案策划设计流程

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

日历

链接

个人资料

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

存档