cs界面设计文章及欣赏

用信息架构,来落地产品架构

纯纯

让信息架构,和产品架构,产生“化学反应”

这个信息架构的角度,具体而言,就是只包含一级频道的交互设计。


核心功能、辅助功能、重大功能,作为产品的三大类功能,更多是从发展的角度来划分。


除此之外,大部分 App 都还有一些非常基础的功能,比如“个人资料”、“我的收藏”、“设置”、“搜索”等,此类功能,我们称其为通用功能。


核心功能、辅助功能、重大功能和通用功能,是产品的四大类功能。


总的来说,本文主要以底部 tab 导航的 App 为例,探讨一下,如何在一级频道来落地产品的四大类功能。



01 宏观上讲,怎样更好的摆放四大类功能?


网易云音乐是我个人很喜欢的一款产品,日常用的也比较多。不过,它的新版(6.0 系列)给我的直观感受是,有点复杂了,我甚至在很长时间里找不到“私人 FM”这个以前常用的功能。


给我类似感受的产品,还有 Keep 和知乎。


究竟是什么,让我觉得,这些产品变得有点复杂了?


个人简单总结了一下,最直接的一个原因,是这些 App 都新增了重大功能,并给这个重大功能单独加了一个一级频道。


比如 Keep 的“计划”频道、知乎的“会员”频道、网易云音乐的“视频”和“云村”频道,都分别占用一个一级频道。



企业为什么这么设计?个人的猜测,这些重大功能于企业而言,很重要,要么肩负商业化使命,要么被寄予厚望,所以企业就单独给了一个一级频道。


这是一个相对简单的逻辑。但如果想要更好的去平衡用户体验和商业化之间的关系,那我们就需要考虑更多的因素。


之前在信息架构那篇文章里,个人的建议是,如果想让 App 始终保持简单,那就只保留 4 个 tab,也即只有 4 个一级频道。


如何将产品的四大类功能、以及未来很大概率会不断出现的重大功能,以接近最优的方式,安置在寸土寸金的 4 个一级频道上?


我想,这中间一定有一些原则,值得我们探讨和参考。


1 和重要程度保持一致


通常而言,重要程度越高,分配到的空间就越多。这是一个比较普世的道理。


也就是说,这条原则,主要会影响到,四大类功能,各自占用多少空间比较合适。


我们有 4 个一级频道,每个一级频道代表了 25% 的空间。


再来看四大类功能,按其大概的重要程度,简单的分析一下。


先说核心功能,这个最重要。


核心功能是立足之本和护城河。先换个角度看这个问题,假设有三种可能,即核心功能可以占用一个、两个或三个一级频道。


先用下排除法。三个一级频道难免显得过多,剩余的三种功能挤在一个一级频道里也会显得过分拥挤;一个一级频道的话,倒也可以,但是平分四分之一的空间很难体现出核心功能的重要性。


相比之下,两个一级频道就显得较为合适。


综合考虑到有四大类功能,通常两个一级频道也不会完全给核心功能所用。


所以,核心功能,大概占用一个半一级频道,也即 40% 左右的空间即可。


再说通用功能,这个比较容易。


此类功能通常比较多,重要程度可能不及重大功能,但是又不能没有,所以通常我们也会单独给一个一级频道,就是“我”或者“设置”之类的一级频道,大概占用 25% 的空间即可。


第三,说下重大功能,这个比较重要。


通常而言,重大功能的重要性仅次于核心功能,而且重大功能可以有多个,再考虑到通用功能一般单独占用一个一级频道。


那么,相对而言,重大功能,完全可以单独占用一个一级频道,甚至更多,大概占用 30% 左右的空间即可。


最后,说下辅助功能,这个比较特殊。


首先,很多产品是没有辅助功能的;其次,辅助功能是个小功能;最后,辅助功能的数量一般也不多。


总的来说,辅助功能是没有必要单独给一个一级频道的。再考虑到 4 个一级频道所剩空间已经不多,所以,辅助功能一般和重大功能共用一个一级频道即可,大概占用 5% 左右的空间。



2 和使用频率保持一致


通常而言,用户用的越多的功能,就排的越靠前。


也就是说,这条原则主要决定四大类功能的排序问题。


具体而言,用户用的最多的是核心功能,所以核心功能最靠前。


重大功能和通用功能,有时候很难说哪个使用频率更高,比如微信里的“搜一搜”和“收藏”。但是比较明确的是,很多 App 在诞生之初,并没有重大功能,只有核心功能和通用功能。


所以自然而然,通用功能排在了核心功能后面。


个人有个猜测,一方面,有时候很难说清重大功能和通用功能,哪个使用频率更高;另一方面,通用功能起初是排在最后的。


所以,当重大功能出现时,就延续了旧传统:通用功能依然排在最后。最终结果就是,重大功能和辅助功能排在中间。


值得一提的是,现在市面上开始出现两类现象。


其一是,有一些拥有 5 个一级频道的 App,开始把核心功能放到中间那个频道,比如 Keep 的“运动”频道。


其二是,企业开始人为的控制打开 App 时默认展示哪一个频道,而且默认显示哪一个频道,存在多种情况,例子依然包括 Keep:以前默认显示中间的“运动”频道,现在默认显示“计划”频道。


个人觉得,对企业而言,这两类做法,都是得不偿失的。


因为这样做,会让 “从左起,1、2、3、4”这个排序失去价值。没有这个前提,也就谈不上“和用户的使用频率保持一致。


而且,这种默认不显示左边第一个频道的做法,有时候会让用户产生一种被绑架的感觉(默认显示收费频道),有时会让用户感觉企业在自作聪明(默认没显示收费频道,但也没显示核心频道)。



3 符合用户预期


主要有两个预期,逻辑预期和习惯预期。


3.1 逻辑预期


用户确实很懒,但不代表用户不会思考。


比如前文提到的,网易云音乐的“私人 FM“功能,在我的认知里面,”私人 FM“和”每日推荐“一样,都是个性化推荐,性质极其相似,应该放在一起。


所以,当我在新版里的“每日推荐”旁边找不到“私人 FM”时,心里就觉得很奇怪很不解,心想这么好的功能不会是给删了吧。


后来某一天,当我在第三个一级频道“我的”里面发现“私人 FM“的时候,我又觉很别扭,不好用。


另外一个例子,Keep 的动作训练。 


在新版里面,一开始我是去“发现”频道的“动作库”找的,怎么找都找不到,跟找不到网易云音乐的“私人 FM“是一样的心情。


因为我觉得,“动作训练”和“动作库”,是很接近的一对事物,从逻辑上来讲,用户会觉得这俩事物挨在一起,或者会猜他们是不是挨在一起。


3.2 习惯预期


这里的用户习惯,主要有两类。一类是自家产品培养出来的,一类是市面上的产品培养出来的。


通常情况,一级频道的设计,是要符合用户习惯的。


最忌讳的情况是,自己一手培养的用户习惯,到最后自己再一手去打破,这样很容易引起用户的烦躁、不满和失望等负面情绪。


比如 3.1 段的两个例子,同样也没有符合用户的习惯预期。因为在最开始,网易云音乐的“每日推荐”和“私人 FM“是挨在一切的,Keep 的“动作训练”和“动作库”也是融合在一起的。


4 良好的扩展性


就一级频道而言,重大功能和通用功能是最有可能扩展出更多子功能的。所以,就扩展性而言,需要重点照顾到这两类功能。


通用功能大部分都收纳在“我”这个一级频道,通常也是一个列表的样式,天然自带良好的扩展性。所以,扩展性的难点和重点,最后是落在了重大功能这里。


在一级频道,重大功能的展现形式,通常有两种。


一种是像核心功能一样,直接把重大功能的内容铺陈出来,典型代表是网易云音乐的“云村”。另外一种是把各个重大功能都收纳起来,只展示一个入口,典型代表是微信的“发现”频道。


对企业而言,现实问题是,当重大功能的数量上升到两个、三个甚至更多时,如何展示他们?


市面上的常规做法,也是两种。


一种是像网易云音乐和 Keep 这样的,直接开辟一个新的一级频道,供重大功能使用。还有一种是微信这种,把所有重大功能都收纳起来,有新的重大功能出现时,新增一行列表即可。



个人推荐微信这种做法,因为这种做法的扩展性最好,可以应对无穷尽的重大功能。


至此,我们简单总结一下。个人看法,四大类功能,具体咋摆放,并没有标准答案,但是可以参考以上 4 个原则。




02 微观上讲,有没有补充和例外?


有。借这个话题,聊两个比较特殊的问题。


1 顶部标题栏的两侧,适合放什么功能?


先来分析一下这个位置,顶部标题栏的两侧,位于屏幕的左上角或右上角,是个很显眼的位置。


个人认为,有三类功能比较适合这个位置。


第一类,是和当前页面内容有密切关系的功能。比如“编辑”型功能,可参考微信读书“书架”频道的“编辑”。再比如“新增”型功能,可参考 Twitter 首页信息流的发推图标。此类功能,最适合这个位置,而且一般也没有更合适的位置来摆放他们。


第二类,是比较高频的通用功能或重大功能,比如搜索、消息、设置等。


第三类,是某些高频功能的快捷入口,比如微信的扫一扫和收付款。



除此之外,如果是一个比较低频的功能,不管是通用功能、重大功能还是辅助功能,放在这里,都不合适,因为会对用户形成打扰。


2 一个功能,最多可以出现几次?


大部分功能,在 App 里只会出现一次。但在日常使用各种 App 的时候,我们也会多次看到同一个功能,在不同的地方。


有时候,能看到三次,比如搜索,在微信、知乎和网易云音乐都出现了三次,我们也不会觉得哪里不对劲儿。实际上,搜索虽然出现了三次,但也没有引起我们的特别注意。


