首页

分享3个方法,打开全球视野

ui设计分享达人

设计如果要做好,除了提升审美还有一个非常重要的点就是多看、多使用好的产品,特别是一些全球顶级大公司的产品一定要去体验,很多国内设计师受限于各种原因,无法下载国外App,没关系,今天分享一个我经常使用的工具网站,让你也能不出国门打开全球设计眼界。

设计师要拓宽眼界

我相信很多朋友在面试时候都会被问到,你常用的产品有哪些?一般问这个问题,其实面试官在考察3个方面: 

第一:你对于互联网好产品的关注度。

第二:你是否有足够好奇心去研究体验产品

第三:你的审美,美感如何?

因此作为一个设计师,必须不断去把玩使用各种APP才能让眼界打开。如果说Pin是去构建设计灵感库,那么每个人还需要有一个App图书馆,当你设计灵感枯竭时候;可以去尝试体验更多好的产品提升自己眼界,今天就分享几个小方法帮你打开全球视野。


第一个神器

https://mobbin.design/ 这个网站是我私藏多年的一个宝藏网站,里面几乎包括了目前国外最优秀的一些APP,而且不用你去商店下载就可以看见里面全部界面流程。有的APP你还得需要各种账号才可以去看见完整页面,这个网站很全,你点击进去,它把全部页面模块都已经截图好了,非常方便。 

比如我今天想看twitter某个动态卡片如何设计的,按照一般做法,我可能需要科学上网,甚至有的还需要去注册美区账号。但是在这个网站里,直接搜索就可以看见twitter的全部设计,包括各个场景截图。 

APP的全部页面状态,以及里面各种场景,按照用户的体验流程一一的截图展示。

点击后可以查看大图模式,点击旁边的列表标签,能够搜索很多列表的效果图。

点击标签后全网所有关于列表相关的设计截图,都给你找出来了,然后 你就可以找到你想要的图片,顺藤摸瓜,找到更多的APP。

同时你如果要下载到手机,点击头像即可跳到对应的APP下载页面,非常方便! 

同时搜索功能也支持很多的APP查询,比如我想看看google news的界面设计,直接搜索即可找到。 

就能查询到Google news的全部页面设计和细节,非常方便。大家可以多去这个网站试试,你会发现很多惊喜。 

第二个工具:Senstower

除了上面那个网站,还有另外一个神器工具:https://sensortower-china.com/它可以看见全球的APP排行榜,最神奇地方是可以看见各个产品的用户数,以及盈利情况。让我们可以更好的了解商业。 

详情页可以看见这个公司旗下全部产品,以及公下载用户量,每月赚的钱。非常的厉害,这个工具适合很多初创公司,当你不知道做什么项目时,可以去上面看看其他国家一些产品,找找灵感,那设计上我们又可以学什么呢? 

比如我很喜欢的一家韩国公司Nvaer,相当于中国的阿里腾讯,点击搜索后,你能很完整的看到这个公司的全部app,非常全。 

点击进去可以看见下载数。以及公司的盈利情况,以及用户对于这个产品的全部评价。 

当然也有屏幕截图,比如你是做直播的产品,那么就可以去看看这个产品的页面,做为设计参考。同样的支持APP商店下载,可以跳转到对应的APP的链接。 

经常做设计没有灵感,但是我们找竞品只能看到国内的,那么这个软件你搜索后可以 查询全球的所有APP,比如我做音乐软件,那么我搜索music出来的关键词就是全球的音乐软件排行榜。非常强大! 

同时你可以通过类别选择产品类型,是娱乐的还是音乐,以及那个国家的?他能帮我们的眼界放眼到全球,如果说上面那个工具,帮我们收集优秀截图,那么 这个网站帮我们了解很多商业思维,用户评价,以及这个公司矩阵产品。

第三个工具:producthunt

这个网站是我的最爱,所以放到最后分享,它是一个优秀产品的分享网站,https://www.producthunt.com/ ,里面基本都是一些优秀创业公司的最新产品,免费开放给所有人体验,包括产品,设计,工具,以及各种新奇好玩的趣味工具。 

比如这个网站,是谷歌的一个最新产品「谷歌照片」,你可以像故事一样发布你的照片,非常好玩。 

比如这个产品,设计师提供了几百个3D的图标网站可以供大家下载体验,全部免费。 

一键扣除背景图片和视频的工具,非常的棒,这些产品都是全球一些顶级的开发者设计出来的,给大家免费使用和评测的。我经常能在里面发现很多宝藏,也一起分享给大家!

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

文章来源:站酷   作者:我们的设计日记

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

设计沉淀录:如何让你的设计更有价值

ui设计分享达人

前言:如何让你的设计更有价值,设计有价值代表你的方案有价值,你的方案有价值代表你的理论有价值、你的理论有价值代表你的专业能力体现,归根到底,说明了什么人作出什么样的作品的同时会带来相应的价值。站在设计师的角度看,在公司里,属于站在用户体验上的提出的设计建议或者设计方案,基于“以用户为中心”理念和交互设计原则,通过自己的设计思维与专业能力,为公司创造更大的价值,不单只是一个美观的输出。

目录:

一、设计行业的发展趋势

a)设计与产品的关系

b)找到自身价值的重要性

二、了解设计师的价值分层

a)设计协同

b)推动业务增长

c)设计驱动产品

三、设计师需要具备的哪些思维?

a)双钻模型解决问题

b)“五度”设计成果评估模型

c)培养数据思维,利用数据提升设计的价值


一、设计行业的发展趋势

a)设计与产品的关系

以前,设计师在团队里的位置会比较尴尬,因为没法验证自己对业务的推动是否产生了什么明确的价值。而大数据的来临,设计的价值变得显性化,作为与用户关系密切的设计师,善用好数据,可以发挥的作用其实很大。我们可以通过自己的设计思维与专业能力,为公司创造更大的价值,不单只是一个美观的输出。这就使得设计与产品业务关系越来越密切,是整个行业发展的必然趋势。


举一个设计以小成提高业务的实例。这是我之前做的分拣软件迭代首页的自定义配置组件。在改动前分拣首页功能多,甚至有时候需要滑动寻找。寻找点击率大概是不到16%,改动后提高到了40%,不消耗任何其他人力、物力成本,就可以用设计让CTR翻倍。

设计目标:减少首页模块寻找的时间,加大成功点击率,考虑延展性发展

现有问题:主次功能混淆、视觉点不够集中、点击按钮不明显

优化方案:1、主次布局调整,主上次下;2、面积放大提高模块命中率;3、色彩区分主次按钮;4、添加“➕”自定义配置首页主功能,加入人性化设计理念。



b)找到自身价值的重要性

自身价值顾名思义就是你的工作成果会带来什么价值,按照公司更看重我们的设计能给产品的发展带来多大的价值。虽然职位的性质已经很明确你的价值的体现,但是这里注重成果的价值,设计师的成果更多是设计方案,方案成果的价值的接受度也是需要从易到难的渐进的。


举一个设计价值体现的实例。这是我之前做的新Station组件库——GM Design。设置组件和设计规范不仅保持了产品的统一性,且减少用户在使用过程中的行为认知负担,快速同事达成合作,还可以减少不必要的操作和排查,提高易用性。

设计目标:保持产品的统一性,减少认知负担,降低时间和人力成本,提高易用性

现有问题:同个功能存在组件多样、组件学习成本高、反复修改,

优化方案:1、建立组件库;2、功能类型划分,采用同一个组件的变形处理;3、组件集中化; 


二、了解设计师的价值分层

设计师的价值可以分为以下三层:设计协同、设计推动业务增长、设计驱动产品。

a)设计协同

一个完美的执行者,能够在拿到需求后高效又完美地实现落地。简单地说就是手上功夫好。

做好这个阶段需要有优秀的专业能力,良好的沟通能力,并参与到产品的探索与构思中来。


举一个设计协调的实例。Q2阶段的B-Shop商城交互迭代。前期输出设计基础和设计规范,有助于开发高效实现,实时跟进UI进度和设计协助。在产品的探索中发现数字键盘组件的问题点,由于自己写的数字组件具有局限性,导致体验上无法满足部分需求,如:输入框的定位在数字键盘之上。基于这个问题点,我们提出A/B方案,A方案是自己写的数字组件,B方案是自己写的数字组件延用原生的逻辑,从用户测试得出,A方案是更符合用户操作习惯。

设计目标:组件高效快捷输入,侧重交互体验提升,视觉优化,提高易用性

现有问题:学习成本高、缺少设计基础、信息分层不明显、体验差

优化方案:1、划分主次信息,阅读更直观;2、建立设计规范;3、组件优化,符合用户操作习惯;4、图文结合,按钮优化,加强页面指导性



b)推动业务增长

这个阶段的设计师,会比上一个阶段更能体现设计师的设计价值,并对产品产生一定的影响力。能在以用户为中心的基础上,推动业务的增长,所以这个阶段的设计也被称为UGD(User Growth Design)。


需要设计师具备用户洞见力,数据分析能力,从这两个维度出发,去熟悉业务、分析业务,从而推动业务

