首页

好的单选框设计具备哪些特质?把握住这些知识点!

lanlanwork


一、什么是单选框?

顾名思义,单选框表示只能选择一个选项,再具体一点,可以理解为只能从一组相互排斥的选项中选择其中一个选项。

单选框有选中和未选中两种状态,样式上用填充的圆表示选中,描边的圆表示未选中,通过改变状态来给用户反馈。

图片

▲ 常见的样式是按钮在左标签在右,在结合特定的场景使用时,两者的位置可以视情况灵活调换。

 

二、何时使用单选框?

除了单选框,选择类组件还有很多其他形式,比如下拉列表、复选框等,我们首先来对比区分一下这几个易混淆的组件。

 

单选框VS下拉列表

当用户需要从大量选项中进行选择时,为了节省空间,可以使用下拉列表代替单选按钮。但是下拉列表将内容都隐藏在下一层级中,需要用户多做一次选择,操作成本和认知成本都会变高

图片

▲ 当选择不多于3项,建议使用单选框,这样选项可以直接展示出来,用户只需要点击选择即可;当选择超过5项时,可以考虑使用下拉列表,确保选项不会占用大量空间。

 

单选框VS复选框

复选框允许用户一次选择多个选项,选中其中一个选项,不会对其他选项产生影响。对于何时使用单选框还是复选框没有明确的界定,需要具体问题具体分析。

图片

▲ 这里提一个使用复选框时需要注意的小问题,比如在只有两个选项时使用复选框,用户可能会以为只需要从这两个选项里面选择一个,反而造成误导。

 

三、单选框设计指南

始终确保良好的可用性

对于这样一个简单的组件,想要做好用好,在设计上有一些不可忽视的细节。

首先要避免在单选框列表中嵌套下一层级的选项,因为使用单选框的目的之一就是为了让所有选项清晰呈现给用户,嵌套过多层级会导致整个结构的混乱。

图片

▲ 另外要明确的是,单选按钮不应该是唯一可点击的热区,而是要将按钮和标签一起作为热区,便于用户准确点击操作

图片

▲ 这个选择模块由单选按钮、文字标签和图标共同组成,可操作的范围很大,视觉层次也很清晰,设计得既整洁又实用。

 

保证可读性

单选框列表的布局要有逻辑性,尽量减轻用户的认知负荷。

图片

▲ 用户习惯于上下浏览选项和列表,如果将这些选项水平排布,可能会造成两点问题:一个是浏览时视线移动的不习惯,另一个就是如果选项位置过于紧凑,用户可能不知道每个标签到底对应哪个按钮。

除了列表要垂直布局,标签也需要很简洁。标签越长,用户需要花费更多的时间和精力才能了解整个列表。

 

提供认选择

想象这样一个使用场景,我们下载了一个新的设计软件,第一次打开时跳出一个弹窗,提示我们是选择经典布局,还是个性化布局,但是我们对这个软件不是很了解,可能并不清楚这两个布局到底是什么样子。

图片

▲ 在这种情况下,最好默认选中其中一个选项,这样做一方面可以减轻用户对于选项的纠结,另一方面还能有目的地引导用户使用。

 

最后

最后为大家精选了单选框设计样式资源,学习好的单选框设计风格和样式,获取最新的设计灵感!

图片

关注公众号后台回复【单选框】获取设计文件。

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》好的单选框设计具备哪些特质?把握住这些知识点!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



工作经验| B 端产品组件设计细节及经验分享(一)

lanlanwork


1、中性色色值为什么要使用透明度? 

有细心的用户发现,在 Ant Design 的设计规范里,中性色色值可以按照透明度来设置,见下图中性色色值表(百分数代表不透明度):

图片

平时大家似乎更喜欢使用 #333333、#666666 这种色值,那使用透明色有什么优势呢?

我们知道,中性色主要被大量的应用在界面的文字部分,此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑背景以及有色背景的差异,同时结合 WCAG 2.0 标准

现在  Ant Design 的色板中,透明色模式和实色模式都是有的。透明度模式可以做到背景色兼容。

如下图示例,我们以颜色 gray-6 为例,这个颜色在实色模式的色值是 #BFBFBF,透明色模式的色值是 000000-25%。两者在白色背景上的颜色完全相同,但是在灰色或其他颜色的背景上,却有明显差别:

图片

因此在透明色模式下,以中性色为主的前景色,会与背景色有一个更明显的色彩对比,对背景的兼容性也会更好,保证内容的可读性。

Ant Design 提供了透明色和实色两种颜色模式供用户选择,也会使组件更具通用性。

 

2、组件和设计师之间的关系是? 

当下很多常见的、优秀的组件库,都为设计和开发的工作提供了便利。

图片

那么使用组件库可以替代设计师么?组件和设计师之间的关系又是什么呢?我个人观点如下:

 

1 . 组件是「效率」工具