还有一些功能,是出现了两次。我们在第二次看到的时候,会有点烦躁,心想怎么又来了;有时候会有点困惑,心想下次我该用哪一个,哪一个最快捷。


这中间有什么原则可以参考吗?


先来看下搜索,在微信、知乎和网易云音乐,都是比较高频的功能。换句话说,用户在不同的一级频道,都有可能需要搜索一下,所以搜索出现三次,在不同的一级频道,是有这个需求存在的。


搜索以外的功能,个人认为,只有一类适合出现多次,通常两次足矣。


那就是,此类功能确实比较高频,同时路径又比较长,使用起来不够方便。这时候,就适合给此类功能一个快捷入口。这个快捷入口,一般是出现在标题栏。



一个功能,如果只是单纯的重复出现两次,两次都没出现在标题栏。那给用户的感觉,就是,App 并不是在给我提供快捷入口,而可能只是通过重复的方式来强推这个功能,就容易产生烦躁和困惑的负面情绪。



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

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

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

交互体验思考|产品体验

周周


本文大纲

一、好的收藏体验这么做

二、互动信息隐私的保护

三、确定按钮放左边or右边?

四、手机实体键分布的合理性

五、静音键存在的必要性

六、经典的旋钮式交互



iOS界面设计:12个优秀案例激发你的灵感

seo达人


那么,如何设计出一款界面精美的移动端App呢?

如果你是为iOS设计应用程序,那么此文你可以好好看一看。我们都知道用户界面会直接影响到用户体验。所以本文中,我首先精心挑选了12款最佳iOS移动应用程序模板和案例,它们都有着优秀的iOS用户界面设计(iOS设计模式)和良好的用户体验,涵盖生活类,杂志类,体育类,天气类,网上购物类等等。此外,本文还提供了一些iOS人机界面设计指南。希望能对您有所帮助。

1. City App

类别:导航

系统要求:支持iOS 9.0以上

City App是一个iOS应用程序模板,也是一款以用户为中心的信息类集合软件。City App用于提供城市指南解决方案,并可以显示你所在城市的有趣地点,并加以描述性介绍。

用户还可以直接通过相机照片搜索图片所在定位,一张图片就是一个数据的集合。Admin后台可集中管理地点数据,但您可以对其编辑,更新或删除。来自世界各地的风景优美的图片是界面色彩的主要构成,非常美观。

 

2. Triibe

类别:生活方式

系统要求:iOS 9.3或更高版本,与iPhone,iPad和iPod touch兼容

Triibe是一个引领全新的社区类iOS应用程序,它是专门为制作达人设计的一款产品。它提供一种最简洁、直观的方式展示你的手工创作和学习创意。任何题材设计,包括工艺,烹饪,家居,时尚等等,都可以得到展示。该App的一大特色使其精美的界面,用户在这里上传和展示其手工作品,搭配纯净的浅色背景,几乎和任何的设计作品都能呼应。

 

3. Design Events near you

类别:活动

系统要求:没有限制

Design Events,顾名思义,就给人一种充满设计感的印象。它是由来自印度的一位才华横溢的设计师Johny vino设计的。它一款典型的iOS应用程序,主要用于发现你身边的各种设计活动以及您所在城市和附近地区的各种户外活动。它可以智能的进行有趣的活动推荐。该App的动画交互和过渡都非常简洁流畅,搭配明快的配色,让人觉得眼前一亮。

 

4. Trove

类别:播客和时尚

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

这是一个非常酷炫时尚的iOS应用程序。借助Trove,您可以随时随地找到自己喜欢的风格,获取来自世界顶级风格影响者的无尽灵感和建议,追随顶级时尚博主。浏览“精选”服装,可以发现并关注与您风格一致的博客。此外,“My feed”选项卡,可以让您随时查看收藏夹,并将物品添加到您的收藏夹中,以便稍后再购买或可以选择立即购买,你的所有选择都是自由的。

 

5. Nowait Guest

类别:食品和饮料

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

Nowait Guest是一个简化生活的iOS App。使用该应用程序,可以为您节约大量的订餐等待时间,很餐厅都已经开始投入使用该App,以方便其顾客可以提早了解其订餐情况,包括Chili’s,Buffalo Wild Wings,First Watch等。用户在家时,就可以随时查看附件餐厅的当前等待时间,然后做出决定是否前往。餐厅的图片使用非常吸睛,整个界面看起来让人觉得“垂涎三尺”。

 

6. The New York Times

类别:杂志和报纸

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

这是一款家喻户晓的应用程序,帮助您随时随地掌握最新信息,对于新闻爱好者和喜欢阅读的用户而言,这是一款比书美观,但和书一样能用文字传达信息的程序。该程序与iPhone,iPad和Apple Watch的NYT应用程序一起获得过闻类应用程序奖项。它具有新闻快讯,多任务处理,晨报和晚报,播客,保存文章以供日后在任何设备上阅读等功能。

 

7. iPhone X – Todo Concept

类别:杂志和报纸

系统要求:iOS 9.0或更高版本。与iPhone,iPad和iPod touch兼容

iPhone X – Todo Concept是由Jee-Jeong为Norde设计。它是基于iPhone X概念而制作的一个新原型。该原型的草图和psd模型都可以免费下载。它是设计师特别为iPhone X的发布而设计的。它的动画过度和转换都非常流利,其色彩选择鲜明大胆,极富感染力。留白的界面设计模式,和各种纯色背景都能形成鲜明对比,突出了重要信息,又美化了界面。

 

8. Cloud Music Offline MP3 Music

类别:音乐

系统要求:iOS 9.3或更高版本,与iPhone,iPad和iPod touch兼容

对于喜欢听音乐的人来说,这是一款不容错过的音乐应用程序。您可以轻松地将音乐从云端下载到您的设备并脱机播放。您的设备上就是一个无限量的音乐库。其音乐播放列表非常有趣,设置了动画多样的操作按钮。整个界面白色纯背景,干净而简洁,用户的注意力会停留在其喜欢的音乐上,不会分散。该程序支持所有最流行的音乐文件格式:.flac .mp3,.aiff,.m4a,.wav 等等。

 

9. KicksOnFire: Buy Sneakers

类别:运动

系统要求:iOS 8.0或更高版本,与iPhone,iPad和iPod touch兼容

这个应用程序是是专为运动鞋发烧友设计的,主要是推送新款运动鞋的特别发布日期及其相关新闻。该程序是App Store下载量最大的运动鞋发布日历类应用程序,不仅是获得第一手运动鞋咨询,您还可以在这里购买您最喜爱的运动鞋。其推送会基于您的个人资料智能进行个性化的发布和价格估算。

 

10. Airbnb

类别:旅行

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

家喻户晓的一款App,风靡全球。当您准备旅行,从Airbnb开始享受难忘的旅行体验吧。这里,所有关于旅行的事情都变得更加美好,比如寻找旅行冒险,远游或找到一个全新的地方。游客可以获得度假屋租赁,体验一种新体验,并在世界各地参观的地方。如果您有房屋待租,Airbnb也是一个最佳平台,在这里,你绝对会当一个优秀的“房东”。

 

11. Local Weather Radar & Forecast

类别:天气

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

该程序是一个当地突破性的天气新闻播报App,也是一个美国本地,乃至世界各地的交通应用程序。只需一个点击,就可以来回切换地位,以便随时查看您的朋友和家人所在地的天气情况。该程序还可以以小时来记录您所在地区的气温变化情况,形成以个独特的“气温变化”列表。

 

12. Sofa

类别:电影,电视和书籍

系统要求:iOS 9.3或更高版本,与iPhone,iPad和iPod touch兼容

这是一款iPhone应用程序,是可以让您沉浸在书籍,电影或电视节目中度过美好时光的一款App。您可以自定义创建电影,电视节目,书籍等列表,也可以将电影,电视节目和书籍添加到任何列表中。当您需要搜索某一条目时,可以通过向下滑动操作来直接解锁。

以上是2018年12个非常棒的iOS移动应用程序,它们中的大部分都位于App Store排行榜的首位,下载次数和使用人数都几位可观。看了这么多成功的iOS应用程序,作为设计师,你有没有思考过,这些App成功的秘诀的是什么?

不难发现,出色的用户界面和用户体验至关重要。iOS设计主题将就明晰、尊重和深度,这意味着,在整个iOS系统中,文字在任何尺寸的设备上都是清晰易读的,图标是精确而清晰的,并且需要流畅的动画和交互,有序的视觉层次等等。总之,您设计出来的App需要满足用户对质量和功能的高期望值,才有可能成功。

 

那么,设计一个美观精细的iOS移动界面都有哪些必须注意的点呢?

1. 排版

1)字体

字体选择不宜多,多则杂乱。只需使用单个字体并使用几种字体变体即可。苹果公司使用San Francisco,并根据产品功能选择字体。例如,在iOS 7中使用Myriad(Pro)Light,在iOS 9中使用SF-UI。在iOS 10中,旧金山变体是SF UI Text和SF UI Display。你只需按照规则即可。但为了达到文字的易读性和可读性俱佳,关于字体选择和字体布局,你还是要根据具体情况仔细斟酌。

 

2)字体大小

iOS的字体大小有其比较明确的规范,具体查看下表:

 

2. UI设计中的颜色

色彩的魔力不言而喻,人都是视觉性的动物。颜色可以传达活力和信息,提供视觉连续性,响应用户行为提供反馈、帮助人们可视化数据。自iOS 7以来,Apple一直在为其操作系统界面和预设应用程序设置色彩明朗鲜艳的调色板。关于颜色的选择比较自由,你可以使用下面列出的默认iOS调色板,也可以自己定制,以便在同类App中可以脱颖而出。