举一个推动业务增长的实例。Q2阶段的采购APP的交互迭代。表头的功能布局与标签栏的“➕”添加功能的调整,其实在用户调研阶段的热力图数据和观察法分析得出,工具类移动端侧重点在功能区,需要一目了然知道我的当前任务数是很重要的信息,且是高频操作,所以放置顶部;标签栏的添加功能是为了快速添加采购单据和询价为目的,用户群体特殊性,需要一键新建添加的需求。

设计目标:侧重交互体验提升,提高工作效率,提高易用性

现有问题:学习成本高、缺少设计基础、操作路径长、体验差

优化方案:1、操作路径简化,采用路径集合弹框;2、建立设计规范;3、组件优化,符合用户操作习惯;4、一键新建“➕”的功能,达到快速新建

体验连接:http://station.env-bugfix.dev.k8s.guanmai.cn/purchase_assistant/#/login(账户/密码zhangsan0001/ liuge1)



c)设计驱动产品

这个阶段的设计师,在团队中的价值可以说是非常大了。从被动的需求接收方,转化为从战略层,能主动提出需求的一方。也是UXD发展的终极方向。


三、设计师需要具备的哪些思维?

a)双钻模型解决问题

什么是双钻模型?

双钻设计模型由英国设计协会提出,该设计模型的核心是:发现正确的问题、发现正确的解决方案。一般应用在产品开发过程中的需求定义和交互设计阶段。


双钻设计模型把设计过程分成4个阶段:发现问题(挖掘)、定义问题(创意)、构思方案(制作)和交付方案(落地)。



采购APP进行双钻模型思维构建的基础,提供交互迭代的底层设计理论支持,在挖掘需求阶段,属于用户调研阶段;创意阶段,关注点在于问题梳理、实现目的、设计层面;制作阶段,寻找潜在的解决方案;落地阶段,解决方案的分析和验证,输出最适合一个。


b)“五度”设计成果评估模型

用户体验周期(由阿里巴巴UED提出概念)


用户体验周期指的是用户与产品的关系随着时间变化而形成的不同周期阶段。用户体验周期可以分为「当前」和「长远」两个阶段,每个阶段中有不同的细分。

  • 「当前」阶段,分为 3 个过程:

    • 触达:用户来访问网站,包括第一次访问网站的新用户和再一次访问网站的老用户;

    • 行动:用户在网站上进行相关操作;

    • 感知:用户在操作完成后对产品形成的主观感受。


  • 「长远」阶段:分为 2 种表现:

    • 回访:用户自己再次使用该产品;

    • 传播:用户推荐给其他人使用该产品。


如何在具体项目中体现呢?下图,运用一个具体项目举例:

c)培养数据思维,利用数据提升设计的价值

项目与需求上线后,去验证自己的设计是否有效地达成了目标。这个时候你就需要去看数据反馈。没有数据就就没有比较,没有比较就不能进步。

关于数据的用处有很多,举个例子,当两个人对各自的方案争执不休,分别觉得对方不好,但站在各自的逻辑上似乎都能说得通,那怎么办呢?分别做一个A/B测试,数据不会说谎,哪一个方案更有效,一目了然。

那么如何将数据结合到我们的设计中呢?首先在设计前,我们需要先定一个目标,而每一个目标就应有一项对应的数据指标。比如,提高了某一块的CTR(点击通过率),提高CVR(转化率),提高商品曝光、1/7/15/30日留存率等等。方便之后去验证自己的的action是否完成了自己的Goal。


拿到了数据之后,还需要分析数据。不管是有没有达到目标,都要去分析原因,进行复盘总结。复盘的好处是可以让我们在这一次项目中吸取有价值的经验—失败了就找失败的原因,方便以后避开同样的错误;成功了就分析成功的原因,并将成功的策略复制运用到今后的工作中,增加以后的成功率。如此,不管有没有成功,都能给我们带来最大化的价值。我们也会更加的接近用户、接近产品、接近业务。从而帮助我们进一步洞察用户、挖掘新的需求。


小结:

以上就是今天所要分享的全部内容。再带大家回顾一下,一共分为三部分:第一个是了解设计师的发展趋势,第二个是趋势下的设计师价值分层(设计协同、设计推动增长、设计驱动),第三个就是在价值分层的逐步递升中所需要培养的双钻模型、GSA的策略、数据增长思维等。



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

文章来源:站酷   作者:麦海欣

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

标签栏设计有哪些不易察觉的「小细节」?

ui设计分享达人


Tab Bar 


Tab Bar「标签栏」一直是UI设计师值得学习和研究的内容,因为当设计师在构建一个新的应用程序时,都可能需要搭建标签栏,建议设计师们根据实际情况去判断是否使用。

流行常见的应用程序,如Amazon、Spotify、YouTube、Pinterest、Twitter、Instagram、Snapchat,都在使用标签栏,但这并不意味着你的应用程序、你的用户是真的需要或真心喜欢。像计算器、日历等应用,就没有涉及此功能。


为什么应用程序会有标签栏?答案显然是「易于使用」。加入标签栏可以帮助用户更轻松地导航到页面,不用再特意点开菜单,选择想要浏览的页面。带有标签栏的应用程序,通常会与多个页面联动。而类似计算器这种工具性质的程序,用户可能会重复打开使用,所以其展示重点在主屏幕上,点击后直接进入功能页面。


为什么标签栏不是菜单?有些应用会使用菜单罗列页面,虽然占用的屏幕空间更少(菜单图标),但缺点是用户点击菜单进行多次跳转。为了更好地使用,设计师发明了靠近拇指的酷炫标签栏, 方便用户点击,以获得更好地导航和更轻松地冲浪体验。接下来我将为大家介绍几个应用标签栏时的小技巧:


01 展示最重要的目的地

标签栏应只包含最有用的目的地,应是被高度精简过的,避免变得混乱。许多应用程序在其标签栏上添加了搜索屏幕,这有助于更好地导航内容。结合自身程序,为用户针对性地添加一些重要的功能,提升体验。

比如Spotify的标签栏,使用了音乐播放器中常出现的几种功能:Home,主页标签用于播放或可能收听的内容;Search,搜索标签用于检索其他歌曲和播客;Library,库标签用于播放列表中用户喜欢和保存的歌曲。Premium则是结合了公司业务,帮助用户轻松完成费用支付。


02 把相似的内容放在一起

体量大的应用程序,它们更喜欢使用4-5个标签,不仅让标签栏变得整洁,还能帮助用户快速点击。如果超过5个图标,用户受拇指大小的影响会无法准确地点击。

Pinterest的标签栏虽然只有4个标签,但它在通知标签内设计了置于顶部的标签——消息选项卡,最大程度的拓展了用户在此标签内的应用。


03 如果需要,尽量使用标签

任何流行的应用程序都在使用标签,因为它们清楚地说明了当用户点击特定标签时会做什么。

Youtube和宜家这两款应用复杂程度各不相同,宜家的内容主要是家居家具,YouTube则是不同类型的视频。YouTube使用的搜索标签,与其他程序相比,也更具自己的特色。

Pinterest的标签栏相对设计的专业一些,会将标签上的文字隐藏起来。当用户习惯使用后,标签上的内容会随之隐藏,我个人非常喜欢这种设计。不过,我建议大家根据自己的选择,再去确定是否要这么做。


04 文本标签应该简短

标签栏内的标签应简短与清晰,就像设计按钮标签时一样,请使用准确的标签。TikTok的所有标签都是短标签,并且还加入了创建按钮,如果你想吸引用户的注意力,你也可以这样做。


05 避免隐藏标签栏

避免对用户隐藏标签栏,因为其包含了最重要的导航功能。大多数的应用程序都遵循了这条规则,除非有些是出于测试目的,会选择隐藏。Pinterest的标签栏在滚动浏览图像时完全隐藏,我个人猜测,是希望用户可以最大幅度的查看感兴趣的图像。


06 按顺序排列标签

按顺序排列标签非常有必要,每个应用程序都会参照清晰度和可用性这两个维度去设计。用户喜欢看到排列好的东西,而标签栏就是其中之一,大型的应用程序也基本上遵循类似的设计规则。

打开Pinterest会看到瀑布流形式的主页面,重要的内容都被呈现在了主页上。Spotify、Youtube、Pinterst、TikTok等应用程序都比较相似,将重要内容放在了主页上。个人建议大家可以参考,但最重要的是将内容井井有条地呈现,并始终如一地遵循着设计规则。


07 传达位置

标签栏帮助用户轻松导航,如果用户不知道自己的位置所在,也就无法进行有效地浏览。比如Duolingo和Headspace的标签栏,就向用户传达了其所在的准确位置。


08 从数据中学习并持续优化

如果你想改进应用内的标签栏设计,数据是关键点。你可以测试用户最喜欢的、不使用的以及需要增加的标签分别是什么。

一款成功的应用是需要持续迭代优化的,就像灵感平台Pinterest,虽然它不急于测试新事物,但却与用户建立了深深的羁绊,慢慢沉淀积累,再去提升应用程序的用户体验。


文章来源:站酷  作者:UX词典

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



无障碍设计、通用设计、包容性设计的区分

ui设计分享达人

无障碍设计、通用设计、包容性设计的区分

无障碍设计(accessible design)指设计时必须考虑残疾人,无论用户身体是否有残疾,(产品,场所和服务)都具备让其自由使用的能力。

