首页

用户体验设计必备知识之支持可用性的交互设计原则

资深UI设计者

本文主要结合常见的移动端产品分享支持可用性的交互设计基本原则。文章图片较多请耐心等待加载清晰后查看。

HMI 车机应用设计规范

资深UI设计者

大家好呀,今天来聊聊华为车机应用设计规范。

有了 AI 界面变得更有视觉感啦!

资深UI设计者

 
 
 
涉及软件:Midjourney、Photoshop、Sketch
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 
有了 AI 界面变得更有视觉感啦!
 
 

UI设计师如何利用好AI~

资深UI设计者

ai越来越热,无数信息和新闻铺天盖地的涌现,身处信息潮的普通的设计师的一员,我从焦虑、迷茫再到坚定,AI终将只是一个工具而已,我们无需害怕,只需要不断地学习和应用,保持自身的竞争力。

色盲不迷茫:股票UI设计突围之路

资深UI设计者

在股票市场中,色盲或色弱的投资者面临着独特的挑战。传统的用户界面设计通常依赖颜色来区分不同的信息,这为这些投资者带来了额外的困难。本文将探讨色盲投资者在使用股票市场应用时所面临的困境,并提出基于UI设计原则的解决方案,以帮助他们更好地理解和利用市场数据

做UI设计,为什么你总是没有思路?

资深UI设计者

当我第一次踏足UI设计这一行业的时候,我认为,UI设计的终极目标就是打造最完美的用户体验,当时的我对很多“体验不够完美”的产品嗤之以鼻,觉得为什么这个地方的设计是这样的,改成这样或者那样,岂不是更加友好。然而,在一次又一次的工作中,这些实战的商业项目不断地刷新了我的认知,让我对UI设计这一岗位又有了更多更深的理解。

中世纪古典风《Sirius Wars》游戏UI设计-虚拟项目

资深UI设计者

在中世纪的古老大陆上,有一个名为瑟兰迪尔的王国。这里处处弥漫着古典的韵味,宏伟的城堡诉说着往昔的辉煌,宁静的小镇与广袤的田野相映成趣。然而,当那颗神秘而璀璨的天狼星在夜空中出现时,一场可怕的异变悄然降临。

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

如何为用户提供正确的键盘输入类型?

前端达人

Android和iOS系统都设计了针对特定表单字段的指定键盘输入类型。但大多数开发人员未能在他们的代码中指定正确的键盘输入类型。这会导致移动设备上的表单完成效率变慢。本文以Android平台为例。
一、输入类型并不总是“文本”
大多数开发人员错误地将每个表单字段的输入类型设置为“文本”。这存在问题,因为每个表单字段的输入并不总是纯文本。通常都有一些字段要求输入带有数字或字母和数字组合的信息。当用户尝试填写这些字段时,他们应该看到一个数字或字母和数字组合的键盘。
不幸的是,当每个字段的输入类型都设置为“文本”时,它会强制用户使用文本键盘来输入数字或字母和数字组合,输入时举步维艰,不是误点,就是需要频繁切换,输入体验十分糟糕。
因此,请务必为每个表单字段指定输入类型,以便系统能够显示相应的键盘。除了指定输入类型,我们还应指定相关行为,例如输入法是否提供拼写建议、是否将句子的首字母大写,以及是否使用“完成”或“下一项”等操作键替换“回车”。
输入类型、行为、操作键整理如下:
如何为用户提供正确的键盘输入类型?
 
 
例一. 邮箱地址字段
表单要求用户提供他们的邮箱地址是很常见的。当我们将输入类型设置为“邮箱地址”时,它会为用户提供一个针对邮箱地址输入的键盘。这个键盘不仅显示字母,还可以显示“@”和“.”,用户可以轻松地输入他们的邮箱地址。
如何为用户提供正确的键盘输入类型?
 
 
例二. 姓名字段
英文名是专有名词,英语中专有名词的第一个字母要大写。我们将输入类型设置为“人名”,并且设置单词首字母大写。用户无需对英文字母进行大小写切换。
如何为用户提供正确的键盘输入类型?
 
 
二、每个键盘对输入类型的反应可能不同
案例一:登录页面的密码输入
钉钉将密码框输入类型设置为“密码”。假定密码为 z0h0a0n0g。
  1.  
    百度输入法显示密码键盘,完成密码输入仅需点击 9 次。
  2.  
    搜狗输入法显示文本键盘,用户需在字母和数字之间切换,完成输入需点击 17 次。也支持长按第一行的字母输入数字。
  3.  
    微信输入法显示文本键盘,完成密码输入需点击 17 次。不支持长按字母输入数字。
