首页

未来感设计汽车大盘点(上)

ui设计分享达人

在灵笼中,白月奎开着奥迪在满是噬极兽的世界驰骋。小伙伴们也惊呼连连。其实,这是一款名为AI trail的奥迪概念车已经被生产,预计2030年上市,那现实中是什么样的呢?接下来,就从奥迪开始,为大家盘点未来感的汽车是什么样子的吧。

1.奥迪AI trail 

这也是一辆纯粹的SUV。它有四个电动马达,每个轴距上有一个,这使它具有四轮驱动能力,它在公路上的最高速度为每小时81英里,越野范围为155英里。它的轮胎压力可以根据地形,在移动中调整。

         

奥迪 AI trail外观


当你坐在里面,它会给出一个令人难以置信的宽广的观察范围,她甚至可以让你看到轮胎。因为里面有足够的空间,甚至没有任何多余的显示器,它是完全由你的手机进行控制的。

把手机作为屏幕,从而达到更广阔的视野


你可能已经注意到没有大灯,但这是因为它用于照明的灯被安装在自主的无人机上,这些无人机会在前面飞行,为你照亮道路。当你在光线不好的环境野营时,你可以通过折叠无人机,手电筒等照明设备。

无人机搭载照明灯


充当照明设备的无人机


2.雷诺EZ-Go 

雷诺在2018年发布了他们的电子出租车概念车easy go,同样计划在2030年面世。其设计理念是:在未来,汽车的所有权已经不在是一种趋势,当我们需要旅行时,我们只需预约一辆自动驾驶的汽车。雷诺高层表示,网约车和共享移动服务将会是雷诺的主要发展方向。当你来到一个陌生的场景,你可以透过360的窗户来欣赏沿途的风景。进入内部,内部空间可容纳六名乘客,呈U型排列车顶从前面打开,提供存储空间。并且它还有四轮转向功能,意味着它可以在城市间轻松穿梭。当然,作为更明显的旅途用车,它的车速最高限制在50m/h。对于行动不方便的乘客,它有一个可伸缩的斜坡,当你需要下车是,将自动伸向路边,让乘客可以更加方便的进出。

在城市穿梭的ES-Go


通过显示器可以看到基本信息


汽车内饰


undefined方便进出的设计


3.terrafugia tf-x

相信小伙伴们多少在科幻电影当中看到“会飞的汽车”,我在小的时候看过一个电影《第五元素》,依稀记得家里的七大姑八大姨,嗑着瓜子,坐在炕头,讨论着“我们有没有机会坐上这样的汽车”。这部这款汽车可能在不久的将来将会满足大家的远景。

电影《第五元素》


如果你正在寻找未来的汽车是什么样子的,那么 terrafugia tf-x就是我们我们理想的设计。这款汽车售价 28 万美元起,折合人民币约为190万左右。它拥有一双可折叠的螺旋桨,隐藏在车机两侧。

                                

TF-X外观                                                                              展开双翼的TF-X


这款汽车很快就由波士顿的设计公司开发出来了,这款概念车比它最初看起来的空间要大得多,它是插电式混合动力,能够实现全自动飞行,在紧急状态下可以手控或者遥控。在动力系统上采用插电式混合动力传动系统,有两个600制动马力的电机和一个33制动马力的燃料发动机,电脑自动控制,拥有有四个座位,可垂直起降空中续航可达640 公里,最高时速为 185 公里/小时,但是它在路上的最高速度或它的范围还没有被公司宣布,即它可以飞到可伸缩的翅膀上折叠出一个连接的螺旋桨的事实。

与此同时,各国的航空当局也在讨论和协商制定管理这一新兴交通业的政策和安全标准。如果未来将会普及飞行汽车,那么开上飞行汽车是否需要飞行驾照?人们是否会花费超过100万RMB来购买?

正在倒车的Terrafugia TF-X


飞行中的Terrafugia TF-X


4.雪铁龙19_19

雪铁龙1919确实是一款具有未来设计感的汽车,它的目的是要做到其舒适性已优先于其他每一个元素,它的设计理念是未来航空工业。结合前挡风和立体化的玻璃覆盖,上半部分更像一个漂浮的太空舱。

undefined

雪铁龙19-19外观


它在车顶后部安装了激光雷达探头,主要用于在长距离行驶时的自动化驾驶。 它的踏板和方向盘,是可以伸缩的。但当驾驶者想自己驾驶时,踏板会降到合适的位置,方向盘会展开。当用户不想驾驶的时候,方向盘会自动缩回,智能音箱自动升起,几乎像一个潜望镜一样,帮助用户实时检测驾驶情况,并且把信息显示在挡风玻璃上。undefined

自动驾驶模式,信息在挡风玻璃上显示


5.辆丰田LQ

丰田LQ的设计原则是,让司机和他们的车辆之间有更加紧密的联系。所以通过加入最先进的先进的AI,称为Yuyi,将人工智能打造成你在车内最好的朋友之一。 

会眨眼睛的LQ


它是全电动的,拥有SAE  L4级自动驾驶系统,这意味着不需要用户的参与,因此车厢的舒适性就显得尤为重要。在座舱内的乘客被不断地监测,AI将根据司机的情绪和警觉状态来调整温度,甚至是驾驶模式。并将进一步尝试在情感上吸引司机,使他们在旅途中保持愉快的心情。车内的每个控制都是语音激活的,这代表车内几乎没有任何物理按键,所有的信息将会投射在挡风玻璃上。甚至可以调整照明水平,在空气中释放平静的感觉,AI也会选择自己的音乐播放列表,唤起它认为目前最符合你情绪的音乐。

AI根据用户心情播放相关音乐

正在自动驾驶的LQ


6.梅塞德斯-奔驰Vision AVTR

如果你想看到世界上最有未来感和最有异国情调的轻型概念车,那么你一定要看的就是这辆车。相信小伙伴们都看过《阿凡达》这个电影,无论是科幻的剧情,还是绝美的场景,都在当时引起了不小的轰动。这辆车的灵感就是来自《阿凡达》这部电影。而且契合度可谓是非常的高。

                     

阿凡达场景                                                                  阿凡达宣传海报


它外观采用了仿生设计,整体观感十分科幻。车身两侧采用了全透明设计,意在大幅提高车内视野,强调车内、车外的交互。它还使用了33瓣采用了独立的仿生襟翼,看起来像爬行动物的鳞片,可以根据不断变化的条件来调整车辆上方的空气流动。

      

《阿凡达》电影中的精灵树


他的轮胎,借鉴了电影中,精灵树的样式,并且它去掉了传统的圆形轮,胎取而代之的是球形轮胎,它提高了机动性,对周围的影响较小,并且能够扭转30度,这意味着汽车可以以螃蟹的方式侧向移动。

AVTR外观


可以依据气流和感应翻转的仿生襟翼


内饰以流动的波浪和花朵形状为基础,这看起来是有史以来最舒适、最高效和最愉快的旅程。这辆车会与你交谈,了解你想去的地方,在给它下达指示后,你需要做的就是坐下来,让它做所有剩下的事情。值得一提的是,车内同样没有任何按键,当你伸出手站,并且注视手掌时,按键就会显示在你的手心上,你进行移动点击等操作。

AVTR内饰                                                             显示在手掌上的虚拟按键


通过手掌来控制方向                                                用手掌进行交互


通过对趋势的了解和分析,相信小伙伴们对未来感汽车有了新的认识和理解。目的也是为了让大家更好的把自己的理念和设计与未来汽车相贴合,亦或是产生灵感,发散思维,做出更好的创作。希望在不久的将来,无论在汽车造型,还是内饰,或是仪表等,可以看到大家充满激情的设计。

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

文章来源:站酷  作者:大牛李
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


案例分享 PM/UX 必看 [用户体验]

ui设计分享达人


 

讲User Research | 用户研究 之前,有必要先介绍下“用户体验”。这两者是密切关联的。

 


作为一枚互联网老兵,先说一下历史吧。

 

N年前,UX Designer还不怎么流行。

 

随着乔帮主iphone4的横空出世,惊为天人,彻底改变了整个手机生态。于是在中国市场,各种热钱涌入,到处都是创业公司(start-up),各类APP纷纷孵出(我在上海)。这是整个移动互联网行业野蛮生长的年代。公司那么多了,那么UI,iOS开发,Android 开发等等都是供不应求的。

 

 

当然,那么多创业公司,90%都会在一年内,在天使轮的阶段死掉。能活下来的,都是壮士!现在你看看你手机上装的啥耳熟能详的APP,基本也就是那些了。

 

题外话:我当时的公司楼上是一家知名网游公司。某天我很快乐(KU B)的去上班(Make Money),结果就看到新闻说那家创始人CEO昨天半夜心脏病发,人没了。隔天就看到他家公司门口贴讣告了。(此处默哀!)创业不易,真心能活下来的都是壮士!

 

野蛮生长的年代,对于岗位要求不会那么精细。做UI的,最好你什么都会,十项全能。平面/手绘/App UI/ Web UI/H5/交互/动效/前端最好也懂一些/其他。。。


那时候少有交互岗,因为交互岗通常会被产品岗,或者UI岗兼了。但随着这些年WEB/APP越来越成熟,用户对于体验的要求越来越高。另外,随着各类海归人才带回来的国外先进设计理念。各路大中小厂对于UX交互也就越来越重视。

 

于是,就有了UX Design | 交互设计的专门岗位,有些也叫User Experience Design | 用户体验设计,在互联网行业,两者基本一个意思。

(我们这里不讨论用户体验的五个层次,战略层、结构层、表现层之类的。这些太理论,大概知道就行了,多说我也困。真要硬掰,那交互设计实际算是用户体验中的结构层。但在国外专业文献中,UX Design=User Experience Design。不要硬刚。 :P)

 

人类总是情绪化的,总是对他们世界里的产品做出情绪化的反应