组件是工具,用来为设计师和开发提升工作效率。所有组件库的初衷都不是要替代设计师,而是要提高整个团队的工作效率。使用组件可以从两个方面提效:

(1)工作内容上:可以将不必要的、重复性劳动的时间节省出来

(2)工作流程上:便于设计师与前端开发做交接和协作,节省沟通成本

 

2 . 组件是「质量」保障

使用组件做设计稿,可以在一定程度上保证工作质量。组件规范了前端和设计师的工作方法,建立相对底层的系统,设定了设计和开发的质量底线。

图片

基于组件规范设计和开发的产品更容易具备:

(1)一致性:具备相对一致的表现样式,设计风格和交互体验上均可保持统一

(2)可用性:对于用户操作,可以保证最基本的可理解性和可操作性

(3)审美性:符合基本审美标准,虽不会很亮眼,但也不会很难看

 

3 . 设计师要「沉淀」业务组件

设计师可以尝试沉淀有针对性的业务组件。很多业务领域有其独特性,比如金融类组件和政务类的产品页面列表内容就有很大区别。单一的元素组件在应用的过程中可以被再次组合和沉淀

举个例子,我之前在做业务需求设计时,相比于 AntD,其实更常用的是 TechUI —— 它是建立在 AntD 基础上的、由我们蚂蚁的设计师通过对业务需求的提炼、组合和封装,做成的一套于蚂蚁自己的【业务组件】

图片

再总结下二者的区别:

– Ant Design:是所有人的,是通用的,是单一的原子级别的(比如一个输入框)组件。

– TechUI:是蚂蚁自己的,是私有的,是组合的区块级别的(比如一整个表单)组件,更具备蚂蚁集团自己的业务属性。

图片

针对你公司不同业务类型,沉淀出不同种类的区块级别的组件,这类组件使用起来也会更加得心应手、加倍提效。这也是 B 端设计师可以去学习和精进的一点。

 

4 . 设计师要「洞察」业务诉求

使用组件可以让设计师把节约出来的时间和精力放到更多有价值的工作上去。作为 Ant Design 的设计师之一,坦白的说,即使你的设计稿全部使用了 Ant Design 的组件搭建,最终的页面效果也仍不完善,在用户体验上始终可以更进一步

设计师应该更多去关注对用户需求和业务逻辑的深入挖掘,不仅仅是在界面细节的表现手法上下功夫,还要学会站在全局,用系统性思维看待每一个项目,为整个产品的系统流程做优化,做更全面的产品体验升级。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》工作经验| B 端产品组件设计细节及经验分享(一)

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


测试了新手指引方案,总结下失败经验

lanlanwork


图片

上图来源:Monday

 

不要给用户选择

有些产品还挺重视新手指引的,准备了好几个课程。

由于内容太多,所以拆分出来展示给用户,甚至让用户自己选择。

图片

图片

上图来源:Zendesk

 

例如上面的案例,虽然并没有强制用户手动选择,光是新手指引的内容列出来给用户这件事情,已经让人压力山大了。

其实用户刚进来时,只想要利用新手指引快速上手,并不想要看到关于新手指引的介绍,更无法决定选择什么新手指引。

如果真的不同人群的使用功能相差很大,那么直接根据对方情况提供相应内容即可。

这让我想起了第一次在牛肉火锅店点菜的情景,我这种牛肉小白用户根本看不懂菜单,能不能给先上一份普通牛肉?

图片

 

指引气泡不需要标题

Windows 系统给界面设计带来一个奇怪的习惯,那就是不管什么面板,都必须有一行标题。

图片图片

如果实在想不到用什么标题了,就把描述文字第一行拆出来做标题,甚至哪怕是用系统 logo 占位,也必须要有标题!

这让很多新手指引的气泡,也习惯性地配一个标题。

如果标题就能直达主题也还好,但如果是为了占位了凑出来的,那可就太浪费用户时间了。

图片

 

不要强调跳过按钮

科技产品改变了人们的生活习性,其中之一就是让我们形成了条件反射:看到任何突然出现的弹窗和气泡,快速点击主按钮并让其消失。

后来因为移动端广告弹窗的泛滥,现在已经进化到了,看到弹窗先找 ❌ 了。

图片

上图来源:不要这样用弹窗,真的很烦

 

很多新手指引的气泡都会提供跳过按钮,这样做挺好的,因为有的用户可能真赶时间。

但是如果跳过按钮做得太强,就会激发用户的条件反射,想都不想直接点跳过:

图片

这个我尝试过了,大脑真的控制不了自己,手速已经跟膝跳反射一个级别了!

所以,这个跳过按钮一定要做小一点,尽量不要激发用户的条件反射:

图片

 

只要不是单击,就得有图示

前面提到,千万不要小看条件反射这个东西,这个是生物本能。

用户最习惯的操作就是单击,如果你指一个箭头给他们,十有八九立即就上去点一下。

点一下不行,就多点几下,实在不行就双击。