了解更多:如何在UI设计中明智地使用颜色来创建完美的UI界面?

 

3. 图标

iOS的图标风格是简单易懂,并且专注于某个功能点或者信息点。通常情况下,iOS应用程序需要使用到不同尺寸的图标。比如,用户在安装某一App后,在主屏幕可能需要使用较小的图标,但该程序在App Store里又需要更大的图标。关于iOS图标大小,也有比较明确的规范:

 

4. iOS 11中的更新

1)加粗的导航设置

这几乎是iOS 11中最令人印象深刻的变化。使用粗体标题可以让用户快速了解其当前位置,并进行快速标签切换。

 

2)界面布局中的空白区域

iOS 11的标题文本包含一组元素,其中包含图片和描述,这些元素可以保持组元素之间的较大间距。在这种情况下,设计元素保持足够的间距并且可以用于区分不必要的装饰元素之间的层次关系。

 

地址:Mockplus

作者:jongde

 转载请注明:学UI网》iOS界面设计:12个优秀案例激发你的灵感

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

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

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

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

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



如何在界面设计中使用留白

seo达人


  01 .认识留白 

在介绍如何使用留白提升用户体验之前,我们需要先明确留白的意义。

留白是页面元素与元素之间,以及元素周围的空间。当设计师谈论留白时,实际上说的是负空间,术语“负空间”起源于传统艺术形式,它让我们更准确地捕获物体的形状。

“Suprematism: Self Portrait in two dimensions”

负空间就是元素之间的部分  by Kasimir Malevich

 

虽然我们称之为留白,但并不意味着就是白色的。只要该空间没有任何的文字和图像,即使被填充了任何颜色,这也算是一个留白。所以留白与实际的白色并没有关联,“留白”就是“负空间”。

 

 02 . 为什么留白很重要 

留白是一个好设计的基本要素,与传统艺术一样,物体在GUI里也需要负空间,文字,Button,Logo,和其他元素需要空间去呼吸,所有优秀的用户界面里,从顶部到底部,页面中所有的元素都有适当的留白。

空白可分为两种类型:大留白和小留白。

大留白

 

小留白

 

Note
小留白:文本和网格之间的空白,它有助于内容的可读性。
大留白:页面上主要元素之间的空白,与小留白不同,大留白是整体设计的容器。

 

 03.七种影响用户体验的留白 

留白是平衡设计元素的好工具,帮助我们更好得组织内容,提升视觉信息传达的体验。

— 1 强调特定元素 —

强调某种元素,是设计师最常见的任务之一,虽然设计师可以用许多视觉方法让用户聚焦在某些特定元素上,在焦点的周围运用留白往往都能获得比较好的效果。

距离和注意力之间有特定的联系,较大的距离能吸引人的注意,周围的缺失使现有的元素更佳突出。设计师会运用合适的留白去强调重要的元素,例如一段内容,较大的Padding值会加强这个区域的吸引力,因为屏幕上没有其它元素可关注。

物体周围的留白越多,就越容易吸引眼球。

在下面的例子里,Google在设计中大力倡导留白,留白很好地传达了设计的意图,我们的注意力在页面的主要目标上,不会分散给其他区域。

MailChimp的主页运用了相同的方法,来突出操作按钮(call to action),你会注意到“Sign Up Free”这个按钮立刻吸引了人的注意。

 

— 2 链接相关元素 —

当我们在检查元素布局时,通常把它看做是一些对象的组合,这是因为我们的大脑会根据物体之间的相对位置,来创造一个关系模型。格式塔的法则解释了,临近的物体会被看做是一个整体。留白也提供了一种视觉线索,看一下这张图:

很可能你看到的是两组点阵,而不是12个原点,这是12个相同的点,唯一不同的是他们的间距不同。

这个法则也可以用于交互设计,我们来看下面的Web表单。

  • 相关元素成组:我们知道,一组元素靠在一起时,看上去是有关系的,所以相关的标签要靠得近。左图较难传达出标签与输入框的关系,而通过调整间距,如右图,表单的可浏览性提高了。

  • 相关信息成组:众所周知,长的表单让人感到压迫。用户在填这些表格的时候会变得犹豫。把相关的字段组合在一起,能帮助用户了解他们必须填写的信息。以下的形式中,两种表格都有相同数量的字段。不同的是右边划分了三个组,内容的数量是相同的,但是给用户的印象大不相同。

 

— 3 防止视觉杂乱 —

许多的App和网站承载着太多的信息和元素,没有足够的呼吸空间。这通常由于产品创造者希望传递太多的信息,不幸的是,用户的关注度有限,越多的元素争抢着注意力,用户能够关注到的就越少。

可以看下面的例子,这是一个元素太多引起的极端案例。

当每个看上去都一样的时候,用户选不出重要的那一个

 

许多网站有着相同的问题,缺乏留白会给用户的眼睛和耐心带来压力,充斥着文字和图片的网站使用户产生挫败感,使他们逃离。

杂乱的页面没有吸引力,并且不会让用户想要阅读内容,尤其是当没有视觉层次时。

过多的信息负载让界面变得混乱,那么减少混乱就能提高界面的可理解性:通过消除干扰,你可以强制用户只关注即时可见的内容,你可以用留白来减少压迫性,留白可以减少噪音,让用户更能聚焦。当布局达到了留白平衡,各个元素更容易被解读时,就会带来更好的用户体验。

Tip
请尝试“5秒测试”,观察一个页面5秒钟,然后回忆你记得的内容,是否是你想要强调的元素,这将帮你了解页面中是否有合适的留白。

 

— 4 通过互动内容引导用户 —

如果你希望用户的视线从一个点流向另一个点,你需要给他一个这么做的线索,这个线索就是留白,留白运用的得当时,能为页面创造自然的视线流动。

特定的留白可以实现有效引导、保持读者的兴趣,如下图所见,Dropbox通过锯齿模型引导用户浏览一系列产品的关键特征。

空白可以帮助设计师讲故事

 

不对称是另一种留白技巧,可以用来引导用户对某一部分的注意,当一个元素运用了不对称留白,它会立马就会从周围的元素中跳脱出来,看起来更有活力。如果你要在页面中设计一个链接或者按钮,这种方法可以有效引起别人的注意。

非对称留白非常适合聚焦页面上的特殊区域

 

— 5 提高可读性 —

内容为王,内容是大多数应用程序和网站的价值,这就是为什么良好的可用性的一个关键方面是内容的可读性,很多因素可以提高可读性,比如字体的大小和颜色,或使用标题,留白是其中一个重要因素,因为它对内容的可读性有直接的影响:

行间距可以大大提高一段文本的可读性,一般来说,行间距越大,用户阅读时候的体验就越好,但是太大会破坏统一性,使得设计中断。

段落和文字块之间的留白有助于帮助人们更好地理解阅读的内容,根据2004年的研究,这种空白增加了近20%的可理解性

 

— 6 运用视觉分隔线 —

设计师经常使用横向或纵向的线去创造分隔线,虽然这样的分隔线在大多数情况下是可以的,有一个主要的缺点,大量分隔线的使用会导致视觉的噪音,造成密集拥挤的页面。

随着用户的偏好向更简洁的界面转移,对UI中的基本元素进行解构是成功的关键。可以用负空间来布局,而不是线,更少的分隔线能营造清爽、现代和更实用的感受,大方地使用留白可使一些复杂的界面看起来更简洁友好。这一变化背后的真正意义在于,在关注内容和功能同时消除冗余的元素。

 

— 7 创造成熟优雅的感受 —

虽然留白经常被看作是改善用户体验的技巧,但它也可以被用于纯粹的审美目的,大量留白的网站能反映出极简和奢华感。

留白有助于提高整体设计的基调——通过把更多的焦点放在产品本身,使产品看上去更奢华。

 

04. 关于利益相关者的几句话 

现在你可能知道了留白的重要性,而另一方面,留白可能引起设计师和利益相关者的矛盾。“留白太多了,我们可以用来做什么?”是我们经常从利益相关者(客户或经理)那里听到的。

把这种要求作为一个机会去教育利益相关者,作为设计师,我们的工作就是帮助他人理解为什么留白是用户体验重要的组成部分,宣扬并解释你的思考过程,如果这不起作用,你可以采用A/B测试,测试一个设计的两个版本,一个由设计师提出,一个由客户提出,用户可能会喜欢那个不那么混乱的版本。

 

05.结论 

留白不是一个空白的画布,而是一个强大的设计工具,但是这个工具很难掌握:现实应用中的留白既是艺术也是科学,掌握如何使用留白来创建良好的布局需要实践。你实践的越多,学到的也就越多。

 

原文地址:medium

译文地址:51UXC(公众号)

译者:51UXC 翻译社

 转载请注明:学UI网》如何在界面设计中使用留白

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

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

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

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

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



费茨定律如何指导界面设计

seo达人

什么是费茨定律

费茨定律是人类运动的预测模型,主要用于人机交互和人体工程学。该法则预测光标/手指从一个起始位置移动到一个最终目标所需的时间(T)由到目标的距离(D)和目标的大小(W)所决定,用数学公式表达为时间 T =a + b log2 ( D /W + 1 )。其中a、b是经验常数,a代表手指开始到停止的时间,b代表手指的移动速度。

举个生活中一个开灯的例子:

早期的开关只有一个手指大,每次开灯的时候都需要将手移动到开关上方,然后伸出手指调整到适合位置然后在按下。由于按钮小,在没开灯的时候你根本不知道它在哪里,需要不停的摸,所需时间就比较长。后期大家意识到了这个问题,将开关按钮设计变大,人们操作时只需要将手移动到按钮上方,由于面积大不需要调整直接按下即可,所需时间就比较短。

 