-艾伦·库珀,Cooper公司总裁,Visual Basic之父

 

 

一.什么是 User Experience | 用户体验?


通常来说,“用户体验”就是人们在使用产品时候的感受。用户体验并不仅限于互联网行业,各行各业都有。


用户体验更关注的是人和物的交互(Human-Objects Interaction)之间的联系。


“物”在互联网产品中的应用可以是Web,APP,System等。

 

举个生活中的例子,迪斯尼。

迪斯尼,娱乐行业吧?但它更是一家彻彻底底的体验公司,极其注重体验管理。


迪斯尼乐园为小朋友们,大朋友们筑造了一个梦。迪斯尼的体验管理,就是从造梦这个目的出发的。


对于服务人员、演职人员的要求,干净、礼貌都是最基本的。


迪斯尼对演员的要求是,你不是演米老鼠,你就是米老鼠。用户体验细致到如下:

只要有宾客在,演员就不能把头套摘下。之前有新闻说演员中暑了,也坚持不取下头套。(这里我们不讨论劳工权益之类的问题)因为不能毁灭孩子们的梦。

在同一个视野里,不能有两个同样的米老鼠。因为对于孩子来说,米老鼠只有一个!

全世界演米老鼠的演员,都要苦练签名。因为对于孩子来说,全世界只有一个米老鼠,签名当然是一摸一样的。


这只是演员,还有其他工作人员,还有工作以外的服务。此处不再延申讨论了。


 

二.什么是 User Experience Design | 用户体验设计(即UX Design | 交互设计)?


用户体验设计,顾名思义,就是为产品/服务设计一个良好的体验。用户体验设计同样并不仅限于互联网行业,各行各业都有。

 

举个生活中的例子,麦当劳的打包袋设计。


传统设计是这样的。

汉堡薯条什么的全部装纸袋,没有提手,每次都捏到我手指抽筋。饮料再另外装个塑料袋。

一个捏,一个提。其实是不舒服也不方便的。

 

用户体验好的设计可以是这样的。方便快捷,节约资源,解放手指。

(gif动图,刷新页面重播)

 

我们这里想说的用户体验设计,特指互联网行业。


早期的Web页,几乎就是个静态网页,就提供些信息展示。那时候用的还是asp, php, .net技术,快捷点的话有个模板套套,新闻/产品就能后台维护了。


从大概2010年以后,Web就开始越来越复杂了,APP也开始越来越精细和规范了。这对于交互的要求就越来越高,需要有一个良好的用户体验设计。

 

举个APP的例子。

淘宝最近对“确认收货方式”做了优化(大致在2021.9),不知道你发现了吗?


淘宝购物时,首先,在买东西付款的时候,就需要输入第1次支付密码。


最后,在收货确认时,

Before: 原来,还需要再输入第2次支付密码。

Now: 现在,只需要点击“确认”就行了,不需要再输入一次支付密码了。此次优化,就是简化用户的操作,提升用户体验。

 

如下图为最新优化后的截图:


 

如图,

Before: 原来,在Step 3中,原来还需要再输入第2次密码。

Now:现在,在Setp3中,直接从Setp3——>Setp4.


三.为什么UX Design | 交互设计很重要呢?

 

产品成功与否,涉及到太多方面了。战略决策、产品、内容、用户体验、技术、运营、服务、竞品情况,资金投入、运气等等,缺一不可。而用户体验/交互是其中重要的一环。


专注于用户的交互设计,大大增加了项目成功的机会。因为产品是给人用的,尤其是互联网产品,用户不会因为产品是知名品牌,就坚定不移的支持它,买它,用它。


要是产品不好用,那放弃它,也是迟早的事情了。


毕竟,能让大家都喜爱的,还不管怎么样都爱到死的,也只有RMB人民币了。

 

 

四.什么是 UX Designer | 交互设计师?


 

交互设计师,需要通过调查和分析等用户研究方法来设计产品,或者对产品做优化改进,以保证用户能有一个良好的用户体验。


 

五.UX 和UI的区别?


UI,纯粹的UI,通俗来说,就是负责好看。把产品做好看了,做精致了,让用户看得赏心悦目,心情舒畅。这是美学意义上的工作。

 

UX,通俗来说,就是负责好用。让整个产品流程简单又便利,用户使用产品不会有停顿和疑问,让用户使用产品的感受非常好。最终目的是为了增加用户的粘性,提高产品的流量,促进产品的转化率,为公司带来直接或间接的收益增长。

 

UX是产品中的重要一环。

 

当然,在实际工作中,如果产品——长得好看+体验好。那就是王者~

这也应该是做产品的要求和标准,也应该是设计师对自己的要求和标准。

 

 

举个两者结合的例子,摩拜单车。

(虽然他欠用户押金,虽然他已经没了,成为了美团单车。但是他的故事还是可以讲一讲的)

 

设计方面,

摩拜单车的联合创始人王晓峰(负责具体的研发、运营及市场工作)回忆当年做摩拜单车的时候,首先考虑的是产品和服务要让消费者有面子。


前期他做了很多市场调研(看,用户研究),当年在校园外骑车的只有三种:除了专业骑赛车的,就是蓝领工人和老年人。


想让白领阶层都愿意骑自行车,就必须要让他们觉得有面子。如果让一个白领,骑着五花八门,甚至还叮当带响的自行车上路,那是很没面子的,这种生意一定会失败。


于是,摩拜就设计出一辆金属感十足的橙色自行车,好看又酷炫。

 

用户体验方面,

摩拜单车能够提供给用户的体验一直有着不错的口碑,比如车身结实、开锁方便、损坏率低。但是,在夸赞的后面,用户们往往会补刀:「好是好,就是太重了。」(第一代重量为25公斤,是普通自行车重量的2倍。)


于是,为了改善用户体验(看,基于用户反馈。又是用户研究。),第二代摩拜单车在确保安全和耐用的前提下对每个零件减重,整车仅重 15.5kg。比于第一代单车「减重」了约 10 公斤。


这还仅仅是车身重量,其他各方面,轮胎,锁,链条,车座等等,全部做了优化改进。此处不再延申讨论。

 

 


回到做WEB或者APP的设计上。


中国的互联网行业并不羞于抄袭对手,现在产品同质化这么严重,靠单纯的产品创意早已经无法取胜了。


现在产品更多的核心优势是ABC——人工智能(AI)、大数据(BIG DATA)和云计算(CLOUD)。我们顶尖的算法工程师们(Data Scientist)好不容易对数据做了识别、分析和精准有效的输出。


结果在交互这一环没做好,用户找不到,看不懂,不会用这些产品/内容。你做设计的良心会不会痛?


 

六.用户体验设计就是需要“以用户为中心”(user-centered)而设计


不要拍脑袋决定,不要自己YY。

不然只能设计出一个你自己想要的,或者是你老板想要的产品。

 

举个反面案例:生活中的例子,厕所标识。

 

用户体验—— 正常

这张图,好理解吧,厕所标志。就算右边那个清朝的个性了点,那也是设计得不错,能看懂。


 

用户体验—— 差

这张图,额。鸡?让我想想,哪个是公鸡,哪个是母鸡?只要我努力辨认,我还是有机会成功上厕所的。


 

用户体验—— 极品差

这就是设计师自己YY的结果。


这张图,这都是什么玩意儿?大象?长颈鹿?什么意思?设计师,你给我出来,你信不信我打不死你?


这样的厕所标志,我猜都猜不出来,我只能跑到厕所门口张望,当个女流氓,看看厕所里的坑位是什么样的,我才有指望上厕所。

 

好了,那位设计师现身说法了,他的灵感源于动物习惯,大家弄不清楚的原因是他们不了解动物的具体习性。


长颈鹿在嘘嘘时会张开双腿,这标志着女厕所,而大象则用象鼻喷水,这标志着男厕所。他的灵感在大部分人看来太牵强,因为一般人对于这些动物习惯一无所知,用大象和长颈鹿来分辨厕所之间的区别是不是很无语?


这设计师就光顾自己玩创意了,自己YY。厕所是为了给大家带来方便的,好的设计创意是一回事,但最大的问题也是要方便众人使用的。

 



举个正面案例:APP的例子, AR(增强现实)。


现在AR技术已经相对成熟了,导航,家居,翻译,试妆,试鞋,地球仪都有AR。

 

拿AR试鞋举例子。

Before: N年前,AR试鞋还是把鞋子投到地面上,看个大致效果。(左侧Before截图大概是我3年前截的)

Now: 现在,AR技术做强了,AR试鞋就直接投到脚上,能够看到鞋子上脚的效果。对用户而言,体验更好。对商家而言,转化率会更高。

 

好了,用户体验就讲到这了,是不是很轻松,看看故事就有些体会了?


 

最后,

今年是乔帮主逝世10周年,缅怀下!原来,他已经离开这么久了。

 

I skate to where the puck is going to be, not where it has been. 

- Wayne Douglas Gretzky

这句话简单来说,就是预判形势,提前准备。

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

文章来源:站酷  作者:Lu倾倾
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



B端查询列表剖析和实战

ui设计分享达人

什么是查询列表?


首先我们先了解下官方Ant Design对查询列表的定义:


简介:

查询列表可以查看和处理大量的条目数据,常有导航至详情的作用,

用户可在列表页对条目进行筛选、搜索、对比、新增、分析、下钻至条目完整详情页等操作。


设计目标:

帮助用户更高效的查看、处理、查找条目。


设计原则:

易读性:采用格式一致外观,突出有利于对象识别的关键信息。利用富交互分层展示信息以减少认知负荷;

可寻性:列表以易于浏览的逻辑排序。提供合适的搜寻组件帮助用户快速查找信息;


常规布局顺序:

数据过滤 + 数据统计 + 数据列表 + 批量操作

undefined


模板页面示例:


现在有了官方解答指导,我们就先从分析模仿开始



查询列表有什么?