如果双击还不行,就直接放弃了。

大半人根本不会看到,旁边赫然写着「点击鼠标右键」几个字。

图片

以上就是我多年做用户测试的常见场景,总结就是:只要不是双击,就要有图示,写字根本没什么用。

如果是右键,可以把鼠标画出来:

图片

如果是双击,可以给个动效:

图片

如果是拖拽,除了操作对象之外,还要把目标位置高亮,并给一个指示箭头:

图片

没错,一定做要扫一眼就能懂的程度。

 

遮罩别太深

有些产品,为了让更多用户走完新手指引,会给操作对象和气泡之外的部分加遮罩。

这样没什么不好,看起来还挺清晰的。

但是我发现有的新手指引遮罩太强,反而起不到学习的作用。因为用户看不清界面整体的样貌,还是记不住操作路径,引导完后全忘了。

新手指引的遮罩,一定不要按照弹窗的遮罩标准去看。

因为有弹窗时,页面的其他部分确实不用看了;但是新手指引需强调重点,界面其它部分最好还是能看到。

图片

 

总结

把上面的几点都集合在一张图,对比一下:

图片

这些问题,如果放在产品的一般功能上,也许不算什么。就算第一次出错,下次也总能习惯。

但是新手指引不一样,这是产品给用户的第一印象,而且通常只出现一次,错过就没有第二次机会了。

这个步骤,也能直接影响到用户的转化意愿。

所以,新手指引真的要避免任何小问题,把体验的标准往上高一点。

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》测试了新手指引方案,总结下失败经验

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



这逆天的效果,竟然是10秒钟做出来的,真实大开眼界!

lanlanwork

莫b

图片

图片

图片

再酷炫一点的,甚至可以让3d动起来:

这样的效果如果做成封面,是不是老帅了!

如果你不会动效也不会3d,没关系,今天给大家介绍一个神奇,上面的3d动态效果非常多:

咔咔就是一顿选择! 还有各种属性各种调整:

图片

调整出自己满意的效果之后,文字往上面咔咔一放:

图片

图片

图片

尤其是后面的元素是动态的:

这封面可不得了啊,做个汇报啥的,必须震慑一下老板,让他尖叫就完了!
(我这个动态gif图效果是用屏幕录制,然后用ps把mov格式转成gif的)

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》这逆天的效果,竟然是10秒钟做出来的,真实大开眼界!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



B端产品C端化,抱歉我想的太简单!

lanlanwork


为什么要 C 端化?

其实 B 端产品 C 端化,并不是因为传统的 B 端产品没 C 端好用(不是这么比的)。

其实关键还是获客模式的转变。

传统的 B 端产品是销售驱动,销售人员通过电话、上门拜访等形式促使客户下单。

一旦成功卖出,只要后续的服务不太差,客户就没必要更换迁移。

现在 B 端市场越来越大、行业信息越来越透明、客户的判断能力越来越强,传统销售模式开始变为互联网营销

B 端产品在网上发布信息并投放广告,吸引客户自己前来试用并购买,只需提供少量客服人员即可。

这与以往的 B 端业务模式有很大不同,所以就需要变革。

所谓「B 端产品 C 端化」,表面上是学习 C 端的用户体验,背后的真正意图是要学习人家 C 端的互联网获客能力

图片

 

怎样才是好的 C 端化?

我发现 B 端产品的 C 端化程度,和他们的互联网广告投放力度成正相关

例如我在油管上经常受到 Monday、GoDaddy 这两款 B 端产品的轮番轰炸。

先不说好不好用(毕竟我也不是目标客户),我发现他们用起来真的很有「C 端感」,和传统的 B 端产品果真不一样。

倒不是什么“轻量化、趣味性和人文关怀”,而是因为他们在我打开网站的那一刻,就开始不断吸引我探索使用

我拿 GitLab 和 Monday 的官网首页对比一下,也许你就能感受到了:

图片

前者像是一板一眼的「老实人」,后者则像是对你笑眯眯的「绿茶妹」,高下立判。

“轻量化、趣味性和人文关怀”这些东西,并不足以打动用户试用和购买,顶多只能算是「低段位」手段。

只有「高段位」手段,才能让用户不自主地地被吸引,心甘情愿地掏钱。

可是要做到「高段位」真的很不容易,我今天就总结几个技巧吧~

 

1. 直接坦诚

遇到两个陌生人:一个打官腔又遮遮掩掩的;另一个说话友善接地气又诚实,你会更喜欢哪个?

可能大多数人跟我一样会喜欢第二个。

C 端化做得好的 B 端产品,会把自己的产品预览图直接放到首页供人观看,而不是搞一张概念图外加一堆高大上的广告词。

前面放过的那张案例,这里也可能拿来用:

图片

GitLab 的官网画了一些很抽象的概念图,写了一些很抽象的描述,给人感觉很模糊。