通用性设计(universal design)采用单一的解决方案满足尽可能多的人群的需要。

包容性设计(inclusive design)是最广义的、让产品可以被不同用户(包括不同身体能力、语言、文化、性别、年龄、性取向等)使用的追求。





无障碍设计、通用设计、包容性设计似乎意思相近,在网络上很难找到完全统一的说法,因而经常被混淆。我试着找出它们之间的关系,从而对这3个设计理念进行更好的理解与区分。

一、什么是无障碍设计(accessible design)

1.简介

无障碍设计是3个术语中最容易理解的术语,它指的是设计时必须考虑残疾人,无论用户身体是否有残疾,(产品,场所和服务)都具备让其自由使用的能力。比如法律规定所有的建筑物都必须方便轮椅进出。

2.特点

(1)对象:残疾人(也有一些观点认为是针对更大的人群)

(2)解决方法与目的:通过设计让残疾人能正常使用

3.缺点

然而有时这样的设计是迫于无奈而为并缺乏人文关怀。在美国,很多时候,“无障碍设计”在设计界只不过代表《美国残障人士法案》的最低要求,不少设计师把《ADA法案》视为约束,而非创造平等共融空间的机会。因此无障碍设计存在的问题可以分为以下几点:

(1)缺少人文关怀,经常将残疾人专用的无障碍设施与健全人使用的设施分离设置,造成了使用时的隔离感;

(2)无障碍设计与其他设计产生冲突,例如在狭窄的人行道上铺设行进盲道可能造成轮椅使用的不便;

(3)一些设施或产品的应用人群过窄。



如图专为盲人设计的魔方,普通人很难使用。



二、什么是通用设计(universal design)

1.简介

通用设计最初的想法来源于建筑和室内设计,是1997 年北卡罗来纳州立大学通用设计中心对通用设计提出的一个定义,此定义一直沿用至今:“一种不需适应或特别设计,而使主流产品和服务能为尽可能多的用户所使用的设计方法和过程。”通用设计在生活中的应用很多,比如视频的字幕,就是为了听力有障碍的人群设计的,而听力正常的人也能够在嘈杂的环境下通过字幕受益。

2.特点

(1)对象:通用设计是旨在为所有设计的,它超越了无障碍设计,除了考虑残疾之外还考虑其他的因素,包括年龄、性别、种族、语言等。

(2)解决方法与目的:使用单一方案,解决尽可能多的人的需求

(3)重视设计的结果,而不是设计过程

3.缺点

因为人是复杂多样的,人身处的环境也是不断变化的,采用单一的解决方案,是难以满足所有人的需求的。通用设计旨在使用单一的方法为所有人解决问题,就不可避免的会遗漏一些人群。

如图的设计用一种方式同时方便了乘坐轮椅和提行李的人,和一些腿脚不便的老人等。



三、什么是包容性设计(inclusive design)

1.简介

包容性设计有时被视为通用设计的同义词,但是他们之间还是有明显的区别的。包容性设计是指:“不限于界面和技术的设计过程。在这个过程中,产品、服务或环境会针对有特定需求的特定人群进行优化。”它来源于数字产品设计,是对通用设计的进一步发展。

微软定义:我们的使命,是让地球上的每个人获得更多。设计的包容性开启了用户体验,反应了人们如何适应周围的环境

2.特点

(1)具有以人为本的特点,包容性设计认为是环境“残疾”,而非个体,并且切实的将所有人的需求摆在了最前面,而不是假定一个“平均值”或“规范”来限定其适用群体。

(2)给予选择,以多种方式解决不同人群的问题,以避免边缘化任何人。

(3)重视设计过程,而不是结果

3.缺点

(1)成本较高,在设计的所有阶段考虑所有人需要花费较长的时间成本与资金

(2)可能会出现一定程度的冗余设计



如图,比如支付宝的老年版设计,就是包容性设计的例子。用户可以自由的选择使用,方便了老年人的同时不影响普通人的使用。


与通用设计中的解决方案对比,这个楼梯考虑到了不同的腿部残疾者,并做出了多样性的设计。打球摔断一条腿的年轻人可以扶着扶手走下台阶,而不是走轮椅的道路。



四、总结

无障碍设计、通用设计、包容性设计,每一个设计理念都是对前一个的补充与发展,都值得理解与学习,而其中包容性设计相对较优,并更适合用于数字产品的设计。


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

文章来源:站酷  作者:o0WO0

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


淘宝不“淘”了 | 淘宝的内容设计

ui设计分享达人

文章大纲:

1. 淘宝为什么不淘了

2. 淘宝的基础内容设施

3. 淘宝没有种草经济

4. 让人逛下去的产品设计

5. 逛逛和小红书的设计区别

6. 写在最后



1. 淘宝为什么不淘了


1.1  “淘” 历史


淘宝成立于2003年5月,当时最早的slogan是:“淘你喜欢”,这句话的主体是以平台角度出发,对用户说的,意思是让用户来平台选购商品。


随后2005年,slogan变成了“淘我喜欢”,主体从平台转变成了用户,意思是让用户自主选择来平台购物。


在最近的2021年,淘宝的slogan变为了“太好逛了吧”。代表性的是淘宝app打开的启动图从玲琅满目的商品图,换成了新的slogan:


图:淘宝启动页变化


图:淘宝的slogan变化




1.2 需求的类型


淘,又有“筛选”的意思,而筛选行为是要对某具体目标进行的,不可能凭空筛选,这个目标产生的过程,就是我们常说的“用户需求”。


“用户需求”的产生一般分为两种:有目的的需求和无目的的需求。


有目的的需求:需求产生的过程有户外广告、朋友推荐等。以这种方式产生的需求,用户会带着明确目标,这时用户直接打开软件,通过搜索,直接缩小商品范围,更快触达目标商品,在这种场景下,用户明显没有“逛”的心情。


无目的的需求:当用户在没有明确目标的情况下打开软件时,用户购物意向都是比较模糊的,没有明确选择区间。此时,如何让用户产生购买欲望,是产品设计时必须要重点思考的。



图:需求产生的类型



我们都知道,淘宝最开始的定位是“淘”,主打的是以导购型社区为目标,主要解决“用户来平台需要买什么”的问题,也就是有目的的消费需求。


针对这类用户,最简单的思路就是“让用户买到想要的东西”,基于这一思路,淘宝推出了“千人千面”的算法机制。


随着淘宝算法越来越精准,用户购买越来越效率,导致很多用户对于淘宝的使用心智固定在了购物平台,而不是内容消费平台。


但是算法是有一定的滞后性的,只有在用户产生数据后才能够进行精准推荐。(这个数据可以是在淘宝平台产生的,也可以是在其他平台产生的,比如说通过搜狗输入法输入了某个商品名)


所以单纯的靠精准的算法推荐,并不能解决用户的潜在需求。



图:不同需求类型的解决方案




1.3  商家的流量成本


在淘宝店铺的运营中,有一项重要的指标叫UV价值,指的是平均每个客户在店铺的销售额,数字越高说明访客的转化率越高,转化高就代表最终的GMV会高。


而根据淘宝的数据统计,店铺粉丝级别越高,对店铺的粘性越强,UV价值也就越高。最终反映在淘宝数据上就是GMV高,既利于平台,也利于商家。


粉丝的积累需要流量,而淘宝店铺的流量来源一般分为:淘宝站内、淘宝站外,其中有包括淘宝推广、搜索竞价、淘宝客、直通车等方式,但这些流量通常是不稳定的,免费流量自不用说,付费流量的投入成本也对店铺的资金有一定要求。


所以店铺需要把这些吸引的流量,转化成店铺的粉丝。


举个例子,在很多电商平台上,店铺会有自己的引流款,这些商品不是为了毛利。只是起到为店铺引流的作用。


因为对于平台的店铺来说,持续不断且稳定的流量增长,不仅可以推动销售的稳定增长,也利于长期的发展方向。



图:淘宝流量来源




2. 淘宝的基础内容建设


2.1  内容整合成社区和去中心化


早在2015年,当时淘宝内部孵化淘宝头条,分享优质的消费类资讯内容,当时淘头条的MAU(月活跃用户)过亿。但随着视频内容的崛起,图文形式逐渐走下坡路,淘宝看准了直播带货的赛道,开始逐渐布局淘宝直播的内容形式。期间也相继加入了微淘、有好货、买家秀、好物点评团等内容形式。


但是这些内容一直分散在淘宝各个功能模块中,没有形成一个整体的社区化。



图:淘宝的内容矩阵


其中最成功的应该就属淘宝直播了,根据淘宝直播2021年度报告:2020年淘宝直播带来的GMV超过人民币4000亿元。


但是,直播的内容形式注定是以主播自上而下中心化的,用户是跟着主播走的,一旦主播下播以后,这些观众也会失去购买目标。


并且由于直播属于一对多的形式,越大的主播,观众越多,这时候主播和观众的互动率是很低的,久而久之,用户的互动积极性也会受打压。



图:以主播为中心化的淘宝直播


除了淘宝直播,近年来另一个改动比较大的应该就是微淘的出现了,在逛逛出现之前,一直占据底部栏的二号位,它的内容形式主要以店铺上新、直播、福利为主。