从四个维度开始一一分析:


一、数据过滤:

常规的数据过滤分为两种类型:


1、条件筛选:

特点【结构化+有限范围】,筛选需求和数据都是结构化的,

比如有一个用户信息表,需要筛选出性别【男】+城市【北京】+年龄段【18-24岁】的用户,就是因为信息属性可以被量化和拆解处理,我们才能多条件组合筛选(且的关系)出来;


组件:选择器(单选/多选);

布局:上下结构(常用)、左右结构,条件多时要配合可折叠操作;

形式:区域堆叠、表头、弹窗;


2、搜索查询:

特点【非结构化+模糊/精准匹配】,搜索的需求是非结构化的,

比如还是用户信息表,需要查到一个叫【宁荣荣】的信息,你就只能去手动打字去搜索,因为姓名是开放式的信息,无法被结构化处理。

undefined


组件:基础搜索框、高级搜索框;

布局:跟随列表,常放置其左上角或右上角;

关于具体使用,搜索不用多说,遵循系统统一性原则,选择一处固定位置就好,


对于B段产品,业务本身比较复杂,筛选条件偏多,原则建议从使用高低频入手,高频显性,低频置后、折叠都可(后续可以出一片详细的筛选篇分享下)


二、数据统计:

数据统计一般作为查询列表的重要配角出现,方便用户直观了解到当前页面的统计信息。

就是列表数据提炼出来统计信息,数据名称+数值,左右、上下布局都可,

有一点强调一下,业务的数据统计要求和条件筛选联动变化,就要放在条件筛选下方,

如果统计数值是固定值,就放置条件筛选上方。


三、数据列表:

这里的列表主要陈述标准的【表格Table】形式,

表格被公认为是展现数据最为清晰、高效的形式之一。


它常和排序、搜索、筛选、分页等其他元素一起协同,适用于信息的收集和展示,以及操作结构化数据,

明显优势就是结构简单,分隔归纳明确,使信息之间更易于对比,大大提升了用户对信息的接收效率和理解程度。


常规内容构成:

Header:标题、筛选(高频)、操作按钮、表搜索、icon(列设置、刷新、全屏)

Table-Header:复选框、序号、列名称、icon(排序、提示、列筛选、列搜索)

Table-Content:数据内容、按钮

Footer:多选数量,分页器


四、批量处理:

批量操作是作用于整个页面的操作,故放置与页面最底部,当然这个可以根据应用场景调整位置,

常见操作有【批量删除】【批量禁用】【批量导出】。



如何设计查询列表?


笔者也是从0开始接触B端设计,开始查阅了相关很多设计规范体系,一顿狼吞虎咽,依葫芦画瓢出了设计模板


下图就是依据Ant Design设计出的第一版查询列表模板


经过产品和研发评审,这样的布局表现虽说“五脏俱全”、“兼容性较好”,但是脱离了用户实际使用场景和交互路径,割裂感也很强,


举个例子,你准备盖一个房子,常规讲应该有有客厅、卧室、书房、厨房和卫生间五个空间,但你现在只是单纯用砖块砌了五个房间,大小一样,毫无顺序,想必你也不会这么盖···,我们现在从头开始,你是不是会考虑:


1、是不是进门应该是客厅,是不是应该大一点好接待客人;

2、书房是不是应该远离,减少噪音;

3、哪些房子需要窗户,窗户朝哪边好通风,阳光充足;

4、等等···


总结一句:我们设计出的交互操作&视觉呈现,要契合用户实际使用场景和路径,而不是自己YY。


怎么获取你想要的答案?调研和竞品分析。

调研可以向产品、销售、交付人员获取你想要的信息,

竞品分析可以找同类型产品进行优劣分析,取其精华。


下面列举调研和竞品分析的几个点说明下:


调研一

问:产品或销售登门拜访客户时,演示电脑分辨率是多少?客户使用电脑分辨率是多少?

答:多为老式笔记本电脑且分辨率偏小,1440*900、1366*768偏多。


机会点:上图数据来自百度统计-流量研究院也只能作为辅助参考,最终还是要看产品实际用户设备情况,为了保证页面内容尽可能多的展示在屏幕上,布局得紧凑,要优先适配小屏幕效果,所以设计稿尺寸得调整为1440*800(去除浏览器顶部页签+地址栏+Win任务栏高度,再取整)。


调研二

问:询问客户使用查询列表页面是否能高效的查看、处理、查找条目

答:查询查看没问题,就是一屏数据内容展示的太少,标题栏、筛选和数据统计占了太多高度,而且筛选也不常用,导出按钮在底部不明显,横向滑动很难用,看错行。

机会点:优化布局,筛选考虑折叠或者表头筛选,横向数据堆积能否换行展示,导出操作是否可以放在上方?


竞品分析:纷享销客CRM

优点:列表内容占主要视觉面积,筛选采用表头和自定义配置条件功能结合,列内容可自定义隐藏/显示/前置和列固定左侧,优先展示用户自己想看的信息,减少横向滚动条操作和提升小屏用户体验,将主动权交给用户,列表视图和分屏视图也满足了不同用户的查看需求,以上这些都是很好的优化方向。



竞品分析:广联达

优点:同样列表内容占主要视觉面积,高频筛选放出来,低频筛选采用折叠交互方式,用户有需要则点开【更多筛选】去操作,顶部有数据统计支持总揽,Table内容对于强关联的内容进行上下组合(节省横向空间),所有的操作按钮集合到右上角,方便用户定位操作。

undefined


总结一下:

undefined


以上就是笔者在调研和竞品分析上可以获取到的主要信息,虽说第一版套用AntD模板的设计并不理想,但对于初入B端行业的笔者来说着实重要,对查询列表的框架、功能、和交互有了基础指导和了解,才能有后续的一些针对特定业务场景的设计优化改版,凡事还是得现有基础理论支持,后面的路才会走的更远。


言归正传,下图就是针对上面的总结优化后的查询列表,相比第一版(可上划参考对比)变化还是挺大的,各位可以对照的优化点细细体会下:


1、取消面包屑(系统深度较浅),优化(减少)标题栏高度;

2、增加数据统计,区域板块使用分割线划分,减少割裂感;

3、页面操作按钮集合放置在右上角,主按钮统一在最右侧;

4、高频筛选常驻+表头筛选结合交互(这里其实还是有问题的,对于组合筛选操作并不易用,待优化);

5、增加Table刷新和列设置操作(刷新和设置icon);

6、列锁定(锁子icon)可以快速自定义设置优先左侧固定;

7、Table内容根据业务内容属性合并上下组合展示,节省横向面积(宁可上下滑动,也不要横向滑动,至少减少横向滑动的距离);


这一版看起来整体架构层级依然清晰明确,从视觉角度看更丰富、更有节奏感,从交互来看也更符合用户的操作场景,新增了几个辅助功能,让用户可以根据自己的业务需要自定义配置列表内容,更有掌控感,能更高效的查看、处理、查找相关信息,这也是基本达到了查询列表的设计目标。


经过和产品经理沟通,此次优化思路和方向也很准确,获得了肯定,后续的迭代还需持续进行。


调研和竞品分析带来的好处想必各位也体会到了,凡是我们不了解不精通的,就去多看看多搜搜,总会有收获,站在巨人的肩膀上总会看的更远。


Ending


这次的分享是自己在探索B端道路上的小经历,同时也体会到一些更深层次的东西,比如设计的意义在哪,什么是好的设计,怎么才能做出“好”的产品,在此分享给各位,希望能给大家带来些思维上的变化,共同进步。

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

文章来源:站酷  作者:MinFan菌
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


B端产品界面高屏效初探

ui设计分享达人

背景

在 B 端设计领域中,不管是内部用户、产品、设计师、开发,还是外部产品、设计师等,总能听到关于界面「屏效」方面的诉求或吐槽。


undefined


「屏效」狭义理解是「界面过度留白」;广义理解,「屏效」源自谐音“坪效”,指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数)。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。


为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感,于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开,将实践过程中反复验证有效的设计策略沉淀成设计手册,同步将部分功能进行工程化,确保可以开箱即用。


undefined


探索阶段-为谁在何时何地设计

用户声音|不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%;认为提升屏效对体验有提升的终端用户占 50.6%。


undefined


外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里,其中就有 2 点提到关键字「效率」。


undefined


通过了解不同用户和产品类型发现,不同的用户在工作场景的产品使用中有着相似的特征:


undefined



案例收集|发现问题,大胆假设

纵观 B 端产品界面,发现普遍问题和收录在解决屏效问题上实践得比较好的案例,为了逐步突破问题,选择以数据产品中覆盖率极高的表格为设计切入点,通过线上跨产品多端地毯式的体验走查,发现表格三个层次的问题:


undefined


视觉、交互层在无需理解业务场景和用户目标的情况下,都较容易发现,属基础问题,但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设:为提高屏效,可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度,可以通过提高信息密度;交互层为提高操作速度,可以缩短当前手势到目标之间的距离;信息层为提高信息被理解的速度,可以通过重组织等方式。

基于假设,我们进行了进一步的桌面研究,查阅论文等书籍,寻找设计理论的验证和指导。


竞品分析|寻找实践证据,谨慎验证

我们知道视觉上界面留白过多(过疏会增加滚屏成本,过密因易串行而影响阅读效率),以表格「行高」为例,探索各表格在字号、字高和行高的关系,因为不同字体的同字号实际像素高度会有差异,因此选择的是字高(即文字垂直高度的视觉大小)而非字号或字行高,决定留白的两个重要因子是字高和表格行高,以次推演,界面元素和元素间距的留白关系,探究在视觉层怎样的留白率能保证甚至提升屏效。


undefined


以数据产品中的表格为例,通过直接和间接竞对的方式,分别从数据的查阅(视觉)、分析(交互)维度进行功能点和设计细节上的比对,来看看优秀产品是如何解决屏效问题。