Monday 的官网明确把自己的业务类型列了出来供用户选择,还把每种业务对应的图标和展示方式画了出来,感觉很明确清晰。

 

2. 有效互动

遇到两个健身房销售:一个上来就说一个劲地介绍服务;另一个则先确认你平时的健身习惯,再根据你的情况介绍服务,你会更愿意听谁说话?

我肯定更喜欢第二个。

C 端化做得好的 B 端产品,不是简单地展示信息,而是先了解用户,再根据用户的需求提供不同的信息甚至服务。

图片

Zendesk 的网站,会把自己的功能列出来给用户,给的图像和描述又很抽象,毫无互动感。

而 Asana 会让用户选择自己需要的功能,并直接给出具体案例的界面展示图。

 

3. 降低门槛

遇到商场逛街时遇到两个陌生餐馆,一家在二楼;另一家在一楼,你会愿意尝试哪家?

肯定是第二个。

很多 C 端化做的好的 B 端产品,会把表单用弹窗的样式放在产品上面,让用户感觉只要填写完就能立即使用了

图片

比起 Trello, Smartsheet 只是在表单展示了一下产品内部,就让用户感觉门槛低了好多。

即便 Smartsheet 的新用户后面发现背后那张图真的这是一张图而已,要填的一点不少,但这时都已经快填完了……

 

4. 循序渐进

两家陌生的两家餐厅都把菜单摆出来了,一家的菜单写得密密麻麻;另一家的菜单虽然菜品不多,但是推荐菜品和菜式分类很清晰,你会更愿意尝试哪家?

我相信很多人都会更愿意尝试后者。

C 端化做得好的 B 端产品,不会太在意自己的产品是不是看起来功能齐全,而是更在意用户是否能够很好的理解产品,不要造成心理负担。

图片

上图来源:Figma这些交互细节,B端设计也值得借鉴

 

Sketch 和 Figma 的属性面板在功能上其实没有很大的差异,但是后者看起来却清晰简洁许多,对新用户更加友好。

 

总结

B 端产品 C 端化这个理念其实很好,但如果被误以为只是向 C 端学习用户体验那就可惜了。

用户体验只是手段,关键目的是在没有销售人员参与的情况下,如何从互联网获客。

这次的经验的提醒我,以后如果再看到一些很火概念,不要简单的从表面理解,而是要站在决策者的角度,多思考背后的真实意图。

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》B端产品C端化,抱歉我想的太简单!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


重新设计东南亚头部在线超市的真实案例

lanlanwork


I. 发现

客户访谈

由于这位甲方的合作态度良好,所以设计师有机会与 SESA 的创始人和产品经理进行了 2-3 次会议。

借此了解了业务目标、用户需求和技术限制等关键问题:

图片

主要问题:

  • 低转化率:杂乱的界面使用户很难浏览商品。
  • 手机端体验不友好:几乎 90% 的用户是通过手机访问网站,但手机版的设计不够理想。
  • 手机端糟糕的界面和体验:目前他们使用的是现有的网站模板,根据目标用户的反馈,缺乏优化而且加载速度很慢。

客户需求

  • 一键式购物
  • 轻松的界面和体验
  • 无缝的商品搜索
  • 折扣和优惠更容易被看到
  • 使用网站时能感觉熟悉而简便

成功指标

  • 增加客单价
  • 增强人们的对品牌的认知感
  • 增加用户和订单数量
  • 无缝的体验
  • 让健康的生活方式更加受欢迎、评价、容易取得,更加有趣而美好
  • 提供并教育用户健康的生活方式,并转化为愉快美好的生活

 

目标人群

根据产品团队提供的数据,整理出了目标人群的特征:

图片

 

II. 构思

人物角色

根据以上信息,整理出了两个完全不同的人物角色:

图片图片

 

故事版

没有区分人物角色的故事版:

图片

目标用户的故事版:

图片

 

体验地图

思考分析用户旅程的五个阶段(探索网站、比较商品、确认下单、完成购买和接收配送)和用户感知的三个方面(行为、思考和感知),制作了体验地图:

图片

将当中的关键信息挑选出来:

图片

 

竞品分析

设计师找到了三家主要竞品,先大概了解他们的特色和优势:

图片图片图片

然后从 Google Play 的评论中寻找竞品的问题,这样就可以思考如何战胜他们:

图片图片

P.S. 评论分析是一种简单有效的竞品分析利器(也可以用来分析自己的产品),具体方法我之前有分享过:别总想着数据分析/用户调研,先把评论分析做了吧!

 

III. 设计

信息导航

先把大致的用户流程确定下来,这样对整个产品就有了一个整体构思:

图片

 

线框图

然后用手画出线框图,定下页面的整体布局:

图片

 

低保真

将线框图手稿用绘图软件细化,制作成低保真方案,用来向客户展示和做用户测试:

图片

图片

 

IV. 完成

可用性测试

找用户做测试时,用的是低保真可交互原型。