如何指导界面设计

费茨定律应用比较广泛,其在移动界面设计中也有很好的启发意义,结合费茨定律公式可以得出指导我们设计的三个要点:

1. 按钮越大,所需时间越短

根据公式,当到目标的距离(D)一定时,目标大小(W)越大,所需时间越短,反之越长。下面以支付宝的登录流程为例,如下图所示:

左图是支付宝初始页,该页面主要让用户选择合适自己的操作方式。因此在设计上采用登录和注册按钮并排的方式,目标区域较小,给用户充分选择的时间。

中图和右图,界面中仅仅只有一个按钮,其他注册、遇到问题都可弱化用文字高亮的样式展示,用户在操作时基本不用想就知道点击下一步按钮。大大的减少了操作时间,让用户可以专注于登录上。

 

2. 距离越远,所需时间越长

当按钮大小一定时,手到目标的距离越远,所需时间就越长,反之越短。但是这里就发现一个问题,移动端如何判断手到目标的距离呢?这里我们可以借用拇指热区来进行判断。随着手机越来越大,不同机型的拇指热区会有所差异,以iPhone6右手操作为例,它的拇指热区。如下图所示:

根据图例可知绿色区域是我们手指最容易轻松达到的,橙色是伸长手指才能触达,操作相对较难,红色区域为难以触及的区域。我们可以判断手指到绿色区域的时间最短,到红色区域的时间最长。因此在设计时我们需要将重要层级高的按钮放到拇指热区的绿色部分中,让目标离手指越近,从而提高操作速度。如下图所示:

以上两个案例均是Feed流界面,在卡片中露出功能有点赞、评论、分享这三个按钮,其中大众点评这三个中点赞的重要性层级最高,因此将其放在绿色最易触达区域,单手操作离手指距离最近,而分享和评论次之,因此将其放在了红色和橙色区域,单手操作离手指更远。

其中微信读书这三个中分享的重要层级最高,因此将其放在最易触达的绿色区域,单手操作更近。

 

3. 手移动越快,越易错误操作

其实不管你手的速度有多快,当距离较远、按钮较小时,当手移动到按钮上方就会停下来进行定位然后才能准确得进行操作,如果只要求速度,手移动过来直接点击有可能就点中不了按钮,容易进行错误操作。

因此在UI设计中,如果我们想要用户能够快速操作,可以为用户打破距离和大小带来的限制,结合手势操作来进行设计。如下图所示:

以微信为例,在微信列表中为了让用户能够快速操作列表,引入了手势操作(安卓长按、iOS侧滑),当长按或侧滑列表时,就会在当前位置出现操作内容,提高操作效率。

 

在移动端界面中的应用

在实际交互设计中,合理使用费茨定律,可以让我们的界面使用更流畅,错误率更低。下面我们一起来看看费茨定律的四大应用场景。

1. 来电显示场景——不同状态,不同设计方式

iOS的来电提示在锁屏和苏醒状态分别采用滑动接听和点击接听,可以很好的用费茨定律来解释。如下图所示:

锁屏时:用户手机场景不确定,很容易意外点击。在设计时就需要增加操作距离、延长操作时间,防止误操作的情况,采用滑动解锁就可以增加操作的距离,放在该场景中使用较为合适。

苏醒时:用户正在使用手机,这时候采用滑动操作距离太长了,因此设计为按钮的样式,用户可快速点击接听或拒绝,进而提高用户操作效率。

 

2. 将返回浮于底部操作栏中——缩短操作距离和时间

随着屏幕越来越大,拇指热区也发生了变化,你会发现左上角的返回按钮单手操作越来越不可能,尤其是Plus、iPhoneX的出现返回按钮显得有点鸡肋。不过在体验资讯类的产品时发现,部分界面他们将返回按钮放到类界面底部左下角的位置,下面将这两种进行对比下。如下图所示:

以今日头条的详情为例,返回按钮在常规的左上角。结合拇指热区你会发现左上角的区域单手是很难到达的。对于资讯类APP需要不断切换看的文章,返回键在左上角无疑加重了操作难度。

以虎嗅为例,他们将返回按钮移动到了底部左下角,结合拇指热区你会发现左下角的区域单手是可以轻松到达的,将返回按钮放在底部,大大的节约了用户操作时间。

需要注意的是,尽管通过分析,返回按钮在左下角单手更好操作,但是有时候习惯真的是一件可怕的事情,比如我在华西医院的微信小程序时,很少能够记住点击底部的前进和后退键,每次想返回上一级,就习惯性的点左上角,结果就直接退出小程序。如下图所示:

面对顶部返回键单手不方便点击、底部返回键又老是记不住点,同时在当前规范下又不适合大面积的使用,怎么样才能帮助用户操作呢?其实iOS按住左侧屏幕边缘向右滑既可以返回上一步,安卓自带虚拟返回键都是较为快捷的操作方式。

 

3. 合理利用手势操作——提高用户操作速度

安卓的长按和iOS的侧滑编辑大家都比较熟悉,他们多用在列表页的编辑状态,用户长按或侧滑列表,操作按钮就显示在当前位置,操作效率比较高,如下图所示:

以天猫购物车为例,大家知道长按是安卓端常用的功能,侧滑是iOS端的功能,然后天猫购物车这两种功能都支持。其主要原因考虑到安卓用户在使用苹果手机时,可能不知道侧滑的功能,因此在购物车的编辑中还加入了长按功能,让用户能够更快捷的操作。

 

4. 将操作按钮进行收纳——阻碍用户操作

在设计时如果控制不经常使用,或者想阻碍用户操作时,就可以把操作按钮放远一点,同时在设计上可以将其收纳,加大用户到操作难度。如下图所示:

以大众点评详情为例,在右上角并没有直接放举报到按钮,而是放到更多到按钮,一个原因是为了方便后期的拓展,另外很重要到一个原因是不想让用户举报加深用户的操作难度。

 

总结

本文主要分享了费茨定律在UI界面中的应用,结合今天的分析,总结起来主要有四个要点:

  • 1、我们想要更容易点击到目标,就需要将一个页面的主操作按钮放大。
  • 2、我们想要让用户快速点击目标,操作更方便,可以将目标放于拇指热区轻松触达区域。
  • 3、我们想要让用户快速移动时,就可以利用手势操作,它打破距离和大小的限制,从而让用户可以快速操作。
  • 4、我们不想要用户操作或不常用的控件时,就可以将按钮进行收纳,加大用户操作距离,从而增长用户的操作时间。

 

参考文献:

Technical Artist的不归路 —— 费茨定律(Fitts’s Law)在UI设计中的使用  

设计法则: Fitts’ Law / 费茨定律(费茨法则)

《通用设计法则》立德威尔著   朱占星 薛江译 中央编译出版社 2013年9月北京第1版

 

原文地址:海盐社(公众号)

作者:风筝KK

转载请注明:学UI网》费茨定律如何指导界面设计

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

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

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

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

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



界面设计中的三维设计法

seo达人


随着当今越来越多的信息需要被展示、曝光,而移动设备的屏幕空间又有限,为了减少用户在使用应用时的跳转,减少用户的路径,设计师们开辟了第三个维度——即在 z 轴上展示叠加的分层动效进行交互表达,从二维到三维,这样更能有效利用手机屏幕上的有限空间,这也是以后界面设计的大趋势。

这个思维方式最早是在安卓的MATERIAL DESIGN语言上体现出来的。(以下简称MD)

 

Depth(深度):

Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.On the web, the UI expresses 3D space by manipulating the y-axis.

在MD的设计规范中,用Depth来说明界面设计中的深度,既而在界面设计中引入了Z轴的设计思维,将界面设计由二维设计引进了三维设计思维的地带。MD通过抽象化纸片在物理世界中的形态,定义除了各种信息层级以及常用状态的表达方式。

再来看看,如今iOS的最新版本iOS 12,也已经开始向这一方向进行发展。最典型的要属以下的iOS的内置应用:股市、语音备忘录、地图、钱包、音乐、播客、App Store等。

三维设计法,在界面设计当中,主要分为两个方向来运用,视觉设计和交互设计。

人们通过双眼能够分辨出物体远近大小的形态,因此如果利用这样的视觉规律,便可以在画面中呈现出真实的效果,突出视觉的立体化。

因为使画面产生三维的模拟真实的效果,可以画面更具有吸引力,我们之所以能够看清楚物体,是因为有光的存在,现实生活的影子是因光而产生的,才是一个真实立体形。如果能恰当运用光影的效果,那将会让图形在进行三维空间转换时变得更加凸显。

当今,在界面的视觉设计方面,通过层叠、卡片化和投影的设计手法来对界面的内容进行处理,可以增加界面的层次感。在如今同质化严重的扁平化设计下,能给人焕然一新的感觉,同时也给人一种内容呼之欲出的感觉,加强了点击的欲望。这样的设计手法让界面的Z轴空间得以加强,必将是下一个新的趋势。

例如:KEEP、潮汐、虾米音乐

 

例如:Dribbble 和 Behance

图片来源于网络

 

而在交互设计方面,想同时展示多种内容时,假设对一个需求有着很强的曝光要求,或者是想让用户知道有这项内容的存在,但又不想让页面内容过长,导致被忽略或难以找到时,可以采用页面Z轴层级覆盖的表现形式。

采用了Z轴层级覆盖的架构形式,用户主要的交互操作变为上拉、下拉来阅读信息,减少了点击跳转这一类的操作,减少了用户的操作成本。且滑动手势,是以后人机交互发展中的一个必然趋势。

在一些APP中有所表现的有:豆瓣FM、豆瓣详情页等。(大家可以从这些APP上获取设计灵感)

豆瓣FM

 

豆瓣(电影详情页)

 