直接竞对:内部用户口碑较好的产品 A、B外界竞对:同领域的 Tableau、网易有数、金山、微软表格;间接竞对:谷歌邮箱、AntD 等的紧凑主题的常规列表(一维表格)


undefined


通过竞品分析可以发现,数据分析领域的表格留白率普遍较低(信息密度高),尤其是金山和微软的电子表格,其次是同类面向数据用户的 Tableau、网易有数,而谷歌邮箱等工作台常用的常规列表紧凑版本中,留白率和数据领域的电子表格不相上下。


紧凑版的使用场景也常常是面对数据量巨大的信息呈现,通过切换紧凑主题,提升信息的快速浏览,而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大,而在实际案例实践中,也已经将表格行高优化至 30px,克制的使用留白。


除此外,竞品其他层次的设计也做了比对,总结来看整体设计做法:高密度、少屏数、少留白等。


文字陷阱:中英文字高不等于字号


举个容易犯错的竞品参考是,谷歌在紧凑版主题下字号 12px,列表行高是 28px,但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤,缺乏呼吸感。


undefined


原因在于谷歌的 12px 是英文字体,实际字高只有 10px,而 AntD Table 的语境是中文字偏多,实际字高有 12px,所以留白的差异在于一个是 18px(28-10),一个是 16px(28-12),这也是为什么决定决定留白的两个重要因子是「字高」和表格行高,而非「字号」和表格行高,进一步推演,决定界面留白的是「元素视觉高度」和「元素间距」。


论文查阅|寻找理论证据,谨慎验证

研究表明,低密度认知负荷低,但高密度任务完成率高,用户更喜好

参考资料:论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息,用户需要需要阅读(视觉),思考和理解(认知),需要点击按钮、操作鼠标和打字(行动),在人机工程学中,统称为负荷。即认知(记忆)负荷、视觉负荷、动作负荷,即分别对应用户体验设计的三个层级,信息/视觉/交互。而负荷所花费资源从多到少依次为:认知 > 视觉 > 行动。


认知负荷,举个例子,看了但不一定懂了。你是否有这么一种体验——刷抖音,虽然很多(信息密度小,输出效率低),但可以一直刷下去并且刷很久;而看一门 C4D 教学视频,即使就短短十来分钟(信息密度大,输出效率高),但是却要看上半天。因为刷短视频时,你的输入效率远高于作者的输出效率,而看一门 C4D 教学视频时,你的输入效率远低于作者的输出效率。可是,输出效率是客观的,输入效率是主观的。如果输出效率很高,你可以通过提高自己的输入效率(比如让自己成为 C4D 专家)来跟上作者,从而变强;否则输出效率很低(信息质量低),你的输入效率很高(很专业),信息于你而言都是无效的。


假设负荷总量不变的情况下,那么以上三类场景界面需要对用户负担分配大致如下,官网品宣类需要低认知成本,低视觉负担,视觉要求高,用户才会被吸引过来阅读,甚至酷炫的交互更能增加互动体验而带来的趣味感,比如苹果官网,信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息,而 B 端应用因为是专业使用,首先认知方面随着员工的专业度提高而降低,因此可以通过提高视觉负担,来降低行动负担,进而减少操作用时,当然最佳情况是三个维度能整体降低负担,让总负担降低,就需要更多设计巧思了。


undefined


面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中,设计师常用的 Top 3 做法为:【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。


undefined



实践阶段-如何设计

通过以上的探索,我们可以确定的是,B 端产品面向专业人员的工作界面设计中,提高屏效可从视觉、交互、信息三个层次进行,视觉层-高密度,即提高屏幕信息密度;交互层-低跳转,通过减少页面跳转、手势与常用操作的距离等;信息层-有效性,通过重组织或辅助信息帮助用户理解,甚至提供帮助手册等以提高用户专业能力。


undefined


基于以上的总结,对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,寻找运营机会点。


如下表格经过高屏效策略优化前后对比图,优化前相同维度下不同人群数量的对比需要视线来回跳动比对,而优化后的表格内容,更符合用户看差异场景下分析目的数据查阅,视线锁定相同维度,即可快速比对数值大小。


undefined


下面以视觉、交互、信息三个层次解剖设计过程背后的思考。


视觉层|高密度-克制的留白

眼动理论:研究表明,人眼最小可视视角 0.3 度,水平最大眼动舒适转动区 30度,垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px,水平视野舒适眼动宽 1200px,垂直视野舒适眼动高 2200px。参考资料:论文《基于眼动交互的用户界面设计与研究》


undefined


如图,缩小表格行高的同时,目标信息之间的眼动距离随之缩短,在眼动舒适区内看到更多信息,便于信息的高效获取。


undefined



交互层|低跳转-高频信息前置

理论基础:菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型,它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为:T=a+blog2(D/W+1),W为其中目标的大小;D为到目标的距离;T为移动到目标所用最短时间。参考资料:菲兹定律


undefined


表格单元格借助交互状态,增加悬浮出现的信息组件,前置显示目标单元格明细信息,同时通过交互出现的指示器辅助行列信息的获取,高频操作考虑手势位置放置,缩短与操作目标的距离,以提高整体操作效率。


undefined



信息层|有效性-信息重组织

理论基础:交互设计四大策略「组织、删除、隐藏、转移」参考资料:《简约至上》


undefined


用户为了对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,但内容的重组织方式让两数据行需要频繁点击滚动条来查看,根据用户目标,将关联性大的数据放置相邻列(即将要对比的人群放置列头),即可快速查阅,减少眼跳距离。


undefined


结语

设计趋势中常见的大字体大留白界面,但在 B 端场景中,面对紧张的工作节奏,时间和注意力变得尤为可贵,相对而言,基于复杂度守恒定律, B 端信息量大且高频访问的产品中,「用得快」要比「看得美」更重要,「高密度」「低跳转」诠释的即是「空间换时间」,少一次点击,少一次跳转,少一份等待,就多一份时间和效率。

文章来源:站酷  作者:An t_design
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



从体验层面出发,分析App搜索框设计的要点

ui设计分享达人

搜索动作在App中依靠搜索框来完成,好用的搜索框很大程度上决定了产品的搜索体验如何。大多数搜索框存在相似性,但真正好的搜索框会在细节上为用户带来差异化的反馈,带来很暖很贴心的感觉。


1、搜索框结构分析 

从体验层面上看,一个良好的用户体验需要具备完整的流程。搜索框的使用流程可以简单划分为:

使用前-找到搜索框入口;使用中-点击输入内容;使用后-展示搜索结果。

其中使用中会涉及到跳转和输入两种不同的状态,在下面的文章里我会展开来分析。


2、搜索框的常见类型 

回想常用App的搜索框,好像它们的样式看起来差别并不是很大,但其实每个搜索框的细节都是经过精心设计的,下面总结了几种常见的搜索框类型。

搜索图标

页面上只提供一个放大镜图标,通常需要用户点击图标后才能跳转到搜索页面,例如小红书就将搜索图标放置在页面右上角。

基本搜索框

基本的搜索框组成包括放大镜图标、文字提示、输入框三部分。微信主页的搜索框采用了这种基本形式,文字提示为搜索,简洁清晰。

文字提示类搜索框

和基本搜索框的唯一不同的地方在于,这类搜索框中的文字提示部分不再是搜索两个字,而是根据产品需求支持预置多组文字提示并在搜索框内循环展示

▲ 在大众点评的顶部搜索框中,文字提示部分循环展示了三组不同的内容,引导用户快速检索到好吃和好玩的。

功能类搜索框

之所以叫做功能类搜索框,是在文字提示类搜索框的基础上根据产品功能的需要额外添加了常用的功能性图标,如扫码图标、拍照图标、语音图标等,赋予搜索框更多的功能属性。

▲ 经常使用豆瓣看书评的同学可能会注意到豆瓣主页的搜索框中有一个扫码图标,点击之后可以快速扫描图书条码或二维码,快速识别书的内容,省去检索的麻烦。

▲ 淘宝搜索框的组成更复杂,除了支持扫码外还有相机图标,方便用户拍照识别商品。 


3、搜索框设计状态分析 

使用搜索框搜索的过程总体可以分为四部分:搜索前、点击搜索框、输入中、搜索后。设计分析过程中我们要先理清整体的搜索流程,再考虑每个状态对应的交互细节及反馈,这样才能保持逻辑清晰。

搜索前-默认状态

位置

大多数搜索框出现在页面顶部,作为一个大的触摸目标更符合用户的认知习惯,更容易被用户发现和使用。

▲ 在苹果自带的地图应用中,搜索框放在页面中部偏下的位置,相比于顶部搜索框,这样的位置分布更方便用户单手操作。

样式

搜索前的状态除了前面讲的几种常见的搜索框样式外,有些产品会直接在搜索框增加“搜索”按钮。

▲ 阿里系产品包括淘宝、支付宝、闲鱼等主页搜索框都额外添加了“搜索”按钮,相比于点击搜索框再点击键盘搜索内容推荐,直接点击按钮简化了搜索流程。

点击后-获取焦点

搜索框

点击搜索框后,框内的放大镜图标会消失,出现闪烁的光标引导用户输入,搜索框右侧会出现“取消”按钮。

▲ 点击大众点评的搜索框后,搜索页会出现三个选项,点击每一个选项,搜索框内的文字提示都会改变,有效帮助用户提升搜索准确度,虽然是很小的点但做的很用心。

键盘

点击搜索框后会弹起键盘,在不输入内容的情况下,点击键盘自带的“搜索”按钮能查询搜索框中推荐的内容。

搜索页

搜索页的内容通常包括历史搜索、搜索发现、热门推荐等版块,记录用户的搜索行为,推荐目标商品或服务,提高转化率。

▲ 豆瓣将最热门的内容都展现在搜索页中,包括实时更新的热门书影音榜单、热门小组、热门话题等,为用户提供有效的引导。