这也是淘宝在店铺私域流量运营上做的一次尝试,目的是为了让用户更容易和店铺产生连接。但是实际上,由于微淘的内容形式之间关联性不大,业务场景混乱,一些刚起步的商家也没有资源拓展多业务场景,导致内容质量参差不齐,影响转化。


淘宝做微淘中做内容的目的是为了让用户有东西可以逛,但是逛内容就代表着用户购买需求不明确,这又与营销场景相冲突(营销场景是为了让用户快速下单完成购买),所以微淘也一直被诟病转化率低。



图:微淘主要的三个问题




2.2  信息流时代


后来在2020年年底的时候,淘宝迎来了另一个比较大的改版,猜你喜欢变成了纵向的信息流,点击猜你喜欢进入的是一个流量的中转站。比如说点击一件衣服,下面全是衣服的推荐。


新版猜你喜欢的特点很明显,牺牲转化率,增加用户使用时长。在实际点击进入信息流中,用户总感觉下面有新的内容,这时候用户的心态普遍是浮躁的,会使用很短,甚至一两秒的时间决定是否深入了解产品。如果不喜欢,就会滑到下一个产品,无形中增加了用户在平台的停留时长。


据淘宝官方数据表示,此次猜你喜欢的大改版,淘宝用户的点击率和用户时长都提升了20%。



图:猜你喜欢改版,通过牺牲转化来提高使用时长





2.3  “逛逛”来了


逛逛是以UGC内容形式为主的种草平台,顾名思义,就是消费者在无聊的时候,可以到处逛逛。


如果说信息流是纵向的内容推荐,那么逛逛就是通过大数据,横向的推荐内容,最终向商品引流。丰富的内容为其他消费者带来沉浸式购物体验,类比线下商圈,就是逛着逛着就把东西买了。





3. 淘宝没有种草经济


3.1  从AISAS模式到SICAS模式


AISAS模型是一种用户决策分析模型,由电通公司(日本第一大广告公司)提出,是消费者行为学领域很成熟的理论模型之一。


AISAS模式将消费者从产生需求到最终完成购买的路径分成了五个阶段,既Attention(注意) - Interest(兴趣) - Search(搜索) - Action(行动) - Share(分享)。其中消费者在注意商品并产生兴趣之后的信息搜集(Search),以及产生购买行动之后的信息分享(Share),是当下互联网消费时代尤其重要的两个阶段。


搜索就是当用户对某商品产生兴趣之后,消费者会通过线上或者线下渠道来收集相关产品的信息,比如说评价、打分等。分享是在购买路径完成后,用户自发向身边人推荐商品的阶段,也就是口碑裂变,当然也有可能变成商品吐槽大会。


但是,在前文也提到了,搜索是在有明确对某个商品产生兴趣之后才会产生的动作,整个消费路径是单向进程的,缺少信息的互动与交换,用户很难有效辨别信息真伪,用户与商家依然存在信任问题,最终的购买壁垒依然存在。



图:AISAS消费模型的流程


随后,DCCI(互联网数据中心)在AISAS的基础上,提出了新的SICAS行为消费模型:


既 Sense(品牌与用户相互感知) - Interest&Interactive(产生兴趣并形成互动) -  Connect&Communicate(建立联系并交互沟通) -  Action(行动) - Share(分享)。


Sense,感知:品牌(商家) - 用户相互感知,通过多触点,在商家个用户之间建立感知,对用户来说,关注、分享、订阅、推送等,都是有效的感知行为,而商家要做的,就是想办法,通过什么样的方式或内容,让用户有效使用他们的感知行为(分享、点赞、订阅等行为)。


Interest&Interactive,产生兴趣和互动。在产生兴趣上,随着用户对传统的广告曝光和广告产生的印象的敏感度在降低,理解并响应用户的需求正在成为关键。站在用户的角度,观察用户真正想要的内容,衡量内容的指标不再是广告的传播率、曝光率,而是变成了点击率、点赞数、好评度等。


Connect&Communication,建立连接和产生沟通。在用户产生兴趣之后,通过平台提供的服务:客服,问大家,好评团等形式,完成用户信任的积累,帮助用户完成购买决策。


剩下的Action(购买行动)和Share(体验分享)与AISAS模式一样,就不展开说了。



图:SICAS消费模型的流程,以及和AISAS消费模型的区别


综上,SICAS模式前三点的核心观点是建立联系,也就是互动,这也与时下流行的种草经济不谋而合。





3.2  基于社交的种草经济


种草行为本质上是人与人之间的一种互动关系,互动天然的容易产生强关系链,而强关系也意味着情感联结和信任,最终会形成社群关系。随着越来越多拥有相同消费偏好的用户聚拢,用户消费习惯逐渐圈层化,在各垂直的消费圈层中得到身份认同感。


在这种社群氛围的烘托下,用户更容易表现出高表达欲和参与度,既用户不仅是内容的消费者,同时也会发展为内容的生产者。



图:逛逛想打造的种草生态



综上结合淘宝的问题以及消费模式的转变,我们可以得出淘宝近期疯狂改版的思路:


图:淘宝改版思路



4. 让人逛下去的产品设


在了解上述淘宝自身的问题和新消费类型带来的冲击后,可以总结淘宝最近经常改版的战略可以分为两个方向:转化的归转化,内容的归内容。



4.1 微淘升级为订阅


淘宝第一个改版是将原来的微淘升级为了订阅,并且放在首页上的tab,与推荐并列。此次改版,最大的改变就是拆分了店铺运营的内容,让不擅长做内容的商家可以专注自家的店铺运营。



图:首页专注商品转化,逛逛专注内容消费


新版订阅的精选一栏中:包括上新、买家、评测等,这些内容一起构成商家和粉丝的互动模式,吸引新客快速转粉,同时也增加了老客户的黏性。


在之前微淘的版本,用户需要点击微淘-点击店铺-点击订阅,升级后的订阅路径变成了左滑进入订阅页面-直接订阅店铺。点击直播可以直接进入直播间

更短的触达路径加上私域流量的运营,优化之前微淘转化率低的问题。



图:路径图,直接进入直播间,直接订阅店铺



图:提高直播入口权重




4.2 “买家秀”社区升级成为“逛逛”


另一个重要改版是“买家秀”社区升级成为“逛逛”,为了弱化逛逛的购物属性,强化社区氛围,逛逛在产品的商业化设计上十分克制,主要围绕引导用户进行内容消费和互动为目的进行设计。


在内容分发形式上,分为了以平台推荐为主的“发现流”和以社交关系链主导的“关注流”,更加注重内容垂直和精细化。



图:逛逛的内容分类


逛逛的发现模块与小红书类似,都属于种草型内容社区。内容主要以穿搭、彩妆等淘宝擅长的领域为主。


页面的布局形式和首页的商品流一样,以双列信息流呈现,和单列相比,一方面,给用户提供多样化的选择,承载不同的内容形式(短视频、图文),延长用户在平台的停留时长,同时也为其他内容引流,模拟更真实的线下“逛街”体验。


另一方面,和首页注重转化率的算法机制不同,影响发现流推荐算法的因素除了本身的内容质量,还会受到用户浏览行为的影响,比如浏览内容时产生的关注、收藏、点赞、评论等互动行为。



图:表现内容互动率的互动指标


逛逛相比首页推荐,去中心化的机制也更加明显,举例来说,小米官方店的号,粉丝量达到了千万级,但是内容的互动率很低,点赞评论甚至不超过个位数。


个人认为是因为品牌天然的自带营销属性,用户在看到品牌账号时,很容易形成品牌注册账号是为了卖产品给我的刻板印象。


这也反映了逛逛的流量重点落在消费者的内容上,以消费者视角为突破口,摆脱和商品相关的品牌属性,注重普通用户对商品的真实评价,而不是围绕IP账号产生的内容消费。



图:小米账号和个人账号互动率对比


在用户路径的引导上,发现页并不支持点击头像进入用户主页,只能先点击进入内容详情页然后才可以进行关注等操作,先看内容,再关注人。



图:更关注内容转化率


另外一个人关注流的动态则加强调社交关系的转化,因为是经过用户主动“关注”过后筛选出来的内容,是内容生产者和内容消费者相互选择的关系,所以在产品设计上以单列大图为展现形式,帮助用户消费内容。为了防止让用户感受到广告的营销感,产品设计上特地强调了分享、点赞、收藏、评论等按钮,弱化商品链接。


和其他的社区一样,关注信息流中也会推荐一些“你可能感兴趣的人”,但不同的是,用户无法直接关注推荐的博主,需要先“查看TA”,进入博主的个人页后才可以进行关注操作,这样的目的主要是为了让用户了解达人的领域内容之后,再决定是否关注,这样的关注更加有效,粘性更强。



图:“关注流”视觉设计的思路


“逛逛”的内容形式很好地弥补了淘宝缺乏用户导购的问题(俗称种草),依托KOL产出的优质内容,与消费者产生情感上的价值链接,创造出用户的潜在需求。




5. 逛逛和小红书的产品设计区别


这次改版之后,很多人说这是小红书。关注、发现、垂直分类栏,都和小红书很相似。



5.1 内容起家和电商起家