根据测试发现的问题,设计师直接将优化方案运用到了高保真方案上,所以下面整理的问题都用高保真方案来配图展示:

  • 1. 自动定位:测试之前用户必须手动搜索位置。
  • 2. 属性选择:由于客户想要一键式购物,所以当用户点击熟悉(通常是重量)右侧的箭头时,可以反转卡片进行详细选择。

图片

  • 3. 促销展示:原本设计了三个促销区,但是测试中发现用户面对大量的信息无法充分理解,所以移除了一部分,只保留了头图和分类优惠。

  • 4. 商品导航:为了避免用户迷路,将商品分类导航放在了所有页面顶部,并且悬停时展示子分类和相关文章。

 

高保真

图片

 

响应式

这个网站需要具备很高的响应式能力,不论在 PC 端还是手机端,都能轻松使用。

但由于 PC 端和手机端的尺寸相差太大了,所以不得不使用断点(Breakpoint)来判断用户当前处在哪个端,并展示相应的界面。

这个断点的概念在栅格系统很常用到,指的是当界面尺寸缩小或增大到某个(或几个)零界点时,间距大小或其它界面元素发生突变。

图片

上图来源:三种最主流的响应式栅格

 

这个方案的对于移动端的特殊处理包括:

  • 确保商品分类的位置,方便用户记忆
  • 使用汉堡菜单
  • 提供模仿原生 APP 的吸底导航

图片

 

Before&After

最后对比一下优化前后的方案:

图片

图片
图片
图片

图片

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》重新设计东南亚头部在线超市的真实案例

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




原子设计方法论!值得一学的设计思维模式

lanlanwork


1、什么是原子设计?

原子设计是创建设计系统的理论方法,分为原子、分子、组织、模板、页面五个层次。从最基础的原子开始,原子构成分子,分子组成组织,相互协作以创造出更有效的页面。

原子设计借鉴了化学中看待事物的方式,并将其应用在数字产品中。例如我们看的界面是由一些基本的元素组成,文字,颜色和图标等都是一个个原子。

图片

原子设计是一种思维模式,并不特指某一种设计风格或框架。通过原子设计理论,将产品和页面联系为一个有机的整体,其中的每个小元素都发挥着至关重要的作用。

 

2、原子设计方法论: 从原子到产品

原子设计有特定的框架,方便帮助设计师组织思路并在设计过程中作为指导。

 

原子

原子指化学反应不可再分的基本微粒,虽然基础但会对分子和个体的形成产生很大的影响。

同理在设计中,原子是构成设计的最基础的元素,可以是一个icon、一种字体…本身不具备特有的功能但这些基础元素同样值得重视。

图片

 

分子

分子由原子构成,以一定的次序和排列方式结合成分子。回到设计中,多个设计元素组合在一起,也会创造出一种新东西——具有明确功能性的组件

图片

原子设计强大的地方在于,可以为分子(组件)的创造分配时间,以确保组件具有明确的意义和功能。

 

组织

不同的分子组合形成组织,在设计中各种不同的组件组合在一起,形成一个完整的功能模块,例如在首页轮播图模块,有图像、文字等元素,还有按钮、导航箭头等组件。

利用组织这个概念能帮助设计师建立模块化意识,对页面结构有更深入的理解。

图片

 

模板

通过元素、组件和功能模块的相互关联,从而得到产品的模板即产品框架,也可以理解为产品的低保真线框图。

图片

在这个阶段,产品的信息架构和可视化的层次结构变得非常重要。产品页面、搜索结果页、主页等都有各自的模板,会显示内容的结构和基本的原型,方便后期使用。

 

页面

在模板基础上,继续添加需要的细节,最终会形成完整的页面,即产品的高保真原型。

这个阶段中需要注意的是,页面中所有的占位符尽可能提供真实的内容——真实的图像、真实的文案。

图片

对于完成的页面,我们可以利用原子设计的灵活性来调整和优化页面设计。

比如当有某些地方的设计没有达到预期,可以灵活调整页面中的某个分子或组织模块来实现想要的效果。

 

3、原子设计的优势

灵活性和适应性

原子设计是在设计过程中构建事物的方式,但它并不限制对环境变化做出反应的自由。

通过为产品中的每种类型的内容创建组件和模式,获得一个灵活的系统。模板为产品的一致性提供了一定的支撑,后期既可以按这些模板原型快速设计,也可以根据需求灵活调整。

原子设计相当于将设计内容纳入到一个模式里,组成的页面不仅拥有准确的内容,并能以最好的样式展现出来。

图片

 

系统模式

原子设计鼓励设计师投入时间和精力来创建整个系统,以便在产品设计的最后阶段,能够以一种高效的方式灵活地完成设计工作。

图片

 

更少的组件,更高效的开发

利用原子设计可以确保在项目过程中组件的数量会受到一定的控制,避免团队重复设计同一个组件的多个版本或提供样式差不多的副本。

图片