关于历史搜索我们还可以继续深入分析,思考这些记录怎么排序、最多显示几条记录……

▲ 网易云音乐的历史搜索最多可以保留10条,采用横向滑动的手势交互可以节省屏幕空间。根据内容长短一屏一次可以显示2-3条记录,这会导致排在后面的历史记录不容易被用户快速发现。

▲ 淘宝的历史搜索可以容纳更多的数量,当搜索记录超过两行时会有一个小的展开按钮,点击按钮可以查看早期的记录,这样既能节省屏幕空间也能最大化容纳历史记录。

搜索中-输入内容

删除/取消

当开始输入内容时,在搜索框的右侧会出现删除图标,方便用户一键删除输入的内容,这里要注意区分删除和取消的区别。

▲ 在淘宝中点击“删除”图标,页面会返回到上一级也就是搜索页;

▲ 点击“取消”按钮,页面会直接返回到主页也就是搜索前的状态。

搜索提示

在用户输入内容时,产品会根据用户输入的内容提供相对应的搜索推荐,这是搜索框的必备的交互反馈。

通过合理的词条推荐能极大降低用户的思考时间,提高搜索效率,同时省去再次点击搜索按钮的流程,降低用户的操作步骤。

字数限制

目前我所知道的大多数App在搜索时都没有字数限制问题。

回顾一下搜索使用场景会发现用户在搜索框内输入任何内容都是有可能的,尽量不要约束用户的输入内容。无论用户输入多少内容,点击都可以完成基本的搜索操作,这样整个流程才完整。

▲ 在百度中输入过多字符时,会提示查询限制在38个汉字以内,多的字符会被忽略,虽然给出了提示但并未打断用户的操作流程,可以让用户继续完成搜索。

搜索后-展示结果

符合预期

搜索的理想状态是搜索到的结果符合用户的预期,满足用户的搜索需求,并把最吻合的搜索结果排在前面,为用户带来清晰的结果展示。

智能提示

智能提示是对用户输入内容上的一种提示或纠正,如果用户输入的内容有问题或不够标准,在搜索结果中会能给最贴切的搜索结果。

▲ 在淘宝中输入“shouji”或“souji”,淘宝会根据拼音给出“手机”的搜索结果,但仍保留原标签,方便用户再次点击搜索;输入“手ji”时,会直接给出“手机”标签,这种差异化的反馈能更好的为用户服务。

无结果提示

如果没有搜索到用户输入的内容,搜索页会显示一个空状态,提示用户没有搜索结果。关于空状态如何设计可以看我之前写的一篇文章——如何做好「空状态」设计?来看资深设计师的总结!详细分析了空状态的设计方法。

▲ 相比于直接显示搜索无结果的状态,拼多多的搜索结果首先会标明相关商品较少,然后将搜索内容拆分成不同的标签进一步引导用户来发现内容。

文章来源:站酷  作者:Clippp
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

如何选择合适的图标?来看这份图标类型和风格汇总

ui设计分享达人

常见的分类是简单的线性分类,缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。


大家好,我是Clippp。看到好的图标我们会习惯性地截图保存,但随着收集的图标越来越多,会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题!

一、定义图标类型

对图标进行分类时,普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标,样式很简单,但可以划分到多个类别中。

面对这样的问题,推荐使用系统性的结构来划分图标类别: 
  • 首先将图标按尺寸大小分为两类;

  • 继续细分对应的面性、线性、线面结合、扁平、拟物化等类型;

  • 最后选择标准、容器、渐变、3D、手绘、阴影等风格。

利用这种结构层级,可以明确定义图标类别。

二、图标尺寸

图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷,但把它缩小到16px,这些酷炫的效果都无法呈现出来。

在对图标归类时,首先要考虑图标用在什么位置需要多大尺寸。这里将图标分为两大类: 
  • 大尺寸图标通常指标志性图标,例如App启动图标或代表品牌形象; 
  • 小尺寸图标用作UI控件,起到引导功能或装饰目的。

三、图标类型

确定图标尺寸后,进一步细分图标类型: 
面性图标 
线性图标 
线面结合图标 
扁平化图标 
拟物化图标 


利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中,所以在小图标分类中没有展示。

四、图标组成


图标尺寸越小,展示的细节越有限。相比于大图标,小图标的尺寸有一定局限性,图标组成包括 标准和容器两种。 


大图标利用尺寸上的优势能展示更多内容,分为多种组成形式。

五、小尺寸图标样式


简单的图像可以更具包容性。图标的尺寸越小,越考验设计师传达信息的能力。 

1.面性图标

1.1标准面性图标

面性图标易识别,适合应用在小尺寸图标中。 
关键点:
确保图标有清晰的边缘,避免羽化; 
图标复杂程度随着尺寸变小而灵活调整。 

1.2带有背景色的面性图标

彩色背景为简约设计带来了更多可能。通过这个技巧使面性图标更友好,更具吸引力。 
关键点:
为背景选择4-12种颜色。 
考虑图标是浅色还是深色,是否适用于所有背景色。 
在彩色背景上使用白色图标比黑色效果更好。 

2.线性图标

2.1标准线性图标

线性图标因为简洁性和现代性而受到用户的欢迎。随着屏显越来越清晰,我们可以更加大胆地使用线性图标。 
关键点:
确保轮廓像素清晰。 
越简单越好。 
追求更简单的细节。 

2.2双色线性图标

设计小尺寸图标时,必须放弃细节并强调简单的形状。但当使用一种颜色效果不太理想时,可以考虑添加一些颜色。 
关键点:
使用两种搭配和谐的颜色。 
考虑将一种颜色用于主要形状,另一种颜色用于细节。 
少即是多。 
使用粗线条。 

3.线面结合图标

线面结合拥有更多细节,提升用户的愉悦感。 
关键点:
最好使用深色而不是纯黑色描边。 
限制图标的颜色种类。 
避免过多细节。 

 4.扁平化图标 

扁平化图标既简单又巧妙,表达品牌形象的同时具有丰富的内涵。 
关键点:
避免在<20px的尺寸中使用此图标样式。 
选择2-3种颜色,可以一起使用。 
一种颜色为主色,另一种颜色应为高光/细节色。 

六、大尺寸图标样式

大尺寸图标在界面中使用较少,更多用于产品标识或品牌宣传。 

 1.线性图标 

1.1标准线性图标

在设计任何图标前,都可以先创建一个线性轮廓,确保形状看起来足够美观后再添加颜色。 
关键点:
这类图标最容易制作。 
避免出现轮廓羽化。 
线条粗细要一致。 
不要害怕添加细节。 

1.2渐变线性图标

添加一些渐变能让原本单一的线性图标赋予更多的个性。 
关键点:
在小尺寸图标中添加渐变会降低图标的可视性。 
选择渐变时,首先考虑邻近色。 
线条越粗,渐变越明显。 
线条细节越多,渐变越明显。 

1.3等距线性图标

2.5D图标做起来会花费很多时间,但效果会很好。在设计汽车、房屋、家具等实体产品时,建议优先使用2.5D图标。 
关键点:
同一组图标要使用相同的等轴测网格。 
2.5D等轴图标很复杂,在较小的尺寸下会失去作用。 
如果可以,让所有图标都朝向同一个方向。 

1.4手绘线性图标

随着设计趋势向简约化、扁平化发展,很多设计师丧失了手绘图标的能力。实际上手绘图标让品牌更真实甚至更有趣。 
关键点:
手绘图标扫描后,再用数字方式重新绘制,这样可以保证线条粗细一致。 
尽量让所有的线条保持相同的颜色,这会使文件更小。 

1.5断线图标

标准的线性图标看起来可能会很单调,而简单灵活的断线处理能为图标增加更多个性。 
关键点:
断线粗细应该相同。 
图标的中断次数尽可能保持一致。 

1.6双色线性图标

关键点:
确保两种颜色具有相同的对比度,否则可能会导致用户看不清其中一种颜色,因此无法识别完整的图标。例如左下角的浅绿色对于视力弱的用户来说就很不友好。 

2.线面结合图标

线面结合图标可以看作是添加颜色后的线性图标。线面结合具有很强的轮廓,让图标能够清晰可见。 
2.1标准线面结合图标

关键点:
使用有限的颜色和统一的线条风格,使图标具有品牌性。 
使用线条和点来添加更多细节。 
避免使用纯黑色描边。 

2.2带有背景色的线面结合图标

关键点:
描边断开时,图标效果很更好。 
避免在小尺寸时使用。 
使用有限的调色板。 
考虑使用较浅的描边/背景色。 
考虑在图标下方添加一条水平线,使图形具有相同的位置(中间的图标示例) 

2.3错位线面结合图标

当填充色与描边错位时,颜色移到右边图标左上角留出高光,带来一种清新的感觉。 
关键点:
考虑使用断线描边。 
使用有限的调色板。 
确保描边和填充色简单且一致。 

2.4色块图标

这种风格的图标的特点在于并不依赖于颜色,仅将其用于装饰。 
关键点:
选择有限的调色板。 
先关注轮廓再关注颜色,颜色仅用于装饰。 
避免形状色和背景色过于相似,降低可见度。 

2.4单色线面结合图标

关键点:
避免使用暖色调尤其是红色,会让用户感到压抑。 
首先确定合适的描边颜色,再考虑填充色。 

 3.扁平化图标 

扁平化图标通常没有描边,主要使用形状和颜色来完成组合搭配。简洁、友好和适当的细节,让这类图标非常具有吸引力。 
3.1标准扁平化图标

关键点:
使用柔和的调色板,避免明亮的颜色。 
分清简化和添加细节之间的界限。 

3.2带有容器的扁平化图标

尝试让图形打破容器,带来动态的感觉。 
关键点:
尝试让图形从容器中凸出来,以增加深度。 
因为在容器中,可以添加更多的细节而不用担心图形变得混乱。 
尝试使用正方形、椭圆形或与品牌相关的容器形状。 