淘宝和小红书对内容的分发模式是不同,小红书默认分类栏处于收起状态,只有主动下拉的时候太会出现,由此可以看出小红书对自己的内容推荐还是比较有信心的,由于一开始就是做内容起家,所以对自身平台用户的喜好是有所了解的。


但是淘宝是一个电商起家的平台,在内容方面,缺乏对用户的偏好判断,所以逛逛的导航栏下方,会加入了“官方话题栏目”和“官方出品的内容”,利用精选话题引导社区内容的方向,一定程度上也可以通过话题数据了解平台用户的偏好。



图:小红书比淘宝更懂用户喜欢什么内容



5.2 内容导向不同


小红书等平台不光有购物种草,还有学习、音乐、科普等内容也相对成熟。和淘宝转型社区内容一样,小红书也在进行图文、视频向直播内容扩展的战略方向。所以我们会发现,在小红书的编辑内容上,视频和直播是强露出的,且不支持位置更换。


再来看逛逛的内容,以穿搭、彩妆为首的消费品内容,这些都是淘宝擅长的领域,容易产出优质内容,反过来说,这些内容最终也都是可以在淘宝上可以消费到的,最终还是以平台商品转化为目的。



图:内容形式对平台战略的影响




5.3  小红书互动率更高,淘宝内容消费效率更高


小红书在内容消费形式上,比逛逛更加注重互动:首页瀑布流点击进入二级的内容页后,可以直观的看到博主全部的文本简介,以及下方的用户评论内容,用户消费的不光是图文本身的内容,也是其他用户评论产生的内容,更容易产生社交关系链。


逛逛则更注重内容本身的消费效率:产品设计上使用沉浸式的下滑体验,用户点击产品图后,进入的是同系列产品的瀑布流,如果想要查看评论的话,需要点击评论icon进行二次跳转,此时用户会一直专注于内容的消费,容易忽略其他用户评价等内容。



图:提高互动率的产品设计



 6. 写在最后的一些思考


此次淘宝做内容社区的优势之处在于,淘宝将社交关系融入到了商品的消费链路中,消费者通过商品体验、测评、种草等方式,和平台产生互动,建立联系。


而淘宝最不缺的就是商品,并且拥有8亿多的消费者,和其他平台相比,更容易产生垂直领域的优质内容和专业的KOL,但是要想经营一个优质社群,除了需要一批优质的内容创造者,还需要考虑后续涌现的用户是否会对现有社群模式产生冲击。(比如知乎开放用户注册后,导致内容注水的现象)


因为淘宝本身相当于一个巨型供货方,大大缩短了带货变现的路径和难度,不同于小红书这类平台,它们最开始是没有带货模式的,常常需要通过接推广给其他商品引流来变现。


过短的变现路径必然会吸引一些用户或者机构抱着获利的心态涌入社群,这种逐利的心态,也有可能会影响专业KOL的创作心态。

文章来源:站酷   作者:抓马桥分桥

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


编写一份友好的交互说明文档要注意哪些

ui设计分享达人

最近有设计小伙伴咨询,怎么样的交互说明才是最好的,是大家都喜欢的。最近他写的交互说明文档提交给需求评审会的成员审核时,大家都建议他再写的合理些,这让他伤透了脑筋。 

我告诉他: 
第一、岗位对象不同:没有一份十全十美的交互说明可以打动所有人,让所有人为之惊叹。毕竟,由于阅读交互说明文档的对象不同,他们会对交互说明文档有不同的要求,这是岗位属性导致的结果。例如前端开发希望详细到字段、初始默认值、数据调取接口等,而领导只要看保证业务方向没有错误的大交互链路。 

第二、同岗位不同认知:同一岗位不同成员的认知、从业经历、个人喜好、性格脾性等也会导致不可能有完美适配所有人的交互说明文档。例如在一个行业已经深耕多年的前端工程师,即使你的交互说明文档写的没有那么详细,他也可以从你现有的文字中推敲出其他方面,同时还能帮你补充完善;而针对刚入行的前端工程师,你要是写的不详细,他就会抓狂,项目时间紧急的时候还会自己脑补交互细节。之后你走查时候也会抓狂,但是没用呀,谁让自己没有写明白交互细节,遗漏了呢。 

第三、使用场合不同:不同场合需要的交互说明文档也不同。例如与对方面对面沟通,交互说明文档可以少写点;但是通过线上工具与对方沟通,就需要写的尽可能详细;如果是会议型的评审,那就要方方面面都做足功课了。简单来说就像准备一份ppt:针对同一个主题的ppt,在外部演讲和在公司内部演讲,同一份ppt会需要设计两个版本,一个是内部版,一个是外部版,原因在于使用场合不同。 

第四、产品阶段不同:交互说明文档阐述的是一个产品的交互,而不是阐述其他的。如果产品所处阶段为成熟期,那往往产品的交互文档已经沉淀了很多通用法则,可以被复用,那么现在的交互说明文档少写点,问题也不大;但产品处于探索期或成长期,通常来说可复用性的交互资产是不存在的,那交互说明文档就需要准备的相对完善。 


有些设计小伙伴就说了,既然不可能满足所有人,那我就按照自己的想法随意写好了。这可不行哦,毕竟我们的主要工作有一部分是撰写交互说明文档,这就必须要有认真、严谨、专业的工作态度,把这部分工作做好。那我们来看看,编写一份友好的交互说明文档要注意哪些。 


什么是交互说明文档
交互说明文档是用来告诉参与产品研发的团队成员页面交互相关细节的一个说明文档,包括页面间的逻辑跳转、页面内模块的交互、页面功能的状态等。交互说明文档写的越详细越有利于参与产品研发各方的正确执行。 


有待改进的交互说明文档
我汇总了一些日常工作中有待改进的交互说明文档形式,看看都存在哪些问题。 

1、文字密密麻麻,无结构
几乎所有刚初入职场的设计师,在编写交互文档时,会怕自己写少了别人觉得自己不专业,怕写的不全没办法表达页面细节,导致交互文档密密麻麻都是文字,这让阅读者几乎无法阅读,找不到视觉落脚点。 


2、描述简单,不完整
有几年工作经验的设计师,由于很多通用交互法则已了然于心,他们在编写交互说明文档时就比较简单,一些交互就没有写在文档上,这导致开发在开发时,忽略了某些交互。 


3、数据太假,没有逻辑
交互稿数据没有逻辑,是很多设计师经常会出现的问题,一部分原因可能在于产品经理没有理顺产品逻辑和细节就提交设计师画图了,另一部分原因可能在于设计时间紧张,来不及对交互稿中所有的数据都做到逻辑合理。 

曾经遇到过的情况有,关联数值关联不上,表格中字段对应的值对不上,表单填写的数据和实际情况不符。 
建议大家在时间允许或有条件反推产品经理协助完善数据的情况下,尽量数据展现的真实与符合逻辑,如此有助于开发及相关阅读者高效理解。 


4、图文太远,找不到
有几次我注意到设计师提交上来的交互说明会标注“见图X"这样的文字。也就是一段说明读完了,还得去页面的某个角落寻找对应的图,这种体验非常不好。 

在交互设计原则中有一项为“足不出户”。“足不出户”的意思是指能在当前页面解决的事情,不要去其他页面;能在就近完成的事情,不要距离过远。频繁的切换和跳转会导致用户心流被打断,容易引起用户思绪中断、思考不刘畅,甚至可能对产品产生反感。 

同理,我们交互说明文档中的图文也应尽量相邻,通过一眼文字一眼图,让用户看的顺畅、舒适,理解的快速。 


5、零散,东一句西一句
东一句西一句是指交互说明文档中本该成为一体去描述的文字,被分成了好几个部分去阐述,这对看文档的人来说简直是灾难,他需要自己重新梳理交互思路,将交互规则串联起来。 


我们自己在编写交互说明文档时,尽量规避上述常见的问题。 


什么是好的交互说明文档
对于什么是好的交互说明文档,网上一搜一大把,这里我根据自己的经验,和大家分享下什么是好的交互说明文档。 

首先我们来明确下,什么是好,有了好的标准以后,再来谈谈如何做到好。 

1、什么是好
通常情况下,交互文档会给产品经理看,用来评审设计方案是否满足需求;给视觉设计师看,用来指导视觉方案的呈现;给前后端开发人员看,用来指导开发逻辑;给测试工程师看,用来协助测试编写测试用例。基于此,好的交互说明文档关系着设计方案是否可被最大程度的实现。并且如果交互文档文字冗长、逻辑不清晰,不仅看的人吃力,还会需要增加额外的时间来和开发工程师沟通。好的交互文档,我认为至少需要具备以下7点: 
(1)明确价值 
(2)考虑全面 
(3)通俗易懂 
(4)结构清晰 
(5)图文并茂 
(6)仅此一份 
(7)修订记录 

2、如何做到好
为了让大家一边学习一遍实践,我使用“表单校验”的交互案例给大家进行讲解。 

(1)明确价值
能协助项目成员通过文档更顺利地完成工作任务,能帮助用户解决问题,能达成产品目标,则是好的交互说明文档。文档对各方有价值,是一份好的交互说明文档的起点。那么,如何编写才能达到上述结果呢? 