例如:

上图是京东(APP)的商品详情页,这时候我们接到的需求是将上图的文案放进这个界面中。

要知道在寸土寸金的APP界面中,每一个位置都是十分的宝贵,一但放置不佳,就会给用户的视觉流造成一定的影响,使得用户体验下降。况且,还是京东这样流量巨大的电商APP,位置便显得更加宝贵,而上图中的红色标记范围就是我们的限制区域,下面我们先来看一个不合理的做法。

上图我们是直接加了一个界面,将这个模块设定为可以进行跳转,从而达到显示完整(文案)的需求。

这样做,不仅增加了用户的路径,而且还会给来回切换的用户造成一定的困扰,消耗了手机的资源的同时,下面的留白也显得很浪费、空旷,视觉上就很不美观。

那么,京东是怎么做的呢?

京东采用了一个浮层设计(Z轴),将全跳转改为半跳转,这便是在界面设计中的Z轴运用,这样既可以达到文案所要求的曝光,也能最大利用让界面的空间,实现与原场景的完美衔接。

通过在 Z 轴上进行分层设计,模拟物理世界中人与物的真实的交互模式,帮助用户理解产品设计,将信息更好的浅层化,这样可以给设计师们带来更多发挥的空间。

在使用这个思维来做设计时,可以事先考虑以下几点:

  • 根据用户使用体验,来判断是否需要使用Z轴分层交互。
  • 这样做是否能帮助用户更好的理解你所做的设计?
  • 空间感设计主要意义是能正确的引导用户,并建立起对产品的使用逻辑。
  • 每一个界面层级只需要表现一件事。
  • 当你想要在界面中加入一个菜单栏但发现没有空间?这时候可以考虑使用Z轴的设计。
  • 谨慎使用Z轴层级交互,因为它会增加空间关系的复杂度。
  • 多参考现实世界中的真实交互,它给你的预期和感受,在互联网设计中的很多灵感都来自于对真实世界的理解。

 

总结:

我们在做设计时,可以把当前的界面可以想象成一个的三维世界——分作X轴,Y轴,与Z轴,在这三个坐标轴上,可以进行思维上拓展。

在交互设计当中,减少跳转便是减少用户路径,就是使用各种方法在三维空间中,用x轴、y轴、z轴做出最合适、合理的用户体验设计。

 

原文地址:站酷

作者:ChrisIce

 转载请注明:学UI网》界面设计中的三维设计法

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

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

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

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

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



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

分享达人

What 是什么

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

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


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

相关模式 :语句填空


Why 为什么

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

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


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


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

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



When 什么时候使用

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


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


使用条件

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

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

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

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

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


How 如何使用

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

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

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


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

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

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


Example 案例

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

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


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

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

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

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

案例三:Photoshop 创建新文件

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

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


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


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

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

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



按钮组 Button Groups:大量的操作按钮如何排布与设计?

分享达人

What 是什么

简介: 按钮组是把相关的动作组织成一组按钮的设计模式。按钮组的内部内容彼此水平或垂直对齐,并采用相似的视觉设计。如果超过三个或四个动作,往往会采取多个分组。

例子: 语雀编辑器的顶部工具栏

undefined


Why 为什么

按钮组可以让界面不言自明。在复杂的布局中,被精心安排过的按钮组会很容易被用户感知和使用。一方面,它们在界面上往往非常明显,用户能够一眼看到有这些功能可以进行相关操作。


大家所熟知的格式塔原则(Gestalt principles)也在这里起作用。彼此相邻的按钮往往暗示着这些按钮的功能相近,因此会让用户感觉到这一组按钮可以完成类似的功能。相对的,不同的按钮分组往往暗示着不同的功能类型,因此彼此间应该保持间距,或用不同的形状,或用分割线进行区分。


When 什么时候使用


如果你需要在界面上展示许多操作按钮,且需要确保它们随时在界面上可见。但同时,你又需要用图形化的方式组织它们,以使它们看起来不会特别散乱。

这些动作中有许多是彼此相似的 —— 它们有相似或互补的效果,比如,它们的功能语义相类似 —— 由此它们可以三五成组地放在一起。

按钮组可以用在对产品全局有效的操作上(例如「打开」和「选项」操作),或特定的一些通用操作(「保存」、「编辑」和「删除」),或特定的某些操作(例如布局的「对齐」、「分布」)。不同范围的操作不应当被到一个组中。


使用条件:

· 存在大量操作按钮;

· 希望用图形化的方式组织这些按钮;

· 操作按钮间存在功能相关性和差异性;


How 如何使用

这个模式的总结简单到像是一句废话:把相关的操作按钮分成一组。


但如果详细展开就会有更多的介绍。比如:


· 如果需要包含文本说明,尽量使用两个字或三个字的动词短语,不要使用专业术语。

· 不要把不同功能范围的按钮放在一个组,应当将它们分成不同的分组。

· 同一组的按钮应该有同样的视觉设计:边框、颜色、高度或宽度、图标风格、动态效果等。

· 在空间排布上,可以将它们并排起来作为横排放置,如果空间不太适用的话,也可以考虑一列纵列放置(例如Photoshop的左侧工具栏)。

· 如果某一个动作是核心动作,可以将其区别对待。例如网页表单中的“提交”按钮。核心动作是希望大部分用户都需要(或期待)执行的动作。让这个按钮拥有更加强烈的图形或视觉风格来让它在显得更为突出。

· 如果按钮足够多,而且它们都有小图标,你也可以把它们放在工具条或者像工具条那样的狭长条上,放置在页面的顶部。


通过使用按钮组可以避免界面上按钮或链接过于拥挤混乱,也可以避免一长串冗长的动作列表看起来毫无关联或区别。

通过这一模式,你可以创建一个较为清晰的元素层级结构:用户可以一眼看出哪些动作是彼此相关的,哪些是重要的。


Example 案例

案例一:Sketch 的顶部按钮工具区

用户需求:编辑设计文件中的对象


Sketch 也是个很典型的应用了按钮组的设计工具。Sketch顶部的按钮不少于15个, 有很多要理解和追查。 但是得益于精心的视觉和语义组织,界面按钮始终保持一定的可理解性。

undefined


案例二:macOS Finder

用户需求:按自己需求对文件进行显示修改和操作


这个案例显示了来自 macOS 的 Finder 窗口的顶部按钮组。 秉承其设计传统,按钮风格明显。 导航组是放置在左侧中的按钮组。 布局相关的按钮组放在了中间,文件操作相关的按钮组放在了右侧。这样的设计使得界面变得易于理解和使用。

undefined


案例三:WebStorm 顶部操作区

用户需求:项目执行相关操作


这个案例显示了 Webstorm 的顶部功能操作区。WebStorm 采用了按钮组的模式,将项目执行的相关操作和Git相关的操作聚合在一起,中间使用了分割线进行了区分。

undefined

文章来源:站酷  作者:Ant_Design

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

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

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



聊聊状态开关按钮如何设计

纯纯

我遇到的这个例子,和“概念模型”有关,在这里分享给大家。


这个酒店房间的开关是这样的:


酒店床头开关



酒店客厅开关



这个开关是触控式的,开关本身有亮/暗两个状态;大家迅速看一眼,我想请问大家,你们认为,亮着的开关(图1的5个灯,图2的右上、左下2个灯)对应的状态应该是打开的还是关闭的?




如果心中有了答案了,继续往下看。




之前在文章从交互维度量化用户体验中我说过一次我个人理解的最小交互模型,大概是下面这段话:


狭义的交互(Interaction)定义交互主体必须是人本身,而客体可以是产品,环境,服务等等,且不论交互客体是什么,只要主体是人,人和客体去进行交互的时候,一定是人带着一定的心理预期施加一个行为,然后客体会根据这个行为给与一个反馈(没有反馈本质也是一个反馈),而人会根据这个反馈是否符合预期去进行心理修正。如下图所示(红先黑后):


那随之而来的另一个问题就产生了,人进行交互行为时的心理预期是从哪儿来的?


人初生的时候都是一张白纸,每天重复的交互行为产生的心理预期会随着不同的教育、家庭进行变化;今年我们家在广州过年,我第一次见到两岁的小侄子,通过这一周对小侄子的观察更能体会出人其实是有某些说不清的潜能在里面的,举个例子,有一天小侄子生病了,要吃两种药,一种是甜的,一种是苦的;吃甜药的时候小侄子很开心,愉快的呀呀的说这药是甜的,而吃苦药的时候小侄子也是皱着说这药好苦,关键的问题是,出生两年来,家人从来没有对他描述过苦味是什么,也没有明确告诉他这两种药有一种是“苦味”的,但是两岁的小孩子就能尝到苦味的药在没有接触过“苦”这个词的时候就讲得出来这是“苦”。


再举个例子,还是我的小侄子,我们贵州人过年一般都会真金白银的打麻将,小侄子目睹了几天我们在麻将桌上用大把的零钱来支付,有一天我们去公园玩,遇到一个熟人给小孩子了一个红包,我们就问他“钱是干什么的呀”? 我小侄子脱口而出:“钱是用来打麻将的呀!”


为什么会发生这样的现象呢?


大概是现在的人买东西都用微信支付宝支付,所以对于小孩子的认知来说,他们由于没有见到过纸币参与交易的行为,而这几天不断被我们麻将桌上的现金冲击视觉,才会突然脱口而出这句话。


可能在我小侄子的认知里,手机才是用来买东西的。