3.3等距图标

关键点:
保持所有图标朝向同一方向。 
选择恰当的调色板能让图标看起来更一致。 
避免小尺寸使用。 

3.4半阴影扁平图标

半阴影图标是在扁平图标的基础上添加半色调阴影,得到更具个性的图标。 
关键点:
小尺寸图标不起作用。 
使用有限的调色板。 
确保所有的图标色调相似。 

3.5长阴影扁平图标

当图标位于容器中时,可以考虑添加长阴影,主要包括纯色阴影和渐变阴影两种类型。 
关键点:
使容器具有相同的颜色或类似的色调。 
只在大尺寸图标中使用。 
将半阴影与长阴影组合使用效果更好。 

 4.拟物化图标 

拟物化图标实际上已经包含了大部分的样式,例如它们是立体的,有丰富的渐变和阴影。 

这种风格的图标看起来与现实生活中的图标尽可能类似,让用户感到更舒适。 
关键点:
考虑添加底部阴影。 
使光源来自同一方向。 
确保图标都朝向相同的方向。 
目前绝大多数界面不在有这种风格的图标,可以考虑使用3D建模来实现这种效果。 

总结

希望大家能对图标的分类及设计有更全面深入的认识,从而构建一套完整的图标思维体系。

文章来源:站酷  作者:Clippp
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


掌握这20条用户体验设计原则,助力设计成长!

ui设计分享达人

文章整理了20条用户体验设计原则,希望通过这份简洁易懂的合集能够让你对用户体验领域有一个初步的概览和了解。

1.以用户为中心 

这是最常被提及的用户体验设计基础,当涉及到产品设计决策时,提醒我们要学会使用同理心,而不是仅凭个人的想法或意见。

真正好的用户体验设计是为用户量身打造的,用户的意见、痛点、愿望、偏好和需求对产品来说至关重要,所以在项目初始阶段需要投入大量的时间和精力去了解用户。

用户体验研究重点是了解用户,为接下来的产品设计做准备。以用户为中心的设计理念是设计师迎合用户的需求,区分了设计任何人都可以使用的产品和为目标用户设计的产品。


一款特定的产品需要面对不同的目标群体,前期研究中需要了解目标人群需要什么并在产品中反映出来,这是针对性很强的设计研究。 


2.了解信息架构

可能很多人对信息架构的定义很模糊,这里举个例子来具象说明一下信息架构的含义。

例如在一款产品中,如果把所有内容都堆到一个列表或页面中,可能我们将无法使用这款产品,所以我们看到大多数的App和网站都包含很多的导航和页面结构,按照内容重要程度有序地来组织内容。

信息体系结构的最终目标是帮助用户理解他们在看什么,并帮助他们找到需要寻找的内容。

信息架构在制作线框图或原型之前完成,因为它是产品的基础,有助于设计师考虑什么功能是最重要的,哪些是用户最需要的以及哪些次要内容可以隐藏起来等。

这种结构与产品的导航设计密切相关,有助于将用户引导到正确的位置。导航和信息架构都试图让用户以最少的认知努力来完成操作。


信息架构的设计不当会造成重大故障甚至可能危及整个产品。如果用户在使用产品时找不到任何想要的内容,点击任何元素都没有反应,会给用户带来很糟糕的使用体验。 


3.考虑使用场景

没有场景,任何设计都很难生效。设计师在项目开始时会投入时间去了解用户面临的问题以及围绕这些问题的背景。


这条原则有助于设计师考虑还有哪些因素会影响用户和产品,很多产品设计会为用户提供一些有助于消除使用摩擦的操作提示。 
例如在设计表单时,会尽可能的添加 输入提示,最大程度地减少用户出错的机会。 


4.了解一致性及其重要性

保持一致性是用户体验设计的关键原则。拥有一致设计的产品可以更快地被新用户接受,因为用户不需要再次学习如何操作,他们会回忆起之前的操作习惯并将其作为指导,这也解释了为什么同类型的产品例如电商类App页面设计的很相似。

保持一致意味着在需要时可以重复使用某些UI组件,并在整个产品中保持一致的行为。例如当点击或悬停在按钮上面时,所以按钮的状态应该是一致的。


从逻辑上讲,产品越大,这种一致性会变得越来越有挑战性,这促使许多设计团队创建自己的设计系统。一款产品的学习曲线越长越陡,放弃的用户就会越多,在市场营销中,这通常被称为销售漏斗中的漏洞。 


5.给予用户适当的控制权

这条原则意味着用户希望能控制产品,无论是完成任务还是定制满足他们需求的内容。

在设计过程中一直试图给用户尽可能多的控制权,例如允许用户撤消操作、更改设置、自定义UI外观、创建快捷方式等中。


需要注意的是,当提供太多选项或用户太依赖于自己的选择时,用户可能会不知所措,造成所谓的 选择悖论。所以在设计时要了解用户乐于掌控的余地,不能让用户感到使用压力。 


6.把可用性放在首位

在整体上看,建立高标准的可用性是为用户做的最好的事情,有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作。


可用性的重要之处在于要理解可用性的灵活性和重要性。 


7.了解用户测试

结合可用性的概念,我们还要进行用户测试,这是设计师对工作进行测试的方式,对新的产品来说至关重要。

当设计思想和理念被转化为有形的原型时,设计师要观察真实的用户是如何与之交互的,可以通过许多不同的方式例如简单的A/B测试到全面的审核测试等来实现。


测试通常分几轮进行,团队在向原型添加更多细节之前验证每个步骤。随着测试结果的出现,设计也随之发生了变化。 
如果发生更改,将会进行新一轮的测试,通过这个过程,设计团队可以改进他们的工作,直到达到可用性标准。 


8.少即是多

在创造力和创造独特事物的渴望中,很多设计师很容易无意中弄乱产品界面甚至产品本身。

功能过多的产品可能会失去焦点并削弱吸引力。具有太多元素的页面会变得充满视觉冲击,但也会给用户带来负面体验,在设计时要学会克制并优先考虑真正关键的部分很重要。


另外手机端的屏幕空间非常小,创建一个有效的布局,想出巧妙的方法来隐藏次要元素并创建一个令人愉悦的界面需要付出很大的努力和创造力。 


9.视觉层次

视觉层次是向用户传达产品中元素重要性的方式。良好的层次结构有助于用户视线在界面上移动,并立即了解最重要的内容以及这些内容与其他部分的关系。

视觉层次结构与布局设计紧密相连,帮助用户消化所接触到的信息。


创建层次结构从概念的草图开始,一直持续到完成设计。例如发送按钮通常会用绿色而是不红色,而次要按钮会显示为灰色或与背景混合,并显示“撤消”或“返回”。 


10.了解用户的心智模型

为用户创建心智模型是尝试使用同理心的一种方式,是帮助设计师从用户的角度看待问题的工具。

正确使用意味着用户无需投入精力就可以使用的直观产品,而错误的思维模型会导致一些问题,例如界面混乱、高昂的交互成本。


为了匹配用户的心智模型,可以采用多种不同类型的研究方法,常见的方法包括 卡片分类、决策树、对用户行为的密切观察,或者使用大量的数据来建立关键用户的心理模型。 


11.设计中的讲故事

讲故事的方式更加直观,利用图像、视频、动画和文本等元素让整个页面与用户对话。用户体验设计中的视觉叙事是为了唤起用户的情感,给用户留下持久的印象。


想出一种可视化的方式来传达复杂的内容具有挑战性,但同时也是有益的,可以更好地接近用户并将其作为提高产品可学习性的方法。 


12.不要直接跳到高保真原型上

高保真原型是设计项目的最终目标,但是直接使用原型软件不断添加各种页面细节是错误的操作。


避免直接出高保真的主要原因是因为这样做的成本会更高。在没有任何用户研究和测试的情况下,一款产品无论具有多少的细节都有可能面临不符合用户使用的情况。 


13.可访问性测试很重要

不仅要检查关键用户是否可以流畅地使用产品,还应该检查其他所有用户例如少数群体等是否都能够正常使用产品。


事实上,残疾人和其他用户一样需要数字产品,但很多产品在设计时并没有考虑到这些群体,但这也提供了一个机会,为所有用户提供一个可以依赖的好产品。 


14.熟悉并在用户体验设计中使用

我们知道为用户提供一致的设计有助于克服学习曲线,同时为用户提供熟悉的东西也有助于缩短学习曲线。

例如,大多数用户都会立即识别某些UI组件(汉堡菜单/单选按钮),这意味着他们会本能地知道这些组件代表什么意思或者如何操作。

使用用户已经熟悉的东西并不一定会让产品的独特性消失,有经验的设计师会利用这种熟悉性来来创造一些独特的设计,同时也是直观的,不需要太多努力就可以使用。


设计一个完全不依赖熟悉度的产品可能是具有风险的行为,因为它很容易让那些不熟悉产品的用户超负荷,形成巨大的学习曲线,增加用户负担。 


15.了解交付成果的力量

可交付成果是可以在整个团队中交付的内容,包括用户画像、心智模型、用户旅程以及线框图和原型等,是一种有形和具体的表现。

可交付成果是用户体验设计原则,可以帮助设计团队和其他利益相关者理解和交流概念。

▲ 用户画像可以捕捉理想用户,并提供可以相关联的真实面孔,是一种指导设计的工具。用户旅程图帮助设计师了解用户完成任务需要的具体步骤,有助于确保这些步骤确实可以轻松执行,并且整个过程很流畅。


这些交付成果服务于关键功能,设计师需要在整个项目中都依赖它们,不断转换为用户可以与之交互的真实有形的设计。 


16.专业的原型设计工具

用户体验设计的过程不是线性的,而是一个循环。无论创建什么样的产品,都需要专业的原型工具,将基本框架放在一起,然后添加可能需要的所有细节。