控制UI组件的数量,带来的好处之一就是开发的效率会变得更高。有了以原子设计方法为基础的理论架构,设计过程的每个环节会紧紧串联在一起,避免混乱。

 

最后

原子设计成为一种用户体验设计方法,以全新的方式带领大家设计每一个元素、组件以及页面,通过这样的方法论有助于设计师构建一个完整的设计系统。

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》原子设计方法论!值得一学的设计思维模式

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



2021 必备的超赞神器,用上它,效率都要提升三倍!!

lanlanwork


图片
上图就是这个神器制作出来的一些效果,之前看Dribble上面有很多类似的设计,现在终于知道它们大部分来源于这个神器。
下面我也找了一些案例,大家一起来看看。
图片
图片
图片
这样看,效果还是真的不错,它支持颜色修改、样式修改,目前一共有11种几何样式。
图片
好了,现在下面正式介绍这个传说中的神器,我相信大家一定会喜欢上的。
图片
上图就是这个神器的基本外貌,一共11种基础类型,当点击其中一个进去后,可以进行编辑。
这里我点击上图中的第二个模式(MIXTAPE)进去。
图片
如果大家英文不好,可以将整个页面翻译成中文,Google自带的翻译
进入这个页面,大家可以根据自己喜欢的风格调整样式,同时还可以修改颜色。
图片

比如我可以选择8X12列和行的几何布局。

图片
对颜色、列和行、开启阴影调整,得到如上效果。
图片

最终可以导出一张高清大图(3240X4860),尺寸是完全够用的。

图片

随便调整下又是一张不错的几何背景,还可以作为作品集封面。好了,关键时刻来了神器的网址已经打包好,大家可以拿去使用。

领取方式如下:添加小编微信,备注:神器699,小编会将下载地址发给你(小编不是机器人,回复会慢一些,大家稍等)。

 

原文地址: 功夫UX(公众号)
作者: 功夫UX

转载请注明:学UI网》2021 必备的超赞神器,用上它,效率都要提升三倍!!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



需求太碎?设计师如何在小业务中提炼价值

lanlanwork


Chapter One .
理清小业务的业务目标

相对于大业务(例如网站改版),小业务因为简单,其业务目标界定常容易被忽略。在日常设计中常会遇见设计师在不知道业务目标是什么、目标模糊、目标不正确的情况,直接从梳理小业务具备哪些功能入手,分析下现状问题后开始制定设计策略,这往往会导致设计出现解决不了关键问题、出现偏差情况。产品功能本身只是满足用户需求和实现业务目标的服务载体,只是策略的表象。理清小业务所承担的业务目标是前提,那么如何理清呢?

 

理清业务目标

小业务目标来自大业务目标,对大业务的业务目标进行一级级向下拆解后,即可获得小业务对应的目标。目标拆解需要遵循MECE原则,拆解方法包含:二分法、过程法、要素法、公式法、矩阵法。(tips:目标的拆解有一定难度)

图片

Dapp设计详情为例,在酷家乐大增长业务背景下,用户活跃和用户留存为核心的目标,设计详情处于设计路径的一个节点,拆解得到设计详情的5个主要业务目标:

  • 设计详情-用户周活跃
  • 设计详情-新用户留存
  • 设计详情-老用户留存
  • 设计详情-内容投稿数
  • 设计详情-内容分享数
图片

业务目标可分为2个类别:

  • 第一类别:符合用户意愿,如活跃、留存,在满足用户需求的情况下可以自然达成;
  • 第二类别:不符合用户意愿,如内容投稿、内容分享,用户不太会主动去完成,需要去创造动机,激励用户进行。

 

Chapter Two .
挖掘小业务关联的用户需求场景

有小业务的业务目标后,第二步就需要给用户提供价值满足用户需求,以此来实现业务目标的达成。梳理清楚小业务服务了哪些用户需求是提供价值的前提,那如何获取用户需求场景呢?

 

用户访谈——获取相关用户需求场景

用户需求场景可以帮我们清晰了解到用户使用产品的原因。用户需求场景可以一句话进行界定,包含四个关键要素,其中需求本身最为核心,需要挖掘出当前诉求和其背后的潜在需求。

“在【某环境下】,【某用户】做了【某事】来满足【某需求】”

图片

用户访谈为了挖掘到更为深入用户需求场景的要素信息。以设计师入行年限分组(1-3年、3-5年、5年以上),每次分组访谈2-3个设计师。梳理出设计详情相关的8个需求场景:

图片

访谈信息整合如下

图片

 

规整用户需求场景

在业务访谈中获取的场景往往都是碎片化的,碎片化场景对设计指导容易出现偏差,需要把场景结构化,为后续的方案设计提供依据。我把获得的场景按照设计师设计流程进行规整,按设计前、设计中、设计后三个阶段进行划分。

图片