我们互联网圈的设计行业其实能形成理论的东西不多的,大多数时候为了佐证某些东西,我们需要从心理学、社会学、行为学中找到一些理论支撑。我在做产品设计的过程中,最长这么时间一直使用的一种方法是思考用户在这个页面的心理预期。(比如在商品详情页,业务目标肯定是引导用户购买,但是用户心理上之所以点进了这个商品的详情,无非是在有购买意愿的基础上,需要一些信息去辅助决策,这时候如果你仔细思考并模拟一下你自己在购买时候点击详情页的行为,其实会发现其实影响决策的信息大多不是价格(因为价格在上一级的列表页已经标明了),更多的可能是产品描述和用户口碑等等)


在做尤其是app设计的时候,能明确每一个页面的业务目标和用户点进来的预期,其实是一件非常重要的事情,大家可以多留心在这两点上。



好的扯远了,回到状态开关的事情上来,还记得刚刚的那个图么?


酒店床头开关



酒店客厅开关


我相信绝大对数的人第一反应都是,亮着的开关对应的灯应该是亮的,因为这个符合常识,但是如果这个酒店也是这样的话,我就不会举这个例子了,没错,上面开关亮着的灯是关的,没有亮的开关对应的灯是打开状态。


我相信设计这个开关的人是为了让用户在夜晚起夜的时候使用方便,但是他完全可以用更加高明的办法,比如换成夜光材质之类的。这种设计师很愚蠢的,我观察这么多天下来,我们所有亲戚每次开关灯几乎都会误触,因为我们的心智一直一直认为的是亮着的开关亮着的灯。


这里就牵扯出一个问题,我们在app设计中如何去设计状态开关的问题。


首先需要明确,最无歧义的状态开关一定是需要具备两个意符:

其一是表征当前状态

其二是表征用户点击之后的状态。

而现在市面上很多app在这两个意符上是混的,一般都知道用icon的样式来表征当前状态,但是下面的辅助文字则是表征当前状态的和点击之后状态的都有。


这就会让用户很蒙。


比如相机app、短视频app、K歌app中就比较明显会有很多状态按钮,如下图所示是某相机app的截图,这样的设计就是“有歧义的设计”,比如“延时关闭”和“补光灯关闭”这两个文案,会很容易让人困惑这文案指代的是当前状态呢还是点击之后的状态呢?


给大家提供一个我个人的小tips:


设计状态按钮,尽量把当前状态和点击行为拉出两个层级关系来设计。


当前状态可以体现在icon上,但是不能只体现在icon上(比如他这个延时关闭的图标有一个x,但是补光灯关闭又没有x,这就更加歧义了)


比如如果是我去设计它这个按钮,我会这么设计:



这样的话,确实,用户操作复杂度上会多一级(之前直接点icon,现在点icon之后需要再点开关),但是用户完全没有认知成本。


这就是我说的把当前状态和点击行为拉出两个层级关系来设计。其实这个牺牲交互成本减少用户认知成本的方法在交互设计工作中经常被我们使用,当我们遇到一个问题实在是一步很难理清的时候,不妨可以多尝试这种思路。不过这种提高复杂度的减少认知的方法,不适用于业务强指引型页面(比如购买、导航之类)


文章来源:站酷   作者:Seany

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


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

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



app中的交互手势和意符设计

纯纯


PART 1 - 唐纳德诺曼关于交互设计的可视性的基本原则


唐纳德·诺曼所著《设计心理学1-4》一直被认为是设计行业经典,我在读这一套书的时候最令我感到共鸣的不是后来被大家大书特书第四本《情感化设计》,而是第一本《日常的设计》,这本第一本书最精华的内容是阐述了交互设计的基本原则,这个原则无论是对工业设计中的人和物件交互,还是说是建筑中的人和空间交互都有很深刻的指导意义。

作为一名app产品设计,对于这几个含义理解之后,融汇到app设计的情境下,会让你对之前工作流中的『交互设计』有全新的认识。

众所周知,交互设计借鉴了心理学/设计/艺术和情感等基本原则来保证用户得到积极愉悦的使用、情感和操作体验。交互设计之所以可以成为一门学科,本质在于可交互,而可交互的前提,是可以被感知(这个我在app的视觉美成因分析那篇文章里面已经说到过了),那么被感知的方式,往往是和人的五感有关。

触觉,听觉,视觉,味觉,嗅觉。只要能被人的五感所感知到,不论是和空间,和机器,和生活中的物件还是和人,只要发生五感的共情,我们就说是可以被交互的。(注意,本文中不考虑复杂多感交互,并且只考虑交互的一方是正常生物人。)

在人的五感之中,本文依旧着重讨论视觉,因为科学研究表明,在人五感的感知信息中,视觉视觉占比达到了惊人的83%。(其中听觉11%,嗅觉、触觉、味觉机加起来占比6%),而不管是什么设计,如果可视性不佳,都不能算得上优秀。

唐纳德·诺曼将交互的可视性原则归纳为和五种基本心理概念相关,这五中基本概念分别是:示能(Affordance)、意符(Signifiers)、映射(Mapping)、反馈(Feedback)和概念模型(Conceptual Models)。


i.示能(Affordance)

示能的概念和内涵来源于吉普森(J. J. Gibson)。此外,关于有形物品如何传达出人们与它们互动的重要信息,这个特性被吉普森命名为“示能”。

"示能"这个词,狭义的理解一下,是从可视性的角度明确了一个物理对象与人之间的关系。示能是物品的特性与决定物品预设用途的主体的能力之间的关系。示能的体现,由物品的品质同与之交互的主体的能力共同决定。示能的存在与否取决于物品和主体的属性。

还是举那个诺曼最经典的例子,如下图所示:

从视觉上看这张图,我们从以往的生活经验联想一种方形的,带纹路的黄色物质,再配合长期的视觉线索,我们会知道这张图上是一个木块,那从我们的视觉线索上,知道这个木板很细,(应该)能够轻易被折断;而且很轻,(应该)可以轻易被搬走。这些就是我们通过视觉判断这张图上呈现的"示能",而明确的我们和图上这个木材的交互关系。

那再看这张图:

我们通过生活经验的联想可以知道这是一个木门,为什么会区别这是木门而不是上面的木材呢?主要原因是因为这上面有个『把手』。在人的视觉中,有时候观测物体的某项"示能"是清晰可见的,比如上图那个木材可以被轻易搬动,而有很多物品的"示能"是不可轻易被感知的,比如上面那张木材的图,我们就不能感知到这个木材是可以被『轴转动』的。

而这张门的图上,大家想象自己是一个什么都不知道的野人,看到上面这个图,只有一块特别显眼的『把手』,你作为高智慧生物,是不是应该去触摸一下,并且企图能够与『把手』进行互动?

所以总结一下,如果这个门上没有把手,作为我们人类的认知而言,可能会认为这个门不能从外面被打开,但是如果这就是一个能从外面被打开的门,但是忘记设计外面的把手,那就意味着,这个物体"示能"的视觉通道被堵塞。(视觉通道被堵塞的"示能"可以被认为是一种"反示能"),"反示能"对交互作用是起到抵制作用的。也就是说,如果这个门是可以从外面被打开,但是我为了不让大家从外面打开,我在设计之初不加从外面打开的把手,一定程度上就可以抑制大家从外面打开的这种行为。

大家明白了么?

所以为了更有效的展现某些物体的视觉可交互,示能和反示能都必须被揭示出来,即可被觉察到。如果示能和反示能不能够被觉察到,就需要人为的把它们都标识出来,我们听过一些有效的手段就可以做到,比如在直立的木头一侧加上一个『把手』,这个把手就是"木头这种物体可以被人轴转动"这种"示能"的一个提示线索,你只需要旋转把手,稍加用力即可发现这个"示能"。

所以,我们把这种揭示"示能"的符号、提示功能、线索、称为『意符』


ii.意符(Signifiers)

划重点:示能决定可能进行哪些操作。意符则点名操作的位置。

在我的文章《交互闲谈02丨app中的非必要功能和用户界面上的流量法则》中,我对app中的意符进行了自己的定义:

用户界面上的意义符号,简而言之,就是一切用户感知中可以点击产生反馈的功能集合。

但是这是在以屏幕为介质的用户界面中我个人下的定义,但是在实际生活中,人们寻找蛛丝马迹,寻找任何可以帮助他们应对和理解的符号。任何可能标识出有意义的信息的符号都显得非常重要。人们所需要的和设计师必须提供的视觉线索,就是意符。

这就是为什么苹果第一代手机出来的时候会被大家奉为圭臬的原因,他在视觉上示能和意符都及其突出,一块屏幕和一个按钮,屏幕用户点击滑动交互,按钮用于点击交互,学习成本很低。大家试想一下之前的塞班系统,左上角和右上角两个按钮是和屏幕左下方的功能和右下方的功能映射,虽然也很易于理解,但是当大家看到苹果这么简单的手机的时候,相信所有人都是惊讶的:



△.示能和意符的关系

示能揭示了世界上作为主体的人(这里只考虑人),如何与其他东西进行互动的可能性。

一些示能是可视觉感知的,一些则是需要视觉之后联想感知(即不可直接感知)的。

意符指示能操作的位置。

一些意符是生活中的符号、标签和图样,如门上用符号标记的“推”、“拉”或“出口”,或指示所要采取行动的箭头和图示,或是朝向某个方向的手势,或其他的说明。一些意符仅仅是预设用途,譬如门的把手,或某个开关的物理结构。

划重点:在设计中,(尤其是UI设计中)意符比示能更重要。

示能和意符是本文中最重要的,下文会说到在app中的意符设计。


后面的映射,反馈和概念模型内容我简略说:

iii.映射(Mapping)

有一些自然映射是生物本能的或者是文化赋予的,比如如按照通常的习惯向上移动手势意思是增加,向下移动意味着减少,。当一系列可能的操作是可见的,当控制和显示契合自然映射时,设备就会容易使用。(具体参考我写的交互闲谈丨01里面那个视频手势的例子)