从逻辑上讲,设计团队的具体需求会因团队而异,但一些关键功能例如团队协作、需求管理、交互设计和开发移交等,对于大多数团队来说是必要的。 


17.精心管理产品需求

一切都从收集需求开始,然后慢慢创建关键列表。虽然简单地列出一个列表听起来很容易,但随着项目的进展,要保持列表的条理性确实是一个挑战。


除了创建需求和检查复选框之外,还有一个问题就是调整需求,需要从 设计、技术和业务各个方面来处理各种需求,还要确保这些需求之间没有相互矛盾。  


18.了解移动和网络产品之间的差异

网页端和移动端产品最明显的区别是屏幕尺寸,这意味着所有的视觉层次结构和信息架构都将将从Web到App发生变化。


移动端产品会有更多影响设计决策的因素,例如设备的操作系统、使用产品的环境等。了解移动端产品在 导航设计、用户流程等关键方面的差异是至关重要的用户体验设计原则。 


19.利用UX设计模式

几乎所有的产品都专注于设计模式,它们可靠、易于查找并通过减少设计时间来为项目增加实用性。


▲ 当用户在谷歌搜索中输入的内容有问题时,谷歌会提供一个相关的搜索提示,辅助用户进行精确地搜索,解决用户使用不同方式在搜索栏中传达他们正在寻找的内容的问题。 


20.使用合适的工具才能有效

拥有单一的内容来源可以为团队带来清晰性和高效性,如果线框和原型分散在多个渠道中,这种内容的集合就会变得很难达成。


通过合适高效的工具能够避免产品在到达终点时遇到各种各样的可用性问题,防止产品细节没有表现出来或者被忽略。 


最后

通过这份用户体验设计原则的合集希望能够让你对这个领域有一个大致的了解。

没有人知道用户体验设计在未来会引领我们走向哪里,不过我们可以确定,无论它带给我们什么,肯定都会很有趣

慢慢来比较快,希望对你有所帮助~

文章来源:站酷  作者:Clippp
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

腾讯公益小红花火爆全网,背后的设计思维是什么?

ui设计分享达人

今年是腾讯发起99公益日的第七个年头。腾讯公益不仅在配捐机制、产品体系、企业联动、公益基础建设上全面升级,还连接数亿网友、近万家慈善组织和爱心企业,为全民公益交出一张漂亮的成绩单:

数据显示,小红花互动人次超1.25亿,送小红花、答公益题目等行为公益实现破圈传播,亿万爱心网友共同领取了超9000万朵助力小红花,共计有超过6870万人次在99公益日期间捐出35.69亿元,加上腾讯公益慈善基金会的6亿元资金支持,共募得善款41.69亿元。

99 公益日为何能实现破圈传播,作为腾讯公益日和 99 公益日的品牌符号,小红花的设计背后又传达了怎样的思考?今天就来聊聊小红花那些事。



2015年9月9日,腾讯公益联合国内数百家公益组织、知名企业共同发起了中国第一个互联网公益日。

为了让用户了解互联网公益的核心特色与参与方式,让更多的人参与到互联网公益中,第一届 99 公益日的活动主题定调为“一起爱”,在logo的设计中也借用了“无限”符号表示“爱无止境”的含义。


在前三年的 99 公益日中,募款额度得到了广度上的增长,在用户已经了解到互联网公益低门槛、多形式、透明度、可记录的特点之后,如何留住用户,对互联网公益形成日常习惯和持久投入,就成为了设计亟需解决的问题。

“小红花”是腾讯公益平台在2018年给出的答案。因为小红花作为国人的集体回忆,关联着你我儿时从老师那里收获到的鼓励。每一朵小红花背后,是我们完成的一件“好事”。

延续小红花的记忆线索进行延展,在公益中,小红花是对用户的捐赠给予的最大肯定,是受助者正在发生的改变。在传播上,小红花是记录用户每一次公益行为的符号,通过「戴小红花,一块做好事」而得到成就感的有效激励。

于是,2018年99公益日的主视觉上,无数的爱心化为花瓣,汇聚成一朵小红花,这是小红花在腾讯公益平台的初次绽放。



为了让品牌有延续性,加深用户对小红花和99公益日的认知,小红花作为核心品牌元素开始贯穿在每一年99公益日的主视觉中,并通过不同的画面故事表达每一年的主题。

比如,2018年的主题是积小善,成大爱,于是在设计中,让很多爱心小花汇聚在一起,让小的爱心变成大爱;2019年的主题是一块做好事,通过每个人的善意汇聚成小红花……



在2019年,“小红花”正式成为腾讯公益与99公益日的品牌符号。



从2020年开始,小红花开始发力于传播,联动外部品牌 IP 如QQ、微信、Bilibili、狐妖小红娘等开启推广,在各种不同的场景,诠释“一块做好事”的内涵。

这一年,小红花之歌火了,同名神曲MV播放量超1亿次;在线下,小红花也开到喜茶等连锁品牌的店里。

而2021年,属于用户独特的小红花爱心账户上线了,用户在腾讯公益平台做好事打卡,向好友发起集小红花的自发传播,从而争取更大的配捐额,在增强用户捐款积极性的同时,撬动更多用户了解并参与到活动中来。


小红花爱心账户


用户还可将积累的小红花兑换周边礼品。在推广上则从创作入手,发起共绘小红花的活动。



可以说,小红花串联起了用户从感知、到行动、到反馈的全流程,保证了用户参与互联网公益的动机和动力。

在预热推广阶段,腾讯公益推出一支小红花为主角的宣传片,试图为小红花是什么,做出来自官方的定义。

不管是线上线下征集用户绘制的小红花,“每个人的小红花”画展,还是在感恩日随证书送出的小红花画作,都让用户全方位地感受到腾讯公益小红花的“玩法”,也为小红花元素赋予了丰富的内涵。

征集到的部分小红花作品


寄出公益荣誉证书


爱心用户的开箱视频


99公益日期间,小红花与腾讯新闻、微保、腾讯视频、腾讯会议等多产品的玩法联动,让小红花开遍“地球村”。


多款产品联动一块做好事


而在线下,小红花也伴随系列广告,落地在线上下,IP联盟、异业合作、核心城市灯光投影秀等,让小红花无处不在。


部分城市地标灯光投影秀


最后,小红花这一品牌形象的成功,不仅在公益设计这一领域上有借鉴的意义,在品牌IP的设计上同样有值得学习的地方。

文章来源:站酷  作者:零弟小武
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

为什么越简单的设计越说不出理由

ui设计分享达人

常见场景


设计师日常工作中,经常遇见的那些显而易见的设计逻辑,却难以给出设计理由的情况到底指的是什么呢?


以我自己近期的工作为例,不妨为大家举个简单的例子:


下图是一个补贴规则的设置流程,在用户未设置补贴规则之前,明确告知用户还未设置补贴规则,当用户设置了补贴规则后,可以对补贴规则进行修改。



我认为这是一个非常简单且合理的页面路径跳转,并且在很多现有的产品中都有类似这样的逻辑存在。然而在与上下游同学对接的过程中,却遇到了不同的意见:有人认为没有必要区分用户是否设置了规则,用户未设置规则可以直接展示系统默认的补贴条件和补贴范围,如果用户认为不合理,自行修改便是。

不知道大家看到这里是什么感觉,我在听到「方案二」时的反应是:能够理解却并不认同,说不出来哪里不对,就是觉得这事它不应该这样。


以上,就是在我工作中发生的一次非常具体的案例。


直觉真的不如推理靠谱吗?


那么为什么我会产生“感觉哪里不对,却又说不出为什么”的强烈感受呢?


最直接的原因是,这样的设计方案(方案一)是用直觉做出来的,缺少了对方案本身的思考。


直觉,指的是那些没有经过分析推理的观点,因此常常给人一种不靠谱的感觉。


可是有时候我们依赖「直觉」做事真的就完全不靠谱吗?带着这样的疑惑,我去查阅了一些相关的资料来辅助我更好理解这种直觉性思考,恰好找到了一个真实的实验案例:


1997年,Bechara, Antoine et在一个赌博游戏实验中发现:「直觉」比「意识」更能指引正常人做出有利的的选择。

该实验先后邀请了10名正常人和6名前额叶损伤的决策缺陷患者,以探究人们做出正确选择是在对相关知识进行推理之前还是之后。在游戏开始前,工作人员给予每位参与者2000美金、发放4副牌,要求参与者在游戏过程中翻出100张卡片,并尽可能的多赢钱,但他们不会告知参与者每副牌中的卡片价值:从A、B两副牌中翻出正常的卡片能赚100美金,C、D两副牌中的正常卡片值50美金,同时每副牌中也隐藏着罚款,A、B两副牌中的罚款比C、D两副牌的罚款重,参与者很可能会输光所有的钱。

实验结果显示:正常人在意识到哪副牌赢面更大之前就开始选择有利的卡牌,而决策缺陷患者即使知道了正确的策略,却仍然继续选择对自己不利的卡牌。


根据上述实验,我们起码能发现直觉未见得不可靠,也就是说,凭借直觉出的设计方案,并不意味着不是一个正确的方案


可是在日常沟通协作的过程中,「直觉设计」一旦遇到不同的意见,就会缺少理论支撑。决策者无法判断设计师的直觉是否可靠,从而觉得方案本身也不可靠。


遇到这种看似「死胡同」的情况,我们应该怎么去思考呢?


很简单,直觉在前,策略性推理在后


乔纳森•海特(Jonathan Haidt),著名社会心理学家,在《正义之心》中有提到:


判断和论证是两个相互分离的过程,直觉与推理的关系就像大象与骑象人,骑象人(推理)骑在大象(直觉)上,骑象人不断发展以服务于大象。


拿上述的方案来说,当我面对这类的质疑时,我也会有愣住,但我知道我不能惊慌,而是该让骑象人(推理)表演了。