以上梳理了设计详情相关的用户需求场景,再来看原设计详情只基础满足了资料管理和方案展示的2个单一场景,在设计师的整个设计流程中只占了一部分。从设计层面来看,该2个场景局限在方案设计大场景中,设计更多做的是对其方案设计操作的体验优化,在原有较好操作体验的现状下,其对给用户创造价值上没有很大增量。再从以上业务目标来看,2个单一场景很难去促使用户对内容进行分享和投稿。

 

Chapter Three .
梳理产品功能矩阵

在理清小业务的业务目标和需求场景后,下一步就是按照场景去梳理产品能力。

 

小业务功能现状分析

老版app设计详情的功能进行初步的现状分析,设计详情包含渲染、图文编辑、图片管理、投稿、分享5个主要功能。从需求场景来看,多个场景无法实现,如营销、谈单;从业务目标来看,通过当前功能有较大的优化空间,如当前投稿很难让用户知道投稿有什么价值。

图片

 

产品能力梳理

分析现状发现功能不足以支撑用户需求场景,有获取功能2个方向:

  1. 挖掘现有能力:可以扩大梳理范围,从小业务所在的上一级业务到整个平台,一级级往上梳理场景对应的现有功能。
  2. 打造新能力:围绕场景,打造出新的功能

图片

挖掘平台上现有能力,可对业务的能力价值最大化利用,与其他业务形成互通,实现1+1大于2的业务价值。亦可围绕场景打造新能力,可反推产品去发倔新功能。

以下是设计详情涉及所有场景的产品功能矩阵,从平台获取到了很多全新的能力,以及对原有的能力进行了能力拓展。

图片

 

Chapter Four .
拆解每个场景的设计目标和策略

在梳理出产品能力后,需要通过设计策略把产品能力有效组织起来,让用户快速感知快速上手使用。设计策略推导自设计目标,那如何得到设计目标?

基于用户需求场景将行为事件拆分,提炼行为事件再推导出设计目标,再基于设计目标给出设计策略。

图片

Dapp设计详情受制于移动端能力,只涉及设计详情中5个相关场景,其设计目标和设计策略的拆解结果如下

图片

拆解出设计目标后,基于目标分析产品现状得到存在的设计问题。为什么要基于目标分析现状?首先需要明确什么是问题,问题是导致目标和现状不一致的原因。只有明确了目标才可以理性分析与现状存在多少问题。在日常中时常看到设计师会直接得到问题,很多情况是默认假设了一个预设目标,但这目标得到不严谨、不全面,容易导致得到的问题本身也出现偏差。设计策略基于设计目标或问题得出,其最终都来自设计目标。

图片

对老版Dapp设计详情现状进行了分析,得到了问题:

图片

 

Chapter Five .
设计策略落地

在上一步得到设计策略后,围绕着设计策略是设计方案。本段将不全部展开说明,只选3个关键点讲述设计方案的思考

 

设计详情框架的设计

Dapp设计详情涉及5个场景的承载及产品功能繁多,设计三步思考:

第一步:简化功能认知,对功能结构化,以场景的维度重组织功能,并以场景打造功能集合的认知,建立场景能力区;

第二步:梳理场景共同涉及的内容,作为联系的载体承载场景的放置,设计详情中展示态的方案涉及到了5个场景中的4个场景;

第三步:提取场景中即时性和高优先级功能,打造快捷功能区

框架如下:

图片

建立框架后,填充具体的能力和内容。如场景入口放置于底部,并根据场景优先级做了主次的区分。

图片

设计详情框架建立后,打造细分场景中的设计。

 

营销获客场景设计

营销场景的设计,将营销组成拆分为可营销内容、营销的渠道、渠道内容展现三大类,就可以清晰去梳理出现有的功能,以及可从内容、渠道各自去拓展挖掘。内容和渠道清晰后,再传达各渠道提供的价值激励用户去触发行为。

图片

 

谈单场景设计

谈单场景关键在方案详情上,谈单面对不同情况,存在多种内容形式去展示方案。在上面内容梳理中最主要是3个内容:图文方案、全屋漫游、渲染图册。在方案详情中,头部承载了全屋漫游、图册,如图文方案过于繁琐可直接点击全屋漫游图进行讲解,亦可点击封面进入图册直接图片说明。图文详情加上了房间切换的导航,可快速切换到需要讲解的地方。

 

Chapter Six .
上线验证

上线后数据平稳后观测,设计详情的周活提升了89%,每个场景下的功能数据都得到显著的提升(tips:有部分数据因技术原因没有采集到)。除了改版了Dapp侧的设计详情,后续对PCweb侧的设计详情进行迭代,同样起到不错的结果。数据的结果验证了方法的可行,并起到了积极的效果。

图片

 

Chapter Seven .
思考小结