一方面是将此次文档的价值写清楚,包括写明此次交互设计的背景与需求来源、需求清单,标明交互设计的理论依据,可以给用户带来的价值等。另一方面要和成员宣导这些内容,让成员感受自己要做的工作是有价值的。 

“表单校验”上场: 


(2)考虑全面
抛开文档阅读对象等相关影响因素,通常来说交互需要考虑到以下几方面: 

a、整体交互流程
整体交互流程是指产品页面与页面之间的交互逻辑。 

b、页面模块交互说明
页面模块交互说明是指模块自身的交互说明,或同页面内独立模块之间的交互逻辑,或不同页面模块之间的交互逻辑。例如点击导航树节点会联动右侧表格内容刷新;点击banner跳转到对应的商品详情页,且定位到页面1/2位置。 

c、页面功能交互说明
页面功能交互说明是指单个功能的各种情况阐述。例如搜索框内输入文字,通过enter触发对应页面跳转。 

d、尽量真实的数据展示
虽然是交互说明,我们也尽量做到模拟真实数据,否则很容易让阅读者产生错误判断。并不是所有人都会一字一句的去阅读文档,因此,尽量真实的数据,有利于阅读者更有效的了解。 

e、特殊情况额外补充说明
很多情况下,会因为某些原因出现极端交互情况,此时也需要补充完整。 

f、通用交互一处即可
建议交互团队为产品建立通用型交互说明库,遇到类似的情况,直接调取即可。 

实际上我们在编写交互说明的时候,不太会分得那么细,很多说明是混合在一起表达的。 

“表单校验”上场: 

(3)通俗易懂
通俗易懂是指要让文字、语言、图片等做到让受众易于理解和感知,从而在信息传递过程中尽量少的出现损耗,这一点同时也与人类的理解能力有关。 

百度百科是这么解释理解能力的: 

“理解能力是指一个人对事物乃至对知识的理解的一种记忆能力。 
理解,有三级水平: 
低级水平的理解是指:知觉水平的理解,就是能辨认和识别对象,并且能对对象命名,知道它“是什么”; 
中级水平的理解是:在知觉水平理解的基础上,对事物的本质与内在联系的揭露,主要表现为能够理解概念、原理和法则的内涵,知道它是“怎么样”; 
高级水平的理解属于间接理解,是指:在概念理解的基础上,进一步达到系统化和具体化,重新建立或者调整认知结构,达到知识的融会贯通,并使知识得到广泛的迁移,知道它是“为什么”。” 

当我们了解了人类的理解能力水平是参差不齐后,我们就要尽量在工作中将专业知识化繁为简(也可以针对人群化繁为简),增强沟通效果,最终达到完成团队目标的结果。 

交互文档尽量做到讲人话,不要讲一堆专业术语。记得之前有个交互设计师在会议上阐述自己的交互方案时,提到用了“提供邀请”原则。由于与会成员是开发工程师和产品经理,他们问到什么是“提供邀请”原则,并且在这个问题上大家讨论了很久。 

由此可见,表达通俗易懂,是很必要的。 


(4)结构清晰
交互说明文档除了要表达通俗易懂外,还需要结构清晰。 

结构清晰的内容不仅使阅读者一目了然、理解成本低,还可以让阅读者了解撰写者的意图。要做到文档结构清晰,除了需要遵守一些规则外,也不能脱离当前文档的实际情况。 

“表单校验”上场(把文字进行分段处理,并取出关键词): 
(5)图文并茂
图片和文字相得益彰可以加深阅读者对文字的理解,同时避免阅读者去想象文字对应的结果。由于人们对同一段文字的理解不完全相同,因此建议设计师尽量安排交互说明对应图解。 

“表单校验”上场(左图右文): 
(6)仅此一份
仅此一份是说交付给团队交互说明文档的时候不要多份。之前我们的前端小伙伴拿到了两份交互文档,一份是纯原型交互文档,一份是视觉稿交互文档,两者描述的信息大同小异。此时,建议交互文档的信息做合并,只提交一份完整的给前端小伙伴,让前端小伙伴能专心致志理解一份。 


(7)修订记录
建议交互说明文档留存修订记录,一方面可以了解交互文档的变更历史,另一方面有利于回溯和查找信息。修订记录一般包括修订人、修订时间和修订内容。 


总结
由于项目进度、业务复杂程度等不同,我们不可能每次都能写出一份最好的交互说明文档,但我们可以想办法写出一份相对可读性高、可理解性高的友好的交互说明文档。我们常说自己是做用户体验的,那交互说明文档就是体现我们交互能力一个方面。 

除了完成交互说明文档,想要让开发小伙伴真正理解交互说明,还需亲自和开发沟通,千万不要认为我写的很详细了,他怎么还是实现的有偏差。事实上,就如开篇所说:同一岗位不同人的认知理解、从业经历、个人喜好、性格脾性等也会导致理解不同。特别是对于一些我们非常创新的、特殊的交互点,需要重点和开发说明。 

并且,交互说明文档基于业务的发展,也会不断的迭代,我们要抱着多听、多想、多思考、多接受的态度去不断优化我们的文档,尽力写出一份友好的交互说明文档。 

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

文章来源:站酷   作者:
知果日记

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


如何自定义栅格系统

ui设计分享达人


栅格系统(grid systems)

规则的网格阵列来指导和规范网页中的版面布局以及信息分布。


基本原理

在网页设计中,把宽度为“W”的页面分割成n个网格单元“a”,每个单元与单元之间的间隙设为“i”,把“a+i”定义“A”。他们之间的关系如下:

W =(a×n)+(n-1)i

由于a+i=A,

可得:(A×n) – i = W

我们通常把a称为“柱”,对应代码中的Column;i称为“水槽”,对应代码中的Gutter;a+i=A称为“列”

设计栅格系统,本质就是定义a,i,n的数值。

UI设计中有一个通用做法,就是元素的宽度尽量是8的倍数,基于今天的大多数的网页设计,画板宽度都为1440px ,此时我们将a=24,i=24,n=24,这是一组简单美妙的数值,可算得W=(24x24)+23x24=47x24=1128px;将栅格居中于画板(偏置156px),此时的栅格系统如下:

1128栅格系统:

得到的这个栅格布局被广泛使用,比如站酷网首页:



观察计算公式W=1128=47x24=(24+23)x24,这里的47不是8的倍数,我们容易想到把它变成48,

将a=25,i=24,n=24,算得W=(24x24)+(25-1)x24=48x24=1152px;此时的栅格系统如下:

1152栅格系统:

这个栅格系统的美感在于,宽度W=48x24=1152px,两边的留白为画板1440px宽度的1/10等于144px。Ant Dseign中运用了此栅格:

以上两个栅格布局都是24栅格系统,使用24栅格系统的好处是,它可以轻松实现2等分、3等分、4等分、6等分、8等分、12等分,也可以进行1:2:1、   1:3:2、   1:2、 1:3  等不对称分割的布局。


除了最常见的24栅格布局外,也可进行36栅格布局,例如:

a=16,i=16,n=36,W=(16x36)+16x(36-1)=16x(36+35)=1136

1136栅格系统:

a=26,i=24,n=24,W=(26x24)+24x23=24x49=1176px

例如腾讯文档:

1176栅格系统:

“厂”型布局网页的栅格布局:

以上的网页布局都是瀑布式布局,在许多应用型网站中,常使用“厂”字布局,对于“厂”布局的网页,该如何设计合适的栅格系统呢?

我们可以先确定左侧菜单栏的宽度,例如飞书管理后台中左侧菜单栏的宽度为228px,在拉动浏览器时,这部分通常是不动的,再确定主体内容去和左侧菜单栏间的间隙,比如12px。

此时可以计算W=1440-228-12x2=1188。

使用24栅格系统时,12a+11i=1188,方程中有两个未知数,我们设定其中一个时,就可计算出另一个。另i=12,解

W =(a×n)+(n-1)i

1188=(ax24)+23x12

a=38

是帮助,而非限制

对开发者而言栅格是实现动态布局的手段,而设计师对于栅格的理解源自平面设计中的栅格,不应把栅格系统当成一种限制,而是帮助,也不用总是担心元素超出栅格。


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

文章来源:站酷   作者:
隔岸吃瓜

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。

如何提高设计还原质量和验收效率?

ui设计分享达人

前言

最近我们产品做了一次全新改版的项目。作为此次项目的设计师,从项目的前期分析、设计、交付开发、验收上线,整个流程,在项目走查验收阶段我们设计师投入了30人/天!在我们觉得应该设计投入最少的阶段,却占了我们大量的工作 且最后还原度也远不达预期。


在这个项目中我遇到了哪些问题:

还原问题不单单是设计师把设计稿做的多精准,标注的多仔细,这么简单就能解决的。是设计和开发,团队之间的合作共识问题。我把整个和开发对接工作分为前中后三个阶段,在这里从头来梳理一下,聊一聊设计师和开发如何高效对接,也是对自己的一次复盘总结。



一、评审/排期


1.1、设计师对还原的要求宣讲


在评审环节,设计师本人一定要将自己的设计稿进行宣讲、帮助开发理解。注意给技术讲述一些适配要求、设计规范、交互状态及动效等,同时解答技术同学的一些疑问,这样就能将一些可预见的问题解决掉,解决后期的沟通成本。