其实仔细分析一下上述案例就会发现,方案一和方案二最本质的区别在于:


是否需要区分用户(商家)自行设置过「补贴规则 」?


百度百科对规则的定义是:


规则,一般指由群众共同制定、公认或由代表人统一制定并通过的,由群体里的所有成员一起遵守的条例和章程。


规则本身是属于利益相关者之间的约定。按照这个逻辑,「补贴规则」可以理解为用户(商家)与消费者形成的基本约定


用户(商家)未设置规则,如果系统直接展示默认的补贴条件和补贴范围,就会给用户(商家)一种平台借以商家的名义与消费者形成了约定的印象,这与现实不符,甚至可能给用户(商家)的业务带来不必要的纷争。因此,区分用户是否设置过补贴规则是非常有必要的。


为什么要为自己的设计辩护?


在上述场景中,虽然我的直觉先于理性给我发送了信号,但设计师如果光依靠直觉却给不出任何说明,同样会带来一系列麻烦。


汤姆·格里弗(Tom Greever)在一篇文章提到,伟大的设计往往取决于你怎么说


描述设计不是一件容易的事情,但每个设计师都不得不向很多没有设计经验的人讲述自己的设计,并且要让他们信服自己是对的,这群人很可能是方案的决策者。决策者通常会选择那个听上去最合理的方案,所以方案的表述对于最终方案的确立至关重要。


普通设计师和顶级设计师之间的差距不仅仅是他们解决问题的能力,还在于他们能否用一种让人心服口服、并促使人们同意的方式来阐述他们是怎么解决问题的。理论上,最好的设计应该胜出,然而事实并非如此,设计评审很容易变成设计批判会,每个人都在告诉设计师要怎么设计。


最终,那些能够说服别人“我是对的”的人会胜出。设计师如果没有办法说服别人为什么他们要这么做,就不得不按照他们不同意的方式去修改设计,原因仅仅是因为他们没有办法简要的为自己的设计辩护


听起来似乎这些决策有失公允,甚至成了设计师的辩护大会,那么对于一些有着出色能力却不善言辞的设计师而言,就真的没有任何方法了吗?


如何突破直觉,能言善辩?


设计师要想守卫自己的设计,就要警惕那些单凭设计直觉做出来的方案。


设计直觉的形成与个人经历、阅读经历相关。遇到相似的问题,设计师如果有这方面的经验固然是好的,直接复用之前的做法可以大大提升设计效率。但我们完成设计后,最好想想哪些地方存在路径依赖,以确保自己的方案能经得住质疑。


一个最实用的可以判断自己的设计方案,是不是由直觉得来的,就是多向自己提问


同样,我们来用实际的案例做个说明:


想想下图中「智能上传」「更多操作」按钮放在表格的左下方行不行?


很明显不行,但重点是支持这么做不行的理由是什么?


如果你的理由是:


“别的页面是将按钮放在了列表左上角的”

“放在左下角不好看呀”

“没见过有产品这么放啊”

“......”


那这个方案就是直觉设计的产物了。


想要突破直觉设计,设计师需要尽可能在每个设计点上多思考几步,比如:


为什么别的页面会将按钮放在左上角?


根据2006年NNGroup 在眼动实验中的发现,人们在网络中的阅读成F型,即用户进入页面中的第一眼,通常会落在页面的左上角,也就是说左上方的区域是页面的黄金区。「智能上传」「更多操作」属于页面的核心操作,那么放在列表左上方是非常合理的。


此外,我们可以看到页面的翻页器是可以筛选列表展示的条数,假设用户设置的条数,超出了屏幕显示范围,也就意味用户进入到页面会看不到操作选项,所以按钮放在表格的左下方也是不合理的。


为什么别的页面按钮放在左上角这个页面也要这么做?


因为我们需要保障产品的一致性,产品的核心操作方式保持一致,可以有效地降低用户的学习成本,避免不必要的思考。


总结


在设计协作的过程中,设计师不可避免地会接收到来自四面八方的声音,而我自己也曾在设计沟通中陷入过类似困境,因此我越发明白只有清晰地表述出自己的设计思考,才可能赢得每个人的支持。


  • 凭借直觉出的设计方案,并不意味着不是一个正确的方案。

  • 直觉在前,策略性推理在后。

  • 顶尖的设计师,也是顶尖的交流者。

  • 要想守卫自己的设计,就要警惕那些单凭设计直觉做出来的方案。

  • 多向自己提问,以确保自己的方案能经得住质疑。


以上是关于这篇文章的关键思考总结,回到设计师个体而言,我认为我们需要对直觉设计保持警惕,因为看似简单的设计背后往往蕴含着复杂的设计原理,而一个好的设计师除了拥有过硬的设计能力,强大的设计思考力和表达能力以外,我相信同样在跨学科的研究和学习上会远强于普通设计师,否则根本无法支撑起背后的设计思考。

文章来源:站酷  作者:范思蜀
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


顶部导航 vs 侧边导航,到底哪种更好用?

ui设计分享达人

桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题,如今这也是 B 端设计中绕不开的一个设计问题。Jennifer Rose Kingsburg 曾经有针对网页的三级菜单导航进行过一份研究,结论是在左侧设置导航好处多多。此外还有很多类似的研究,你可以在这里看到很多相关研究的摘要。值得注意的是,这些研究大都是 2017年之前的研究成果,而如今很多设计范式发生了变化。

顶部导航 vs 侧边导航,到底哪种更好用?

1、左侧导航更容易浏览

Eyetracķ荷兰国际集团的研究表明,用户习惯于使用 F 式的浏览路径,这使得左侧导航在一般情况下有着相对更强的可用性,它不需要用户视线上的查找,因为用户会下意识注意到它们的存在。

顶部导航 vs 侧边导航,到底哪种更好用?

2、顶部导航更加节省空间

如果我们经常使用笔记本电脑来浏览页面,会很容易注意到不同的导航模块对于页面空间的占用比例,左侧导航所占用的页面控件通常是同样内容量的顶部导航的占用空间的3倍,因为纵向的侧边栏导航需要考虑到横向的标题占用空间,再加上搜索等功能模块的加入,这种空间占用就成了不可避免的结果。即使左侧的菜单栏可以折叠,这种处理方法也不总是有效的,因为这可能会隐藏相关条目的标签信息,降低了导航的可用性。

顶部导航 vs 侧边导航,到底哪种更好用?

3、侧边导航更容易缩放和收纳

也正是左侧导航本身的排版逻辑,它通常可以显示比顶部导航多一倍的条目内容,如果你的信息架构本身涉及到的一级菜单条目较多的时候,采用左侧边栏导航是明显更合理的选择,而且这种导航非常适合随着时间推移逐渐增加条目的需求。

顶部导航 vs 侧边导航,到底哪种更好用?

4、侧边导航支持定制化导航结构

侧边导航本身虽然占用的空间更大,但是它也有着更多的空间根据需求来定制各种不同的需求,相比于顶部导航,侧边导航甚至可以直接将分层的二级菜单直接展现出来,就像 Outlook 的侧边栏和 Slack 的侧边栏导航。

顶部导航 vs 侧边导航,到底哪种更好用?

5、侧边栏更和桌面端系统更一致

你会注意到 macOS 和 Windows 操作系统当中,系统默认的用户界面大都采用了灵活的侧边栏导航设计,很多 web 应用也是如此,它们会将顶部空间留给系统默认的菜单模块。采用侧边栏导航的 UI 界面可以和操作系统的逻辑保持一致。

顶部导航 vs 侧边导航,到底哪种更好用?

6、悬停激活下级菜单在顶部导航中更好用

悬停激活抽屉式下拉菜单的设计在顶部导航当中是非常自然的,但是在侧边栏导航当中,这种设计可能会在一定程度上遮挡住下级菜单,如果使用在旁边展开的方式,可能会占用大量的空间,总而言之,它更贴合顶部导航的交互模式。

顶部导航 vs 侧边导航,到底哪种更好用?

7、顶部导航栏适合做超级菜单

顶部导航正是因为和悬停出发下级菜单的功能很搭,所以很多电商和大型网站上会使用它来呈现条目众多的超级菜单。它是用来一次容纳超多条目的下级菜单的有效方式,这种布局也为产品展示和广告留出了足够多的空间。

顶部导航 vs 侧边导航,到底哪种更好用?

8、尽量避免重设计时改变导航模式

如果一种导航模式看起来不够好用,那么是否要借助重设计的机会,切换到另外一种模式呢?根据 Jira 的用户测试,95% 的早期用户对于这种情况会感到非常迷惑,即使是再小的导航功能修改都可能直接影响到大量用户的日常使用,因此不管哪种导航模式,一旦选定,尽量不要改变。

顶部导航 vs 侧边导航,到底哪种更好用?

9、不论哪种导航栏都面临响应式设计的挑战

对于没有太多条目的顶部导航,在移动端上依然可以直接在顶部呈现,不过如果太多了就需要使用汉堡菜单来承载,或者切换为垂直的侧边栏导航。而侧边栏导航在移动端上相对好一点,因为导航模式本身是一致的,但是有限的空间内如何呈现大量的导航条目同样存在挑战。

顶部导航 vs 侧边导航,到底哪种更好用?

结论:用哪种导航栏取决于需求

顶部导航:占用空间小,在页面的位置最为显著,涉及条目不多的时候效果非常好。对于层次结构简单的中小型网站,顶部导航还是很好用的,对于层级较少但是二级条目特别多的超级导航,顶部导航也是不二选择。

侧边导航:侧边导航支持一级条目较多且层级较多的导航需求,扩展性良好,对于复杂的产品和自定义需求较多的产品、涉及到管理功能、 桌面级产品、 都适合使用侧边导航。

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

文章来源:优设  作者:Taras Bakusevych

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

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

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


日历

链接

个人资料

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

存档