以上是我应用这套设计方法去做了块小业务优化,反向推动进入产品迭代,上线后取得了不错的成绩。在本次赋能后,对小业务中多了一些感悟

  • 小业务是大业务的缩影,可以作为去赋能大业务前沿验证的实验田,大概率可以快速验证自己的想法,即使方向错了因为小业务改动影响面也小
  • 因知识广度和深度的限制,不是所有设计师都可以一开始就可以把控大业务,小业务可作为打磨设计深度专业度,一些小业务的复杂度并不低于大业务
  • 该设计方法同样适用于大业务,但方法是死的,不是所有情况都套用,得需要把握重点灵活应用
  • 不要总想着搞个大新闻,在能力未被业务方认可时,小业务的赋能可以成为一个很好的发声口
  • 不要轻视小业务,有可能是你根本还不了解

以上内容,感谢阅读!

 

原文链接:酷家乐用户体验设计(公众号)

作者:小波

转载请注明:学UI网》需求太碎?设计师如何在小业务中提炼价值

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


重新设计东南亚头部在线超市的真实案例

lanlanwork


I. 发现

客户访谈

由于这位甲方的合作态度良好,所以设计师有机会与 SESA 的创始人和产品经理进行了 2-3 次会议。

借此了解了业务目标、用户需求和技术限制等关键问题:

图片

主要问题:

  • 低转化率:杂乱的界面使用户很难浏览商品。
  • 手机端体验不友好:几乎 90% 的用户是通过手机访问网站,但手机版的设计不够理想。
  • 手机端糟糕的界面和体验:目前他们使用的是现有的网站模板,根据目标用户的反馈,缺乏优化而且加载速度很慢。

客户需求

  • 一键式购物
  • 轻松的界面和体验
  • 无缝的商品搜索
  • 折扣和优惠更容易被看到
  • 使用网站时能感觉熟悉而简便

成功指标

  • 增加客单价
  • 增强人们的对品牌的认知感
  • 增加用户和订单数量
  • 无缝的体验
  • 让健康的生活方式更加受欢迎、评价、容易取得,更加有趣而美好
  • 提供并教育用户健康的生活方式,并转化为愉快美好的生活

 

目标人群

根据产品团队提供的数据,整理出了目标人群的特征:

图片

 

II. 构思

人物角色

根据以上信息,整理出了两个完全不同的人物角色:

图片图片

 

故事版

没有区分人物角色的故事版:

图片

目标用户的故事版:

图片

 

体验地图

思考分析用户旅程的五个阶段(探索网站、比较商品、确认下单、完成购买和接收配送)和用户感知的三个方面(行为、思考和感知),制作了体验地图:

图片

将当中的关键信息挑选出来:

图片

 

竞品分析

设计师找到了三家主要竞品,先大概了解他们的特色和优势:

图片图片图片

然后从 Google Play 的评论中寻找竞品的问题,这样就可以思考如何战胜他们:

图片图片

P.S. 评论分析是一种简单有效的竞品分析利器(也可以用来分析自己的产品),具体方法我之前有分享过:别总想着数据分析/用户调研,先把评论分析做了吧!

 

III. 设计

信息导航

先把大致的用户流程确定下来,这样对整个产品就有了一个整体构思:

图片

 

线框图

然后用手画出线框图,定下页面的整体布局:

图片

 

低保真

将线框图手稿用绘图软件细化,制作成低保真方案,用来向客户展示和做用户测试:

图片

图片

 

IV. 完成

可用性测试

找用户做测试时,用的是低保真可交互原型。

根据测试发现的问题,设计师直接将优化方案运用到了高保真方案上,所以下面整理的问题都用高保真方案来配图展示:

  • 1. 自动定位:测试之前用户必须手动搜索位置。
  • 2. 属性选择:由于客户想要一键式购物,所以当用户点击熟悉(通常是重量)右侧的箭头时,可以反转卡片进行详细选择。

图片

  • 3. 促销展示:原本设计了三个促销区,但是测试中发现用户面对大量的信息无法充分理解,所以移除了一部分,只保留了头图和分类优惠。

  • 4. 商品导航:为了避免用户迷路,将商品分类导航放在了所有页面顶部,并且悬停时展示子分类和相关文章。

 

高保真

图片

 

响应式

这个网站需要具备很高的响应式能力,不论在 PC 端还是手机端,都能轻松使用。

但由于 PC 端和手机端的尺寸相差太大了,所以不得不使用断点(Breakpoint)来判断用户当前处在哪个端,并展示相应的界面。

这个断点的概念在栅格系统很常用到,指的是当界面尺寸缩小或增大到某个(或几个)零界点时,间距大小或其它界面元素发生突变。

图片

上图来源:三种最主流的响应式栅格

 

这个方案的对于移动端的特殊处理包括:

  • 确保商品分类的位置,方便用户记忆
  • 使用汉堡菜单
  • 提供模仿原生 APP 的吸底导航

图片

 

Before&After

最后对比一下优化前后的方案:

图片

图片
图片
图片

图片

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》重新设计东南亚头部在线超市的真实案例

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




日历

链接

个人资料

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

存档