如何为用户提供正确的键盘输入类型?
 
 
案例二:登录页面的手机号输入
钉钉设置电话号码键盘右下角为“下一项”按钮。
  1.  
    百度输入法的键盘右下角显示“回车”,用户完成手机号输入后需手动获取密码文本框焦点。
  2.  
    搜狗输入法的键盘右下角显示“下一项”,用户完成手机号输入点击下一项,密码文本框自动获取焦点。
  3.  
    微信输入法的键盘右下角显示“下一项”,用户完成手机号输入点击下一项,密码文本框自动获取焦点。
如何为用户提供正确的键盘输入类型?
 
 
三、Input Type 助力产品输入体验的提升
通过应用 Input Type 你可以正确的为每个文本字段设置特定的输入类型,以及看到每个输入类型(以及输入类型的组合)如何影响键盘。
我最初开发此应用是为了促进工作中跨部门高效协同,但我希望通过此应用能够赋能给更多的人,提升协同效率的同时更好的提升产品输入体验。你可以在这里免费下载:
https://www.pgyer.com/vT29
Input Type这个工具需要安装在安卓手机上,如果没有安卓手机可以电脑上安装一个网易MuMu安卓模拟器就可以用。
应用截图
应用截图
 
感谢阅读,以上就是本次分享的全部内容,希望你能从这篇文章中有所收获。
 

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

B端产品 | 如何快速建立业务&产品认知

前端达人

本篇主要内容:如何着手快速了解公司产品,建立相关业务或行业认知(偏入门向,相对适合0~1年经验的同学)
B端产品 | 如何快速建立业务&产品认知
 
 
 
前言
近几年B端市场如火如荼,许多小伙伴也逐渐加入,但由于种种原因,在工作时往往会遇到不少头疼的问题,如业务门槛高、用户场景难触达、竞品稀缺、话语权低等。
B端产品 | 如何快速建立业务&产品认知
 
 
本篇将分享我实际工作中的经验和思考,如果你最近正巧加入一家公司,负责B/G端产品设计,面对“高深”的业务需求却无从下手,需要对新的业务、产品体系建立认知,希望这篇分享能够为你带来一些帮助。
 
同时也欢迎大家留言讨论,良好的交流有时比文章本身更有价值。
2024年祝大家平安 顺利 开心 如意。
 
目录
Part.1 新人培训期
Part.2 体验产品
Part.3 查阅资料
 
 
Part.01
新人培训期
 
先说结论:是很好的“
答疑期
”,但帮助有限,学会问问题,同时接纳自己暂时不懂的情况。
 
在入职后,一般会有业务方向、研发背景、设计思路、产品使用流程等方面的培训讲解。但即便同事讲的不错,对于刚入职的我们来说,也很难短时间内消化掌握,并直接应用到设计工作中。
 
在这个时期,有三点建议:
  1.  
    找关键词
  2.  
    虚心请教
  3.  
    提出问题并给出方案
 
 
找关键词
在这种培训时间、内容都有限的情况下,找出其中的“关键词”列下来,具体数量视自己掌握情况而定,目的是记住并清楚这些关键词的含义。尽量先靠自己想办法解决,如有需要可向同事请教。
B端产品 | 如何快速建立业务&产品认知
 
 
 