iv.反馈(Feedback)

反馈是控制论、信息论的著名概念。当我们做出了一个操作的时候,内心的预期是需要获得反馈的,如果在一个该获得反馈的地方没有获得反馈,人就会很疑惑,比如如果一个app的按钮点击之后没有跳转或者没有新的变化,那么人就会呆滞,如果反馈不及时,人还有可能会放弃。(比如网络不好导致的跳出率,比如一个不可点击的按钮做得太逼真用户疯狂点击发现没反应之类的 = =)

过多的反馈可能比过少的反馈更恼人。设计拙劣的反馈可能是旨在降低成本,最糟糕的是不恰当的无法解释的反馈。指手画脚的人通常是正确的,但他们的评论和意见如此之多,唠叨不停,会令人分心,而不是给予帮助。我记得很多年前(大概是2010年左右),还曾经见到过一款应用,用户但凡点击无效位置就会弹出一个Error的模态框,简直是令我绝望。 = =

v.概念模型(Conceptual Models)

概念模型通常是高度简化的使用说明,告诉你事物是如何工作的。概念模型只要有用就行,不必完整或准确。概念模型通常可以从设备本身推断出来,一些模型通过人与人相授,还有一些来自手册。(比如app新版本中那些半透明箭头加上文字的功能指引就是概念模型的一种,手游中一开始的新手指引也是。)




PART 2 - 屏幕的示能与基本的交互方式


一个人和一块(未通电的)触摸屏幕,在不借助道具的情况下到底能衍生出多少种交互方式?从五感出发去深入剖析的话大概分为:

嗅觉:用鼻子闻一闻这块屏。(发现并没有味道)

听觉:用耳朵听那块屏发出的声音。(发现并听不到什么声音)

味觉:用舌头舔一舔这块屏。(诶有点咸?)

视觉:用眼睛去看这块屏。(这是一块光滑的类似于玻璃的物体)

你们发现了么,对于一个原始的屏幕设备,比如手机,我们忽略按钮什么的物理按键,光思考那块没用通电的屏幕,如果你作为一个心智未开化的人(或者现在假设你就是一只猴),你真正对屏幕有建设的交互一定是在触觉上,我这么说大家能理解吧。我们不妨换位思考一下下,你现在是20年一个准备做概念手机的交互专家,你去穷举任何人和屏幕的交互,唯一有『肢体接触』的方法就是用手指(或者脚趾)去触摸,还有就是用舌头舔。用舌头舔会有口水,不利于屏幕的识别,万一漏电了画面太美不敢想。

所以,结论是,人类看到一块屏幕设备,这块屏幕设备的视觉示能最终导向了,人和屏幕的交互手段被定位在触觉上,而脚趾相对于人类来说没有手指灵活,所以最终我们把交互规定到手与屏幕的交互(简称交互手势)。

触觉:

我们来穷举一下手指和屏幕的交互方式:(图片来自Graphicpear,中文是我自己加上的。)


不要纠结于图,往下看,其实现今的所有的手势交互,我们基本操作分为:

一根手指:单击、双击、长按、拖动、上下滑、左右滑。

两根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

三根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

四根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

五根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

双手双指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

双手十指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

(上面写的双手双指是指每只手出一个手指,比如你们在手机修图时候的某些旋转操作)

其实你如果还要穷举的话,还有双手每只手一个指头、双手每只手两个指头、双手每只手三个指头、双手每只手四个指头这些奇怪的情况,但是由于现阶段手势足够完成日常操作,所以日常的人和屏幕交互并没有引入这些别的奇怪的方案。

我相信随着科技的进步和发展,其他的双手的交互操作也会大面积的被引入进来,起码我个人在看类似于黑镜啊还有别的欧美科幻片的时候,不止一次见到了这样的画面。(我印象最深的是黑镜第三季06,女主角操控手机方式是四指横滑,然后胖大叔操作无人驾驶的骑车的时候是双手旋转打开一个屏幕,然后再通过指头拖动目标完成导航交互。)这些电影里面反应的人的未来科技中蕴含了很多交互方法,大家可以看电影的时候多留意一下。

有点扯远了,回到手机app的交互手势,(除开游戏以外)一般单指双指即可解决。而先现今科技下,相对于大屏幕一些的平板电脑,无论是ipad还是Andriod厂商,都会引入三指,四指甚至五指的部分交互手势。

由于今天的主题是手机app,那我们下一部分就着重主要来说说手机app的交互。

PART 3 - 手机app中的意符分析


在设计中,尤其是UI设计中,意符比示能更重要。

理解这句话的本质是因为一块屏幕上人需要设计图形、按钮、内容。去让他完成一些具体事情,所以在屏幕显示的软件中的意义符号就需要有很深的引导性。

还记得之前我的定义么?用户界面上的意义符号,简而言之,就是一切用户感知中可以点击产生反馈的功能集合。

我们闲言少叙,先来看一个例子:

如图是喜马拉雅FM的app首页UI,我将从功能属性、视觉焦点两个角度,一排一排的进行分析:


角度一、首先从功能属性上进行分析:

第一层:NavigationBar上的意符为『消息』、『搜索框』、『历史』和『下载』,本质上是以功能名字命名的意符,其意符的表现形式为图片+文字。没啥好说的,每一项映射到自己的功能详情。

第二层:Tab的分类共有『热门』、『分类』、『康永来了』、『直播』和『广播』,其意符的表现形式为文字,这里大家看到『热门』标签本身变成橘黄色且下面有一个橘黄色细线,这是两个符号是通过这么多年的用户教育之后形成的意义共识,意义为:当前页面状态。这里我有一个小问题,大家猜如果这时候我右滑界面(采取的交互手势是单指向左轻滑),会发生什么事情?提供两个选项:

A、到『分类』页面。
B、到『订阅』页面。

详细绝大多数人都能答对,这里的正确答案是A,滑动到下一个tab『分类』。大家只知其所以然,感觉这里的tab本身就是靠滑动手势来控制的,但是更深层次的原因呢?为什么?

这里涉及到一个滑动切换tab的遍历解构,关于这个,我的网友@HoZiN老法师(大雾)的《浅议滑动Flick切换Tab导航 - 知乎专栏》这篇文章写得很棒,大家可以去看看。在这里我做粗浅的解释,在喜马拉雅这个app中,『首页』UI中的TabBar上的『热门』、『分类』、『康永来了』、『直播』和『广播』都是归属于当前BottomBar『首页』的,所以我们在滑动操作的时候应从当前深度的最近层开始交互。

如@HoZiN的下图所示:


如果用户滑动这个页面只能在首页的5个tab之间切换,我们认为他是下图的第一种,也即是在单一Bottom模块下切换(Hozin将其命名为独立Sub Navi切换,Sub Navi的意思其实也就是底部的Bottom navigation bar的意思,我上文中就直接简称BottomBar了,个人命名习惯而已大家能懂是这个意思就行),而另一种情况是有些app当滑动到最后一个tab,再右滑屏幕会进入到第二个Bottom模块,既是下图第二种的b-C和f-G的过程。虽然现在这种设计方式已经鲜有app在继续使用了,但是我在2017年的今天仍然是遇到了一些。并且有个特别而精彩的地方在于,一般情况下,b-C和f-G的滑动切换Bottom模块的这个交互往往是不可逆的。这点就比较有趣了,关于这个更深层次的原因可能是开发的原因,可能是产品没法做到每一个Bottom都有tab,也可能是因为别的app信息架构方面的原因,在这里就不展开了。

我们再继续单独看这个第二层:

215b59510beda8012193a31bbb4d.jpg

是不是发现有一个奇怪的格格不入的叫做『康永来了』的东西混了进来?这里我就必须吐槽一下喜马拉雅的产品设计团队了,作为一个普通用户,我本能的以为这个tab下一定是和康永来了有关的内容整合,放在这里是因为运营需要,这个其实在内容平台上很常见,大家看QQ视频和爱奇艺他们不也经常这么干,本身是一件无可厚非的产品推广的入口常态,然后我滑过去了发现其实他是『每日优选』的一个频道,只不过最近主推蔡康永的这挡音频节目:

如上图所示,这个奇怪的『康永来了』的tab归属到的不是康永来了的音频详情页,而是一个『每日优选』的列表页,那我就认为这个设计是欠妥的。

我为什么说这样的设计欠妥,其原因如下:

因为我确实是有几个月没有使用过喜马拉雅了,我不记得『康永来了』这个位置之前是不是叫『每日优选』,还是之前首页只有四个tag,这个希望有关注的读者下方给我留言确认一下。

那既然我不确定,我们不妨分两种情况去分析:

第一种情况:之前首页只有四个tag,而新加了一个以具体内容ip产品名(比如康永来了也好,或者明天老罗来了也罢)作为显示,实则是每日优选的一个强视觉tag,为的是引导用户点击具体ip产品之后看到每日优选的这个列表,从而为别的每日优选这个列表页导流。(我认为对于一个成熟的产品团队,不太可能是这种情况)

第二种情况:之前首页就有『每日优选』这个tag,只不过后来为了运营或者强视觉需求,改成了具体ip产品名。(我倾向于第二种假设)

我猜测喜马拉雅的团队本质上是希望借助类似于康永来了这样大的ip露出,通过从视觉上的突出(视觉突出这一点确实做得很好)从而博取用户流量,然后让用户通过查看『康永来了』这个具象的兴趣点tab,进入每日优选的这个列表,从而为别的每日优选产品导流。

从文案层面来说『康永来了』确实比『每日优选』更吸引人,但是如果是我来设计这个地方的话,我个人倾向还是放一个每日优选的tag,毕竟这是所有用户都能懂的语言,而康永是谁?这个问题毕竟不是所有人都知道的。