有一些地方有多种实现方式,如果前期没有跟开发沟通清楚,就会导致最终实现的效果存在误差,比如:下方这个tab项,单给一张图,开发根本不知道设计师想要的实现方式是什么,固定间距还是固定菜单宽度,还是每项平分宽度,最后很大可能就会按照自己的理解去做了,导致出现重复返工的现象。



再比如一些点击热区,如果不手动标明,有可能就做的很小

下图是我们手动标注的热区



1.2、实际开发者要参与评审

每个开发负责的具体页面模块不一样,别人对具体了解程度也不会不一致,所以在评审会议上,一定要具体开发者在场,如果对应开发没有发表意见,设计师可询问,确保他已经理解需求。



1.3、开发充分评估还原工作问题

设计师在讲解自己的要求后,开发也要及时反馈是否有还原困难,如:是否有技术限制?是否有组件改动困难(牵一发而动全身)?实现成本过高(投入产出的性价比不够)?等意见和原因,设计师也可抛出之前是否遇到过类似的阻碍,帮助开发去了解。



1.4、认真记会议纪要


评审过程的问题和重要讲解点,一定要记录下来,会议中开发提出的一些问题及解决方案、或者没有达成共识的地方,记录下来等领导决策,在会议结束后以邮件形式、或wiki文档发送前端们,抄送产品,确保会议内容的传达到位。后面也好跟踪。


还有一点就是,我们之前遇到的情况,在宣讲会上 讲解的一些要求,开发在做的时候可能就忘记了,让开发改他认为设计没有明确要求、会有点难推动,就会搞得双方都有抱怨。有会议记录也可避免此类情况发生




二、开发阶段


2.1、还原有问题及时反馈

在前面我们做了详尽的沟通和评审,但有时也避免不了在开发过程有些问题才发现暴露。这个就需要开发同学能重视还原问题,积极沟通反馈,和设计确认商议 是否有其它可替代方案,切勿自己发挥,等到后期验收的时候才说出问题可能会影响进度


2.2、开发完成后对齐设计稿自查

开发者在完成自己负责的模块界面时,可自己对齐设计稿自查一遍,参考【3.1验收标准】的表格,可帮助判断问题,在此阶段也可发给设计者确认效果。


三、验收阶段



3.1、测试同学确保交互和视觉还原度至少在70%左右


这里可以提前在项目排期阶段,设计师将所需的验收工时同步给技术和测试,将验收时间考虑进去

为什么要求测试同学保证还原度至少在70%呢?

因为如果不要求测试走查还原度,设计验收的时候就会有大量的问题,最后变成设计在测试界面而不是验收。设计师不像测试对整个流程的测试配置那么熟悉方便,反复验收需要测试和设计不断配合,双方的工作量都会加大。


理想的状态应该是测试整个流程走通,视觉和交互还原问题也要着重测试,设计和产品在测试没什么大问题后再进行验收。


参考【验收标准】的表格,可帮助判断还原问题



3.2、明确知道模块的开发者

最好是提前知道模块的开发者,这样验收的时候一对一进行模块的打版验收效率更高


3.3、设计走查问题标注优先级

技术对功能上的BUG,可以自己很好的判断哪些是严重的紧急的,但对于视觉和交互层面的感知就比较低。在提问题单的时候,我们可以帮他标注出优先级,告知开发哪些是比较严重的需要优先修改的,不然 开发自己很难判断,可能就会挑一些比较好改的先改了,重要的问题反而被搁置了。尤其在项目时间比较紧张的时候,有优先级标注 开发能够看出哪些是可以为项目进度做出妥协的,哪些是必须要修改的。



3.4、BUG单

设计提BUG单的不能简单的说这里出错了,请参考设计标注重新调整。要直接给出正确的尺寸、增多少、减多少、这样可帮助技术提高更高效率,也能避免开发自己去看又出现误差、又要返工修改。



3.5、遗留问题有记录



四、结语

设计师在验收过程中容易遇到的一个比较头疼的问题就是,技术和产品小伙伴可能因为项目上线时间紧,觉得视觉还原和页面交互体验上的问题不重要不给予修改,优先保障功能上线。

除了这些原因,设计侧也在检讨总结,自己有哪些做的不足的地方,所以 以上文档也是对接下来工作的优化方案。设计还原度也是日常考核之一,需要大家重视,好的产品要严格把控精心打磨,希望这次的总结、相关流程和经验,在接下来工作中能够提升设计验收效率和还原度。

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

文章来源:站酷   作者:
飞行的考拉

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

如何让你的设计更具有说服力?

ui设计分享达人

对于一家做项目型的公司而言(今天主要讲的是项目性质的设计工作,产品可以绕道哦),时间就是成本这句话体现的淋漓尽致。基本上给到UI设计的时间,是少之又少,那么如何在一个有限的时间里,设计出优秀的作品呢?这是接下来我想跟大家一起讨论的~


我们都知道用户体验五要素(战略层、范围层、结构层、框架层、表现层),这五大点是一个个递进的过程,是一个从初步的想法到最后落地的过程。也就是说我们最后看到的表现层(UI界面)是如何做出来的,都需要靠前面一点点的去研究、细化、分析。所以这么一个强大而繁琐的过程,我们如何要在一个有限的时间内去完成,下面跟大家聊一聊我在实际工作中的例子。


一、沟通


沟通是一切事物的前提和基础,这个沟通一定是要跟客户的直接沟通,不管是远程还是面对面也好。中间人的传达会加上个人思想理解的转化,到你这里就不再是一手消息,也许就不会那么准确。拿到一个项目之后,我们要了解项目,所以需要对项目的背景、目标用户、产品目标、核心竞争力进行分别分析。


项目背景

为什么设计师的背后总是有一群指点江山的人,因为我们的设计没有被体现在产品上,只是表层,每次给别人解释设计理念的时候总是说“我觉得这样好看”、“我认为这块应该用这个颜色”,却没有说出这个项目本身想要表达的是一个什么理念。

本次项目是需要把手机版的内容改版成PC端,原有需求逻辑不变。那么问题来了,现在是一个移动互联网的天下,为什么客户却需要将手机端的内容移到PC上呢?因为这个产品的使用环境之一就是在工作中,试想一下,工作中一直拿着手机刷来刷去,不知道的人还以为你在划水。考虑到用户使用环境的因素,就需要有PC端的设计。


目标用户

产品的核心是用户。所以一切要从用户的角度出发,做用户满意的产品。在用户调研这块,常见的用户分析有:用户画像、一对一访谈、问卷调查、焦点小组、眼动测试、测评以及埋点数据分析,但是项目型工作周期短,时间紧,没有那么多的成本去做大量的分析,所以我们基本上采用三种方式去解决这个问题。1、与我们的客户(甲方)去沟通,他们肯定更了解自己的用户群体;2、通过现在市场上比较知名的网站(艾瑞网)中提供的大数据分析出的结果;3、如果身边有这种用户群体可以对他们进行简单访谈。通过以上三种办法也是可以得到一个较为准确的调研数据的。

在跟客户的沟通中了解到,我们的主要用户是基中层领导,目的为提升领导力。下面会有我对这部分人群的用户画像分析。


项目目标

知己知彼,要了解我们此次设计的主要目的是什么?需要解决什么问题?

因为这已经是一个已经上线一年的产品,我在跟客户的沟通中很明确了目前有两大问题:第一是:如何提高完成率;第二是:国外市场用户使用不习惯。

这两个信息很重要,为后面的设计提供了一个明确的方向。



核心竞争力

这是体现我们产品优势的地方,我们需要尽量的把产品强有力的能力展现出来,从而获得目标用户的信赖。把产品的能力、优势,可以给用户带来的价值,要体现在比价明显一些的地方。

此次是一个本身有强大的体系支撑,有一个成熟的结构,在此基础上开发研制的一套产品,所以产品的目标用户量,获得的成就就可以直接展示在首页上,并且把正在学习人数或者为多少人带来成就都体现出来。让用户感受到有这么多人都在努力,有这么多努力的人已经完成了自己的目标。


二、分析


我首先把手机版的功能都体验了一遍,随时记录了在使用过程中不喜欢的地方并且可以优化的点,这都是点点滴滴的随记,可以为后面设计中提供一些方向或灵感。根据上面了解到的信息。

可以得到此次设计的主要方向,第一:针对目标用户进行用户画像分析,以此来确定如何才能更好的提升完成率;第二:针对国外同类产品分析,对国外市场用户使用不习惯的了解,并且还要结合国内市场优化交互体验。


用户画像分析

在上面一个阶段了解到我们的用户群体是基中层领导者。根据市场数据分析,一般基中层领导者主要以男性居多,年龄大概在28-35岁之间,以需要提升领导力为目的,那么从这几个特征中我们看出,这些人都有哪些特点呢?首先28-35岁的年龄段,基本上是已经结婚的比较多,并且有很大一部分人群也有了孩子,这个年龄段的孩子还比较小,基本也是在2-6岁之间较多。对于这种类型家庭而言,无论是在工作上还是生活上都较为忙碌。并且因为是领导者的原因,时间上也较为分散,一天下来没有办法集中去做一件事情,开会、汇报、沟通需求、分布任务等。由于不像在学校,事情太多也太杂,很多时候没有办法安心去做一件事情,导致规划能力不强,需要借助平台可以有个推力。