虚心请教
当出现自己实在困惑的专业词汇、需求等解决不了的问题时,首先
梳理好问题
内容,然后大方的请教同事吧!这是非常高效解决问题的办法,以及和同事建立良好关系的机会。当然,不要完全依赖同事,一些同类问题或者非常显而易见的尽量自己解决,总结经验。
B端产品 | 如何快速建立业务&产品认知
 
 
 
提问题并给出方案
如果你入职时已经有一两年甚至更多的相关经验,前两条可能你已在过去的实践中掌握。那么此时很有可能在你入职后,前期会让你提一些产品的问题和优化建议,这里有个雷区一定规避:
B端产品 | 如何快速建立业务&产品认知
 
 
有些问题并没有表面上看去那么“简单”,或已存在许久,大家心知肚明只不过没有更好的解决办法或契机。在提出发现的问题时,请附上相应的解决方案或建议,以及这样解决的优势和劣势,预估下成本那就更好了(人力成本、时间成本、金钱成本)。
B端产品 | 如何快速建立业务&产品认知
 
 
 
 
Part.2
体验产品
 
想对公司产品和业务建立认知,体验及深入使用产品是必要的。但B端产品往往和现实业务场景挂钩,部分所涉及的内容比较专业,初到公司再加上日常中很少接触,所以并不容易上手。
 
如何通过“体验产品”建立对产品和业务的认知:
  1.  
    掌握核心功能和流程
  2.  
    多角色账号体验
 
 
掌握核心功能和流程
标题强调一个“
快速
”,那么首先要了解产品的“
核心功能
”及“
最小可行性方案
”,也就是产品的主流程。
 
一般在官网、宣传册、海报等宣传中常出现的,就是比较重要、核心的功能。而核心操作流程,可以在“产品操作手册”中获悉,此时自己可对照核心功能及流程,在产品中一一体验,并将操作流程及功能节点在纸上或使用设计工具绘制出来,加深对功能的印象,减少对产品的陌生感。
B端产品 | 如何快速建立业务&产品认知
 
 
在入职前期,至少体验一遍完整的闭环流程。这样做对业务认识也非常有帮助,因为B/G端产品所解决的问题,往往是对现实场景的映射。
 
多角色账号体验
可以向测试部门的同事申请测试账号,以及一些模拟数据,然后扮演用户角色体验产品。
B端产品 | 如何快速建立业务&产品认知
 
 
一是可以有针对性的进行模拟使用。可以结合上文提到的核心功能和流程,有针对性的体验产品。
 
二是进行核心用户的模拟。可以优先扮演“使用频率最高”的角色进行模拟体验。在B端产品中,使用频率最高的往往是在业务场景中身处一线的人们。
 
然后去了解为“决策者”所设计的功能,“决策者”大多为管理层,他们大多关注成效和结果,或进行安排和统筹的工作,所以此类功能往往是以“信息展示,高效传达”为主,可能不复杂但却很重要,一般包含了产品所需要产出的关键指标。
B端产品 | 如何快速建立业务&产品认知
 
 
多角色体验产品能帮助我们开启全局视角,为建立产品业务认知以及设计工作起到关键作用。B/G端产品设计除了掌握基础的设计原则外,还要
考虑“人”的因素,即各角色的职能、立场和联系等方面
 
 
Part.3
查阅资料
 
内部
查阅内部资料是对展开工作更直接、有效的途径,一般有以下几点:
1.
需求文档
:了解产品背景、功能设计等方面
2.
设计文档
:了解页面视觉、交互设计思路等
3.
操作手册
:了解目前的产品的使用路径
4. 领导及同事对外演讲的
PPT
5. 客户反馈群、答疑社区等
 
外部
不知道如何查阅外部资料的话,刚开始可按照这两个方向搜索:
1. 查阅该业务的发展。如:了解它的
历史
发展、各个
环节
、参与的
角色
2. 去各大
社交平台
,搜索相关的
关键字或话题
,了解行业中的人们在聊什么,有机会可参与其中,打入内部
 

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

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

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



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

日历

链接

个人资料

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

存档