如果实在是通过数据或者产品运营需求表示,我们需要强调『每日优选』的话,那我会把每日优选的视觉也做得像现在康永来了一样突出,但是名字不能变,还得叫『每日优选』。

那如果康永来了这个ip市场运营那边吩咐了,确实需要持久强推怎么办?

办法有,比如banner位就可以直接推,而且banner位可以直接跳转到具体ip的详情页,路径更加简短,用户马上就可以购买,不像现在跳到的是一个每日优选的列表,用户还得通过一次点击才能进入详情。

还有另一种极端的情况,如果有一天运营同学告诉我,banner位不允许一直放康永来了,但是市场同学又告诉我康永来了这个ip很重要,需要长时间强推。那我的办法可能是有以下两种:

第一种办法是在第三层的最前面(必听榜的前面)加一个独立的康永来了tag,这样的做法是开发成本简单易行,但是不够优雅。但是你连『小雅音响』这种智能硬件购买页入口都放在上面了,多放一个运营强推ip也没毛病啊。_(:зゝ∠)_

第二种办法虽然比较decent一些,是在第四层和第无层的中间开辟一块很小的次banner位去放,如下图所示:

但是我个人是不推荐这种做法的,哪怕未来这个次banner可以扩展为多个次banner轮播我也不推荐,因为如果是这样的话,用户首页第一屏留给『猜你喜欢』的内容展示就很有限了。

总而言之吧,第二层tab的『康永来了』一定是一个待埋点考量的争议设计。我只是提出我个人的见解,不一定对,大家切勿偏听偏信。好了我们继续往下看。

第三层和第四层:图片banner和分类频道icon,其意符的表现形式为纯图片/图像+文字,banner嘛这个没啥好说的,通过自动左右切换的图片告知用户一些产品需要告诉用户的信息而已。分类频道icon我之前的几篇文章里面都有提到一些,记得在我的文章里我说到的格式塔原理么,大家打眼一看这个分类频道icon就知道右侧还有一些,是可以滑动的。

第五层和第六层:这个就更没啥好说的了,就是一个常规的带图片的宫格列表(我习惯这么叫他们,你们想怎么叫都行)页,其意符的表现形式为图片+文字,右上角有点击更多有一个向右的图标表明是可以点击跳页的(具体参看我写的分割线那篇文章)。到一个内容更丰富的item列表页。那么我问大家一个问题,为什么猜你喜欢的这个图片不也做成左右滑动的而要做成这样固定展示6张的呢?

这里主要是有两方面的原因,第一是做成左右滑的话,屏幕空间最多只能展现三张半,不如现在这个展示6张露出得多。第二是有一个很有趣的交互上需要注意的点,大家看如下图所示:

我标记蓝色线框的部分大家看到了没,这个banner也是可以滑动,分类频道icon也是可以滑动的,整个页面Tab也是可以点击跳转的。这也就意味着,如果要执行tab滑动跳转这个交互手势,我想能采用的滑动热如右图红色所示,区域本身就已经很小了。如果下面猜你喜欢也做成可以左右滑动的话,那么Tab的滑动手势热区面积更小了。如果真是那样的话,那这个Tab就不该设计成可以滑动加载的。

所以说嘛,app中的意义符号设计直接决定了这个app的易用性。不要乱来。

第七层:这就是bottombar具体没什么好讲的了,也就是五个图形意符,各自表示着自己的意义映射。现在很多app中大家会发现有些底部是只有icon没有文字的,有些是带了icon也带了文字的,带文字的目的也是为了解决图形联想带来的意义映射路径多的情况。这个不多说了。来看第二个角度。


角度二、从视觉上进行分析:

按照视觉强弱来看,『康永来了』、『banner』、『猜你喜欢』是页面最重的视觉部分,其次是频道入口icon和下面的Bottombar,最后是navigationbar上的小溪、搜索、历史和下载。从视觉上看,其实作为内容平台的喜马拉雅设计的很赞,没有任何问题。内容产品本身占有最强视觉强度,功能意符占有较弱视觉强度。这就是为什么猜你喜欢要用图片+文字的宫格列表,不用类似于item之类的原因,因为比如这里的每一个节目都换成是一个item,那视觉只集中左边的图片上,而不像现在三张图片这样聚焦。

最后抛出一个视觉上BottomBar的问题,现在很多app会在实心icon还是线性icon上面纠结,知乎的BottomBar一直采用实心icon,而Airbnb一直采用线性icon,到底为什么?

我会在下一期的交互闲谈里面说这个问题,大家也可以想一想,其实(如果我理解的没错的话)答案就在我上面这段论述中。



PART 4 - 手机app中的意符设计需要辩证的几小点


一个擅长app中意符设计的人,本质就是对appUI设计有十足把握的人,关于这里的几点辩证只是提出来说一下,具体的UI设计过程中这样的问题不胜枚举,大家可以留言交流。


一、BottomBar上的意符到底要不要加文字?

手机中可供点击反馈的意符设计分为很多种,有纯图片的(比如banner),有图形+文字的(比如BpttomBar上的那些),有纯文字的(不如上文中喜马拉雅的切换tab,比如『点击查看更多』、『点击展开』、『滑动加载』之类具有诱导性的文案),还有纯图形的『比如像『一个One』这样的app底部BottomBar是只有图片不带文字的』,还有一些是按钮形式的。

在这些意符的设计中,意义识别是尤其需要被设计的。如果一个图形无法表现他应有的意义,那就一定要在附近加上文字形成一个完整的意符。

举个例子:已下载这个icon已经被所有app用烂了,大家一听就知道应该包含一个向下的箭头,比如历史记录也是,大家都能想到是一个时钟,这就是长期教育用户之后用户产生的意义联想。所以喜马拉雅和腾讯视频中的这两个意符设计,一个是带文字,一个是不带文字,都不影响用户识别体验。

但是比如再举一个例,『我的』图标,现在大家都习惯用一个『人头像』,而一切新奇的产品比如说『氧气app』,才用的是一个圆圈,那么这个时候如果是意义识别为主导的产品(比如电商啊或者用户不是那么年轻的)就会选择在下面加上一行中文。这样的话在图形上发挥得再不易识别,也可以借助文字瞬间映射到。

那比如像『一个One』、『Medium』和『500px』这样的众多app,他们的BottomBar都是一个纯图形:

纯图形带来的其实是一种新奇感和简洁的设计感。相对的,和用户需要花更长时间的视觉判断,比如第一张图是『一个One』,第2,3,4个icon其实很易识别:一本书,一个音符和一个播放三角能够很简洁的代表文章,音乐和视频。第二张图相对就没有那么容易识别了,尤其是第三个图标,意义指向不明确,但是由于Medium是一个国外设计师聚集的网站,所以其实也还好,设计感在一定程度上会优于识别也没问题。图3是500px,这5个icon就更易识别了。

所以,如果你采取无文字的BottomBar,那么请UI设计师用心设计你的icons。


二、设置引导用户点击加载的意符应该如何设计?

有一个app需要设计这样一个功能:文字默认折叠展示3行,但是点击之后需要(非跳页)加载全文,那么请问需要设置怎样的意符引导用户点击?

传统的大概是三种方案:

第一是在文字第三行的前四个字用其他颜色(比如蓝色)标记为『加载更多』,用户一点之后加载全部(早期知乎的做法)。

第二种是在文字第三行结束之后再第四行的位置居中放一个『点击加载更多』,用户点击之后加载全部。

第三种是在文字第三行结束的位置放一个省略号即可,用户阅读之后发现没读完,自己会尝试点击。

显然,第三种方法仅适合社区类app或者贴吧或者问答类app,因为一般用户读都很难读完,更别说给你点击一下了。第一种和第二种也是见仁见智,一般情况下我个人推荐第一种,因为需要文字折叠成三行的页面就说明本身画面排布很紧张,就不要另起一个第四行放『点击加载更多』了。


三、app中的按钮设计,什么时候应该有push色,什么时候应该没有?

这是我的微信公众号后台有一个小伙伴的提问,push色这个东西在网页上有别的更多作用,但是在app中,一般就只用来反馈行为。

有两种情况:

第一种是你点击某个意符,这个意符发生变化(颜色或样式变化)同时跳转。

第二种是你点击某个意符,这个意符完全不发生变化但是页面跳转。

从用户期待每次行为都得到反馈的心理上来说,我们当然希望所有的意符都能呈现及时反馈以证明你的点击行为是有效的(也就是上面的第一种)。但是有时候由于反馈动效我们写得不尽如人意问题,我们看到冗长(哪怕只有半秒)切重复的的反馈内心就会就会很烦。

举个例子比如原生安卓的Material Design点击每个item都会出现一个水波动效反馈,当然原生Material Design的动效是足够优秀的,所以我们会觉得很有新奇感。但是你们如果试试把安卓的这个动效拉长别说一倍,拉长三分之一。你们一定会崩溃的相信我。



PART 4 - 总结


1、app产品设计和UI的设计中,意符的设计是当众最重要的一环,因为每一个意符作为产品的功能入口和行为入口,它们不光光是产品的流量节点。更是app产品信息架构的核心提现。

2、在设计app的意符的时候,要更多的考虑到意符所蕴含的具体交互手势(比如喜马拉雅的tab bar就包含了滑动和点击)以及具体的对用户行为的思辨。

3、app中意符的设计一定是框架层面的设计,他的本身视觉层级不易过高,最好不能超过app主体信息。

4、意符的意义映射要尽可能的单一,最好能让用户一眼就了解这个意符是代表什么功能什么意义。

5、app意符的观察、分析、设计是一个长期的过程,大家可以试着多问自己一些为什么。




文章来源:站酷   作者:Seany

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


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

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档