国外同类产品分析

其次是针对国外市场用户使用不习惯这个问题,我对国外几个大型的相关网站做了了解。edX、Coursera、Udacity这三个网站是国外市场使用较多,知名度较大的几个网站。分别从内容上和视觉上进行分析,去了解国外市场的设计方式,用户使用习惯等。



从以上的分析中最终得出了以下三个结论:

1、操作习惯:这个与国内的差不多,都是从上到下,从左到右呈Z字形排列布局的方式,视觉的落脚点都会在画面的左上方,所以我们在设计的时候,要把重要或者想要表达的内容放在这个位置,使用户进入页面后就可以很快看到它。

2、采用Complexion Reduction设计语言:将标题放大,制造视觉上的冲击力,拉开页面的层级关系,这种设计方式也是国外较喜欢、较常用的一种设计方式。

3、视觉风格:国外网站的设计整体留白较多,让页面更有呼吸感,页面上几乎没有无用的装饰性元素,非常简洁,颜色使用也比较简单,不会用过多的颜色去扰乱用户,简单的设计对于教育类的行业来说,可以减少视觉疲劳,让眼睛放在有用的事物上去。



通过以上对用户画像和国外同类产品分析,总结出:我们要从多维度考虑,以优化交互为目的让页面更有层次感,从而给用户带来轻松的体验感。是这次设计的核心思想。

1、从用户的时间分散且忙碌的特点,得到我们需要尽量优化交互逻辑,减少用户学习成本,让用户可以快速找到自己想要的东西;并且要让用户在本身就较为忙碌的情况下尽量轻松的学习,不要再给用户增加压力。

2、通过用户规划能力不够强的特点,得到我们可以给用户定制一个“学习计划”,帮助用户规划自己的学习能力,并且在学习中增加互动性,比如随堂笔记、收藏、标记这种小功能,随时给用户带来互动,让用户更有参与感。

3、从国外同类产品分析中总结出,整体国外市场的喜好是简洁、少装饰、以大面积留白来增加页面的呼吸感,采用尽量简单的卡片式的设计方式来拉开页面的层级关系。




三、设计


现在就到了设计阶段了,上面了解分析了那么多,给我们设计提供了那么多基础材料,这个时候就派上了用场。上面的最后提到说:我们要从维度考虑,以优化交互为目的让页面更有层次感,从而给用户带来轻松的体验感。接下来我就要讲述,如何在设计去运用了。


轻松-这个很重要。

如何让用户在生活和工作那么繁忙的情况下,还要努力的去学习,努力的提升自己呢?所以我们这里就采用插画的形式,插画像是动画片,让我们回到了小时候,并且融入了AI人机对话,沉浸式的体验更是可以让用户在一个轻松的氛围内完成自己的学习。


增加互动性

原有手机端的功能缺少与用户之间的互动,看视频就是看视频,做题就是做题。让用户在使用的时候不能按照自己的意愿去支配,这种感觉不好,一定要让用户有参与感,让用户占到主导性,而不是那么强硬的让用户跟着你走。所以在课程这块的设计上第一采用了全屏的方式,让用户不用返回,在当前就完成本阶段的所有的课程,增加效率。第二在原有的功能上增加“课堂笔记”、“收藏”和“学习计划”等一些小功能,让用户随时按照自己的意愿去学习,实时跟产品进行互动。



层次感的表达

教育类型的网站,页面相对来说比较干净、整洁一些,可以有效减少用户视觉疲劳,避免不必要的干扰元素出现影响用户的体验。

在本次的设计中,学习了国外同类网站的设计风格,采用卡片式的方式,将元素与标题包裹在一起,有效与其他元素进行区分,增加投影设计,让页面更加有层次感和空间感。标题上面采用了Complexion Reduction的设计语言,将标题放大,制造视觉上的冲击力,拉开元素之间的层级关系,丰富页面的设计。这也是国外网站较喜欢的一种设计方式。





四、走查


设计完成之后,切图交到开发手里之后,不能算就完成了,最后走查这一步很重要,要保证实现出来的效果跟设计稿保持一致。不然前面说的再多,设计的再炫都是白搭,实际使用的用户可不知道你前面都做了什么,他只感受他现在感受到的。

我一般的方法是用Word的方式,将有问题的页面截图并标记出来问题点,并且按照菜单进行分类。这样开发对照看起来就特别明确,只用文字不配图的表达都是耍流氓,谁知道你说的是哪个页面的哪个点。用Word进行归类最重要后面追踪也特别容易,可以很明确看到你哪块问题还没有修改,不用再反复提交。



总结一下:

一般我的设计流程就是:了解-分析-设计-走查,因为不是产品性质的,所以最后的迭代或者验证这一步骤就会不那么重要,如果是做产品型的后面的验证也会是非常重要,因为是项目型的所以这里就不多做说明。以上就是我个人在设计中的案例分析,大家有想法的可以多沟通,多交流。

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



文章来源:站酷   作者:酱油不咸

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



设计模式|合理预设:如何为用户提前设置好默认值

ui设计分享达人



What 是什么

「合理预设」是指系统提供默认选项,这些默认选项不需要用户做任何操作,可以节省用户完成表单的时间和精力。

这些默认选项来的数据源包括: 先前输入的会话数据、来自用户帐户的信息、当前位置、当前数据和时间等等。


案例 钉钉的“代办事项”设置功能,可以自动抓取到语句中的时间信息,自动帮助用户默认填写时间,减少用户的操作时长:

相关模式 :语句填空


Why 为什么

系统通过提供合理的默认信息和答案,分担了用户思考和输入信息的工作,减少时间,提高效率。

而就算预设信息不是用户想要的,也为用户提供了一个示例来说明答案应该是什么样子的。这一点也可以节约用户几秒的思考时间,或者避免输入错误的信息。


另外,合理的默认值还可以帮助用户应对一些“难题”。如果用户跳过了一块字段,那么可能是这个问题没有引起他的注意。用户可能是不理解这个问题、或是默认值的含义。输入答案,选择值,或单击按钮的动作会迫使用户有意识地面对这个问题。


比如疫情期间,大部分公司都需要做健康打卡,下图中有一些选项是直接填了默认值,但是有些就没有填。比如下图的左图中,有关于“请假未到岗”这些问题,因为没有填默认值,用户就会对这个问题有印象。然后比如“今日是否有发热症状”,“是否有咳嗽”这些,因为被系统默认填了,用户很容易就忽略过去了。

所以一些刻意希望被关注的问题,其实最好不要提供预设值,这样可以让用户感知到这个重要信息的存在,进而加深对内容的认知。



When 什么时候使用

当产品要求用户提供类似表单的信息输入(例如文本框或单选按钮),并希望减少用户填写时长时,可以使用提供默认设置。


但是当问题的答案会很敏感或是与政治相关时,最好不要提供默认值,例如密码、性别或公民身份等。最好也不要为用户擅自订阅非必要的内容信息,如“请给我发送广告邮件”等。


使用条件

· 用户需要做类似表单的信息输入操作;

· 系统希望减少用户需要做的工作;

· 系统希望确保用户填写的准确性和一致性;

· 可能用户并不知道或者不关心答案,不需要引起用户的重视;

· 问题的答案不属于敏感信息或是与政治无关。


How 如何使用

设定「合理预设」有两种普遍的用法:

1、使用一个通用的、常识性的、满足大部分用户需求的默认值,预先填写输入框;

2、可以调用用户早些时候提供给系统的信息来动态地设置默认值。例如,某个用户提供了一个中国的邮政编码,系统可以从这个编码推导出用户所在的省,甚至市和区的名称。


除此之外要注意几点应用原则:

· 使用预设的默认值不仅仅是为了防止用户留下空白的输入区域;

· 要充分的了解你的用户,默认值的设定要有绝对合理的理由 —— 否则,系统会给所有人带来额外的工作量。


Example 案例

案例一:唯品会小程序在购买服饰类选择 SKU

用户需求:购买服装时需要选择尺码


唯品会小程序在购买服饰类选择 SKU 时,每个尺码点击后会显示对应的衣服参数,用户不再需要去商品描述中的尺码表格中再找,也可以是设置好自己的身材数据,平台会默认选中适合你的尺码。

案例二:蚂蚁链实人认证表单

用户需求:需要根据表单内容填写和上传文件

蚂蚁链实人认证在上传证件时会根据用户所在国家和地区,帮助用户默认选择概率最大的选项,不需要用户自己操作。

案例三:Photoshop 创建新文件

用户需求:创建新文件,调整画布大小

在 Photoshop CC 中创建新的图像文件时,默认情况下会从操作系统剪切板开始。这里的假设是用户刚刚创建了一个屏幕截图,并且正在编辑该图像。因此,Photoshop 在剪贴板中获取图像的宽度和高度,并使用它们来预先填充创建新文件的尺寸,这是一种节省时间的聪明方法。不用担心图像和画布会有尺寸不匹配的情况。


当用户想要调整画布大小时,原先画布的长宽尺寸会预设出现在新的画布大小里面,方便用户进一步进行尺寸调整。


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



文章来源:站酷    作者:Ant_Design

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



日历

链接

个人资料

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

存档