首页

组件化设计:弹窗的使用逻辑

ui设计分享达人

弹窗其实是一个很泛的概念,几乎所有在页面中有弹出的行为的操作都能称之为弹窗,其实是有点混乱,本文旨在梳理它们之间的关系


转自:站酷-备哥


一文读懂2020年最全设计趋势

ui设计分享达人

写在前面

过去几年中,我们的积极反应促使我们继续探索和分析主要设计领域的新趋势。尽管大多数趋势都是去年发生的变化,但到2020年,我们仍有一些新趋势值得追求。最重要的趋势是与技术有关的趋势,以及它们的发展趋势,以及它们如何影响设计领域。 


总体趋势

2020年的主要趋势动作设计与动画, 对于2020年,我们认为运动设计是主要趋势,因为我们在所有设计领域都遇到动画,从小的交互到徽标和UI,一切都在变化。动画内容正在进入现代世界,在现代世界中,书面内容没有以前那么吸引人。 动作设计正确实施后,可使广告系列的信息更快,更正确地传达给受众。

undefined

01. theQoos品牌插图由  闵庆  02  军团赛季 3由  尼克Scarcella   03.  溶剂-使大麻银行公开赛由  BluBlu工作室  04  云服务(动画图标)由  亚历山大Baleev  05.  病毒性肝炎由  昂布尔集体 ,  蒂博ZELLER ,  乔纳森Plesel  06 。  UXC_Design2020_Project研究通过  Donerzozo


目录

1. UI / UX

2.插图

3.动态图形

4.平面设计

5.基于技术的趋势 

6.包装

7.版式

8.趋势工具


1. UI / UX

1.1暗模式(Android Q和iOS 13)

暗模式是2020年的新趋势,Android引入了两种类型的暗模式,分别称为“强制暗模式”和“系统暗模式”。微软通过在其电子邮件应用程序中展示其暗模式击败了谷歌,但谷歌迅速推出了自己的针对Android 10的Gmail应用程序的暗版本模式。

有了介绍此更新的大公司,许多设计师将选择在他们的应用程序或站点中使用暗模式,因此希望在来年看到越来越多的暗模式。

undefined


1.2粗体颜色

在过去的两年(到2020年)中,强烈的色彩已成为重要的趋势。大胆的色彩丰富,明亮,甚至极富活力。它们可以是主要或次要颜色。 


undefined

01.  EMART UX / UI可再生的通过  加X,  李宝蓝 ,  Sabum卞 ,  熙荣,  尤金全度妍 ,  원 지 혜,  Bongho彩  02  NSH通过  索菲娅费多托娃   03.   埃尔多拉多赌场-移动Web UI,应用程序ü用  的Loredana PAPP-Dinea ,  Mihai Baldean ,  Milo主题  04.  mmcité+网站由  工作室9  兹林,帕维尔Valek  05.  自动哈克系列#21-25由  安德烈福  06.  Flipd应用程序通过  ESTUDIO PUM


1.3 UI中的插图

多年来,插图一直是设计中最强劲的趋势之一。插图是对概念的直观解释,可以使用户更好地理解产品背后的思想。除了一些精美的插图使这一概念独具匠心外,它们还可以更快地传达信息。

undefined

01.  海妖重新设计,以  西尔Theyssens ,  安东尼科拉德  02  浮雕-医疗项目由  马丁Pankiewicz  葛尔若,  米沃什Pożarkowski  03.  abuk:图书封面设计有声书商店到  谢尔盖Valiukh,  Tubik工作室  04.我llustration系统GOL到  ESTUDIO PUM  05 。  智能家居的应用程序- IOS到  玛丽亚Osadcha  06.斯基林贸易(skilling.com) -   Loredana酒店PAPP-Dinea ,  米哈伊Baldean 


1.4讲故事

设计中的讲故事是关于帮助用户在平台上的旅程,从而使他的体验尽可能轻松和流畅(在UX设计中)。一个好的故事可以帮助用户更轻松地了解产品。为了讲述一个故事,我们可以使用一个特别创建的角色,将这个角色赋予他个性,我们创建一个故事和一个冲突,最终由我们的产品(UI设计)解决。这是产品设计中讲故事的基础。讲故事在UI和UX中都使用,并且基于相同的原理,但实现方式有所不同。

undefined01.  余吴-旅行计划应用由  朱莉张庭  02.  UX / UI | 食品外卖应用由  康斯坦丁Seredkin  03.  COOC通过  cuneyt仙


1.5动画图形和微交互

正如我们所说,动态图形是今年的趋势,它在UI设计中也有很强的表现,它为插图增添了力量,使创意更易于吸收并保留在用户的记忆中。 

微交互在2018年成为第一流,但这一趋势值得在2020年关注。它们是UI设计中极其重要的趋势,这使基本应用程序/网站与非凡的应用程序/网站有所不同。微交互在使用户了解系统的工作原理并引导其获得更好的体验方面起着至关重要的作用。 

如果您是UI设计师,但尚未在工作中使用微交互,建议您这样做,因为到2020年,没有UI的任何UI设计都将是非常基本的。 


undefined

01.  UI / UX | 智能药房应用的   阿纳斯塔西娅中号,  谢尔盖Nikonenko UX   02.  气候与动物:灭绝危机网站UI / UX  由  丹尼尔·谭,  达芙妮龙  03  飞素食者由  帕特里夏赖纳斯  04.  UKRPOSHTA。乌克兰国家邮政局的移动应用程序,伊洛娜·金(  Ilona Kim)  05 .  Tagir Tikeev 的聋人报警应用程序


1.6用户界面中的视频

到2020年,信息必须非常快地到达用户手中,最好通过视频内容来完成。您选择通过动画或经典电影来解释产品,视频内容对于任何网站或应用程序都是必不可少的。


1.7功能

UI设计中的一个重要部分是功能,即,根据其目的和功能选择每个元素。许多人认为您必须在设计和功能之间进行选择,但是在新技术的帮助下,这两种技术可以很好地融合在一起并相互补充。设计负责引起对站点或应用程序的注意,其功能使体验变得更轻松。它使用户可以更快地找到信息。

undefined01.斯基林贸易(skilling.com) -   Loredana酒店帕普用餐 ,  迈克尔Baldean 


1.8注意细节

在UI设计中,对细节的更多关注非常重要。从按钮,图标,加载到导航到细微的细节,都可以打造出非凡的设计。随着新技术的出现,我们在UI中必须注意的细节始终在变化。

在明年,我们将看到越来越少的按钮,以及更多基于手势的导航。例如,后退按钮(Android的导航常用)在Android 10中正式消失。

undefined

01.  FLYR的视觉形象和营销网站的  Ramotion 

02.  闹钟应用聋人通过  Tagir Tikeev


1.8渐变

几年来,我们一直在谈论设计中的渐变,这种趋势在2020年将继续保持强劲,因此值得一提。新鲜的色彩是成功渐变的完美选择。它们可以用于按钮,图标,插图,甚至用于排版。

undefined

01.  Wavecut - IOS应用程序通过  Eleken局  02.  抗忧郁症的应用程序-产品设计(UX / UI)由  安娜Arutiunian 

03.  保罗回肠-电影音乐作曲家,制作人,DJ,Perfomer  通过  的Loredana PAPP-Dinea ,  米哈伊Baldean ,  米洛主题  04.  ITEXIA通过  下一页局 ,  亚历克斯海鸥 ,  Jegor Walowski


2.插图


2.1角色设计

角色设计包括定义一个支持整个概念的角色。最重要的是,通过绘图,设计师向角色灌输了强烈的个性。您在应用程序或网站中遇到的虚拟助手是角色设计的一个很好的例子。

undefined

01.  新微小的事情•儿童图画书由  Vuon插图 ,  荣阮 ,  荣范  02  的Adobe X Createfulness由  迈特弗兰基,  马蒂厄Tarwane  03。 3D人物V2由  安东尼奥·佩蒂特Cwirko  04.  Malayali由  丹尼·何塞


2.2纹理

插图和纹理很好地结合在一起,可以创造出令人难忘的构图。从粒状纹理到预制的笔触,您可以找到许多想法来为插图添加纹理,也可以手动创建它们。浏览网络时,您可以找到许多可以在插图中使用的纹理,预制笔刷和工具。 

undefined

01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 饭 太稀


2.3平面插图

在过去的几年中,我们到处都可以看到平面插图。它们仍然处于趋势中,但现在有了一个新的组成部分:对每个元素应用细线。大多数艺术家都选择使用细的黑色笔触,但也可以将其上色,使其阴影比所涉及的对象暗。

undefined

01. BILLY KENNY -刚刚为音乐通过  桑戈BANG  02 Babelia - Lecturas对维拉诺由  米格尔·安赫尔Camprubí  03.  拳击猫-第一滴血由  Felms   04.  COUSCOUS STUDIO | 解释器VIDEO  由  哈立德abdelazi ž


2.4等轴测图

是的,等轴测图仍然在这里。它们主要可以在UI设计中找到。随着人们对加密货币的兴趣不断增加,这种趋势似乎已经生效,但是在2019年它已经发展了,现在我们在其他业务领域中发现了这一趋势。

undefined

01.  庞克市由  温祚_  02  FastCompany -等距号由  阿图尔Tenczynski  03和05.  抗体亚型由  马里奥·德•梅耶尔  04.  松弛插图由  京张 


2.5 3D

随着效率越来越高的软件和工具的出现,3d渲染已逐渐发生变化。3D插图非常受欢迎,因为与2D插图不同,它提供了更逼真的图像。

undefined

01. 游戏巴伊亚之家由  Miagui  02  天平 由  卡韦萨Patata工作室  03.  城堡毁灭者由  穆罕默德Chahin  04.  Eyoo家庭3D插图由  Baianat  05.  个人插图第1卷由  巴勃罗·马林 06.  一个人旅行通过  乱伊莱恩


2.6超大胆的色彩

大胆的颜色非常适合插图。它们营造出欢乐的氛围,使角色脱颖而出,并在图像背后展现故事。

undefined

01.  玛莎·希肖娃(Masha Shishova)摄于莫斯科的  STRTFD咖啡壁画  02. 作家- 利奥·夏目(  Leo Natsume)的移动互联网思想  03.  可口可乐圆罐插图由塔尼亚·雅库诺娃(  Tania Yakunova) 


3.动态图形


3.1 3D视频 

在2020年,无法想象没有3D设计的运动。设计的这个分支打开了一个世界的大门,在这个世界中,只有想象力是极限。我们可以在广告,电影,游戏,广告活动等中找到3d。

undefined

01.  庞克市由  温祚_ ,  视觉设计艺术的影响  


3.2视频+动画插图(混合媒体)

拍摄的视频,动画插图以及有时是静止的照片的结合可以产生非凡的效果。2d或3d插图可创建令人难忘的视频,从几行运动到3D真实人物甚至是现实生活中不存在的复杂视觉效果。

undefined

undefined

01.  Coppel /回到学校通过  大量工作室  02  PWR  由安娜·霍查,  Edvina元 


3.3 2D动画-说明性视频

2D动画专注于创建故事和角色,并在创作过程中使用矢量。当您想要广告系列或产品的说明性视频时,2D可能是理想的选择。在一个总是忙碌而又没有时间阅读的世界中,说明性视频对于任何网站都是必不可少的。

undefined

01.  Freelive  由  工作室Infografika ,  谢尔盖·萨多斯基 ,  阿纳斯塔西娅Alterka ,  Arsentiy Lesnik宾馆 ,  尤里·阿姆斯特朗 ,  阿林好,  乔治VALD ,马克西姆Tleubaev  


3.4动画徽标

您已经了解到动画是2020年的“必备”,为了保持竞争力,我们还必须将它们集成到徽标设计中。许多公司已开始对其徽标进行动画处理,以引起人们的注意。这也是徽标设计的主要趋势。

undefined


01.  杯茶由  维多利亚伍  02 - 07.  运动野兽✕Logomachine。动画标志的  运动设计学院,  维克托Villamarin的,  波格丹·杜米特留,  Logomachine .NET ,  亚历山大·库兹涅佐夫,  扎克李,  丹尼斯Siurin ,  斯坦尼斯拉夫·马尔琴科,  莉扎薇塔Tsareva ,  Supremus Levenus ,  安东·福明,  埃米尔Khafizov ,  胆碱哈达           


3.5混合动画2D和3D集成

这一趋势不是一个新趋势,但绝对值得一提。混合动画就是使用为此创建的特定软件将2D与3D结合在一起。 

undefined


4.平面设计


4.1平面设计中的3D 

尽管2d垄断了设计的这一分支,但3d可以为最终概念添加额外的内容。3d渲染可以采用插图,动画或字体的形式。

undefined

01.  画像由  费尔南多·多明格斯Cózar  02.  NASA | 太空时代的  工作室-JQΔ   03.  美国宇航局X BBC | 不自然世界的  工作室,JQΔ


4.2双色

精益求精的概念可以完美描述这一趋势,设计师在其中创造出大胆的元素,并带有优雅的手感和强烈的对比。这种趋势是创建更易于访问的打印的理想选择,因为某些打印技术如果颜色更多,则价格会更高。

undefined

01.  冬季公开赛'18由  Kinoto Studio,  Romina Rios,  Luc Geoffroy  02 Synticate©由  斯捷潘索洛德科夫   03.  TIGER在博物馆由  de_form工作室,  诺拉demeczky ,  的Eniko DERI  04.  刻字系列IX由  拉斐尔·塞拉


4.3光学感知艺术

欧普艺术作品是抽象的,有许多知名的黑白作品。通常,它们给观看者留下动感,隐藏的图像,闪烁和振动的图案或肿胀或翘曲的印象。(来源:wikipedia.org)。

这种趋势给人以动静的印象,但是以一种静态的方式。如果要实现在印刷海报中移动图形的想法,这是最合适的方法。

undefined

01 02  东京电影节共混物由  梅赛德斯巴桑 ,  的Adobe住  03.  海报-第一卷由  Xtian米勒


4.4平面设计中的插图

插图在设计的所有领域都非常重要,因此我们在图形设计中也可以找到它们。2D插图在现在已经非常流行了几年,并且即使在2020年,也将继续成为设计师的最爱。 

undefined

01.  GOOSE赫尔-海报由  Ewelina鹅  02  CAT酒吧和舞厅/ 2019至  kissmiklos,  Eszter萨拉 


4.5动画海报

动画无处不在,我们在设计的各个领域都可以找到它们,当然它们也存在于数字海报中。动画可以将2D与3D混合在一起,效果令人着迷。

undefined

01  节地铁地铁由  Bzoing,  维吉尼贝达德  02.  失败的Windows由  皮埃尔Kleinhouse,  辖Zivony 


4.6复古合成波

复古合成波是一种在80年代出现的趋势,但一旦好莱坞开始发行该十年的电影后便开始重新出现。随着《陌生人事物》系列的成功,这一潮流再次开始流行。

undefinedundefined

01.  鸡尾酒和梦想通过  Gjorgji Despodov  02.  CINEMAX由  杰森巴尔巴  03.奇怪的事情(Netflix.com)


4.7瑞士设计,达达主义,包豪斯

20世纪最重要的图形设计运动始终是最好的设计师的灵感来源。这些样式值得一提,因为它们始终是的,遵循它们所施加的规则几乎不可能在设计中犯错误。总的来说,这些运动强调版式,无衬线字体(Helvetica于1957年在包豪斯舞台上创建),几何形状,简单的线条,体积和颜色。

undefined


01.  瑞士海报01(版式方面)由  Mehman Mammedov  02.  黄视VOL.3通过  维奥莱纳齐名


4.8大的不间断彩色空间 

大型,不间断的色彩空间将在明年成为非常流行的趋势。它们与大胆的字体搭配使用,可以在图形设计,产品设计以及ui中找到。

undefined

01.  Synticate©由  斯捷潘索洛德科夫  02  Havaianas人字品牌内容由  约翰Vernizzi  03.  Kekkilä-BVB的  Kurppa Hosk


4.9超极简主义

极简主义的设计仅使用必需品,非常有限的调色板和简单的形状来打造令人难忘的身份。放弃多余的元素,使所有设计项目都有目的。要创建超极简主义的设计,您需要使用尽可能多的白色/负空间,简单的配色方案和一些基本的几何形状。

undefined

01.  Heim杂志,第3页,  Sasha Yaguza撰写  02.  Andrei Gheorghe- DADA-通过  moodley品牌标识发布


5.基于技术的趋势

技术通过智能设备和崭新的理念正在彻底改变我们的生活。这些新技术使设计师已经开发出进入当前趋势的新功能。人工智能,机器学习,虚拟现实和增强现实正在影响设计师的思维方式和创作方式。


5.1增强现实的移动应用

随着苹果和谷歌推出自己的AR开发平台ARKit和ARCore,很明显,整个世界将面向增强现实技术。 

许多大品牌已经在其应用程序中采用了这项技术,而那些尚未采用这种技术的公司必须认真考虑如何使用户在这种新现实中与之交互。


有一些AR交互可用于创建直观的应用程序。第一个是将应用程序固定在手机屏幕上时。另一个是AR UI与用户周围的环境相关联时。最常用的互动方式之一


是当UI与对象相关并通过扫描特定项目触发时。该动作将数字动画连接到特殊的“标记”。 

有关更具体的AI规则,请阅读Apple指南,以提供“将真实的虚拟对象与现实世界无缝融合的沉浸式,引人入胜的体验”。

undefined


5.2 AI,ML,聊天机器人和虚拟助手

聊天机器人是一种 通过听觉或文本方法 进行  对话的  软件。[1]  此类程序通常旨在令人信服地模拟人类作为对话伴侣的行为,尽管截至2019年,它们仍远远不能通过  图灵测试。[2]  资料来源:维基百科


人们还不习惯与AI对话,因此设计师(和开发人员)的工作很大一部分是使流程简单并建立信任。他们需要帮助人们了解系统可以做什么以及如何使用它。


使用AIML(人工智能标记语言)设计和编写脚本聊天机器人,是出色的UX设计人员的魔力可以发挥作用的地方。

大多数使用聊天机器人的公司都选择说明助手来为AI做鬼脸。以下是一些在其UI设计中使用聊天机器人的品牌:Spotify,星巴克,万事达卡,丝芙兰,Lyft,必胜客。

undefined


5.3 VR

大多数人将VR与游戏行业联系在一起是有充分理由的,但是随着所有大型科技公司开发VR套件和应用程序,我们可以肯定地说,我们将发现使用和享受这项技术的新方法。VR已经用于教育,医疗保健,旅游,房地产或建筑。 

undefined


5.4语音用户界面(VUI)

语音用户界面(VUI)使用语音识别  来理解语音命令和问题,通常是文本到语音以播放答复,从而  使语音与计算机的人机交互成为可能  。语音命令设备(VCD)是受语音用户界面控制的设备。资料来源:维基百科 

去年,使用互联网连接的设备的人中有40%每月至少使用一次语音助手,与去年相比,这一数字增加了10%。


6.产品设计


6.1包装中的图案

在过饱和的包装市场中,很难创造出可以脱颖而出的新产品,因此设计师要回到根源并创造出使产品在拥挤的零售货架上脱颖而出的样式。几何,花卉,浪漫或单色图案是任何产品包装的大胆选择。

undefined




01.  飞行山羊咖啡由  妮可LaFave    02.  VITA SPA皮肤  由  DWYW   03.  巧克力包装设计由  算术   04.  100手绘无缝的图案和形状   的  Arseny Samolevsky


6.2包装插图

插图一直是包装设计中的重要元素。通过他们,我们可以讲述一个故事,使目标受众可以更好地理解该概念背后的历史。平面插图已经存在了数十年,并且很可能会一直处于流行趋势。

undefined





01. 布里格斯原件由  熙宰金  02  天鹅绒咖啡杯  由  安东Malishev,  呵呵卡罗拉  03.  废物不包括厨房-品牌打造的  尝试和真正的DESIG ň04  家,甜蜜的寿司儿童  通过  精明的机构,  马里亚纳星火  05.  Cerveza塔Maleante通过  Antonay 


6.3留白

极简主义是设计的基本原则,而今天它又是新事物。它放弃了设计中不需要的所有内容,并用负空间代替了它。这种趋势将功能带到了最前沿,并专注于简洁的设计,使版式脱颖而出。

undefined

01.  香味精油 由Y u型简林,  黄恶嗯-祥  ,  智泰莲 02.  重塑品牌理念,为BodriPincészet由  克里斯托夫Gáthi


6.4单色和两种颜色

首先,在调色板中仅使用1或2个色调似乎有些限制,但它们可以创建非常强烈的视觉识别感。仅使用一种或两种颜色,就可以保持简约的外观,放弃所有多余的东西。结果是精美,高雅的产品令人赏心悦目。

undefined

01. Zerbet冰糕由  才林贾尔斯  02.  贝利啤酒  由  埃德大厅 悉尼,  叶卡捷琳娜Leontyeva ,  波阿斯孙


6.5大胆的颜色

大胆的颜色和渐变仍然是非常强烈的趋势,这种趋势将在2020年持续。使用这些颜色,您可以创建令人难忘的产品。

undefined

01.  极简主义和享乐主义:Fabula Branding 重新设计了  千年品牌

02  纹身商城  通过  Openmint工作室,  叶卡捷琳娜Teterkino ,  烟,  叶戈尔Kumachov 

03.  Organic  by  Larissa Kendrik 和  加布里埃尔· 沙茨曼

04.  VIZOU -老花眼镜  的  工作室开头语,  阿克塞尔杜马克 

05.  包装的调味开心果由  米拉Katagarova


6.6注意细节(受新艺术风格启发)

注重细节的包装比以往任何时候都更受欢迎。设计师选择这种趋势是因为它赋予了产品真实性。这种趋势使我们以现代方式思考经典。 

undefined

01.  HYWILDE由  查德·迈克尔·工作室  02  AMSTEL KARGO IPA通过  卡帕罗设计船员

03.  大岛咖啡烘焙-咖啡咬伤的  农场设计


6.7包装中的讲故事

到2020年,品牌将不得不重新考虑其产品和包装。品牌必须讲述一个故事,以帮助客户体验产品的本质。这可以通过为包装创建视觉和叙述身份来实现。

undefined

01.  喙接通过  骨干品牌推广   02.  Colorea用t  骨干品牌


7.版式


7.1粗体印刷

粗体印刷术是设计中的重要趋势,它取代了图像作为主要元素。勇敢的排版可以在网页设计和图形设计中发挥作用。

undefined

01.  埃里克·林格(Eirik Lyng),作者:  埃里克· 赫斯特雷(ErikHerrström);  02.  包豪斯(Bauhaus_100)(x3),作者:  BunkerType(JesúsMorentin)

03.  UCCA当代艺术中心北京由  布鲁斯·莫设计(BMD)  ,耶勒马雷夏尔 


7.2小写

越来越多的应用程序使用完全小写的文本,非常易于阅读,并且完美地融入了简约和现代的设计中。在明年,我们绝对必须关注这一趋势。

undefined

01.  Autea品牌和网页设计由  米哈尔Markiewicz  02  山大食品公司 CI由  臣藤田/ tegusu公司 03.  Aquality品牌的  哈坎Fidan的


7.3自定义字体 

尽管自定义字体没有什么新意,但我们将看到这种趋势越来越多地出现在设计中,尤其是在徽标和海报中。这种做法在大品牌中更常见,因为生产专用字体可能会非常昂贵,但是设计人员可以对现有字体进行少量调整,结果可能会非常独特。 

undefined

01.  Think8全球研究院通过  勃洛克设计  02  ZINEZŐ//设计周期由  芭芭拉·卡托纳 ,  媒体与设计系埃格尔  03.  式设计'19通过  TRÜF创意  04.  Cako字体由  维奥莱纳齐名


7.4动力学排版

就像我们说的那样,动画在设计中无处不在,因此在排版中也很常见。动态字体使用小的和简单的交互作用来移动和移动屏幕上的字体。这种简单的技术可以处理文本并创建最终产品,该产品保留在查看器的内存中。

undefined

undefined

01和02.  Grafika  ,  Gimmick Studio设计  。03&04.  增强现实与动作排版,作者:  Alex Slobzheninov


7.5堆叠字体 

堆叠文本可能是一种现代化的解决方案,可以吸引您注意基本信息。我们可以在网页设计,应用程序设计和图形设计中看到这种趋势。

undefined




01.  L'嗡通过  Atipus巴塞罗那  02  期刊由  杰玛马奥尼  03.  海报收藏| VOL.8由  罗马发表  04. SMLXL由  梅丽莎Baillache,  垫新郎,  杰森·利特尔


8.趋势工具


8.1 Adobe Spark

Adobe Spark是Adobe Systems  开发的  用于移动和Web的媒体创建应用程序的集成套件  。[1]  它包含三个独立的设计应用程序:  Spark Page,  Spark Post和  Spark Video。(来源:WIkipedia) 


他的免费Adobe Spark Web应用程序可与Spark Page,Spark Post和Spark Video  iOS移动应用程序同步  ,从而使用户可以从任何设备创建,编辑和共享其视觉故事。


[3]  这三个设计应用程序允许用户创建和设计可用于企业,教育,社交媒体营销人员等的视觉内容。[4]  Spark Gallery突出显示了使用该应用程序的人们所做的不同项目。使用这三个应用程序时,用户可以导入图片或搜索图片。

undefined


8.2繁殖

 Procreate是 由Savage Interactive针对iOS开发和发布的   用于  数字绘画的  光栅图形编辑器 应用程序。针对iPad的艺术可能性而设计  ,并且适合从初学者到专业人士的艺术家。


 它提供130多种逼真的画笔,多层,  混合模式,  蒙版,   过程视频的4K分辨率导出  ,  自动保存以及许多其他经典和原始的  数字艺术  工具。除光栅图形外,该软件的编辑和渲染文本和矢量图形能力有限  。(来源:Wikipedia)Procreate是2018年App Store上最畅销的应用程序。

undefined


8.3 Adobe XD

Adobe XD是  由Adobe Inc开发和发布的   用于  Web应用程序  和  移动应用程序的基于矢量的 用户体验设计工具。它适用于  macOS  和  Windows,尽管有适用于iOS  和  Android的版本   可帮助直接在移动设备上预览工作结果。XD支持  网站线框图,并创建简单的交互式点击型原型。(来源:维基百科)

undefined


作者授权


总结

每一年每一个时间段都会有新的趋势,学会的辩证的眼光去看待便是最大的智慧。世界一直都在变,趋势也是。保持学习和探索的心不变就是对自己热爱的事情最好的回应,念念不忘,必有回响。共勉!

转自:站酷-木七木七 

减少认知过载获得更好的用户体验

ui设计分享达人

好的用户体验是不会让用户注意到并毫无察觉的一种体验。表面上看似非常简单,但实际上设计师已经做出了非常多的设计思考。用户越少的去思考界面,用户就越能专注他们要完成的目标。在浏览页面时,用户的注意力不应该停留在界面和设计上,他们更应该关注的是如何达成他们的目的。所以作为设计师的首要工作就是通过事先清除障碍,为用户提供直达目标的途径。


“通常,飞速行驶的货车不可能轻松地停下来。因为运用更多的动能去改变运动状态是非常困难的。与其强迫人们从他们的主任务上转移注意力,不如直接带他们去他们想去的地方。”

——Luke Wroblewski,谷歌产品总监


换个思路来看。复杂和混乱的界面会迫使用户去寻找解决问题的方法,而通常情况下,这些方法并不是一目了然的。用户会因为过多的选项、界面、导航等感到困惑,用户可能会在思考过程中感到不知所措。即便是很短暂的停顿,也足以让用户离开。

这种过度的思考就被称为认知过载,在这篇文章里,我们将为你解释如何避免认知过载。首先,我们需要明白我们大脑中存在过载风险的原因。

Image title

认知超负荷的科学根源
认知过载是指工作记忆中脑力处理的信息总量过多。当你的工作记忆接收到的信息超出其可以轻松处理的信息时,就会发生认知过载,从而产生挫败感。
但这究竟意味着什么?工作记忆到底是什么?针对这些我们又应该怎样进行设计呢?那就让我们先来了解一下认知负荷理论的起源吧。


JOHN SWELLER和认知负荷理论
虽然对认知的研究可以追溯到几个世纪,但直到20世纪80年代,澳大利亚教育心理学家约翰·瑞勒才将这项研究应用于教学设计当中。Sweller试图为每一种类型的学习者找出最适合他们的学习方法,让他们可以记住他们学到的所有知识。换句话说,怎样的课程设计才是最佳的呢?
Sweller在1988年出版了“ 认知负荷理论,学习难度和教学设计 ”,这使他的研究工作达到新的高峰,于1994年重新修改并重新发表。他的研究中运用了数据组织结构中的图表数据库,讲述了有效和无效的教学方法,而他对于工作记忆负荷极限的研究结果才是设计师们找到的最有用内容。
Sweller的研究在许多方面扩展了George Miller的信息加工理论。George Miller是一位认知心理学家和语言学家,他在20世纪50年代测试出短期记忆的极限。Miller的研究在于数字化设计,尤其是分块技术方面,这将在后面讨论。另外,Miller还创作了论文“ The Magical Number Seven, Plus orMinus Two“,这个理论促使许多设计师将菜单项的数量限制在5和9之间。
虽然这些理论最初是针对教育领域的,但它们同样适用于用户体验(UX)设计。


工作记忆
如果你每次打开冰箱,都必须回答一个像谜语一样的问题,“什么东西小的时候四只脚走路,长大了以后两只脚,而老了以后有三只脚?”这是一个老段子。但是,根据认知负荷理论,使用这种让人无奈的用户体验设计会让用户产生挫败感。

Image title

要理解认知负荷理论,你必须要了解什么是工作记忆,大脑在短时间内用于完成任务的过程便是工作记忆。工作记忆必须借助外部刺激和短期记忆,并在需要时从长期记忆中抽取。通俗一点说,工作记忆相当于计算机内存,而长期记忆则相当于硬盘驱动器。
工作记忆和短期记忆通常可以互换使用,但它们略有不同。工作记忆是处理信息的过程,而短期记忆更像是一个信息的便签本,它虽然重要,但却没有长期记忆重要。
让我们看看这篇文章是如何解释这些差异的。在你阅读的时候,你可能会遇到一个用蓝色字体书写的陌生概念。你的工作记忆需要知道蓝色文本是什么意思,才能够理解文章更深层的含义。你的长期记忆知道蓝色文本表示链接,因此你的工作记忆知道点击该链可以获得更多信息。与此同时,你的短期记忆会记住你在文章中的位置,这样当你从外部页面返回时你不会迷失,但到了第二天早上,该位置就会被遗忘掉。

Image title

设计中的应用
Steve Krug(史蒂夫·克鲁格)是一位很有影响力的作家,他在网页设计中极力推崇认知负荷理论。他的书《Don’t make me think》被许多设计师认为是有巨大影响力的著作。
书中记录了许多宝贵的经验,下面就列举一些的:
1、每一个页面都要清晰明了。
2、用户倾向于“满意” - 也就是说,采取一个最简单的解决方案来解决他们的问题,而不是最好的解决方案。此外,作为习惯的生物,用户将一遍又一遍地使用相同的方法解决问题,而不会刻意寻找一个更好的选择。
3、当新用户可以熟练使用该系统来实现他们的目标时,系统的可用性就足够了。
4、用户使用网络的绝大部分是想要节省时间。因此,用户的行为通常会像鲨鱼一样“保持移动,否则就会死亡”。
5、后退按钮是Web浏览器最常用的功能。
6、屏幕上显示的主页按钮即使从来不被用户使用,但也能让用户感到放心。
总之,用户在浏览网站过程中哪怕是一瞬间的思考,也会对他们的工作记忆造成负担。例如 “这个可以点击吗?“首页按钮在哪儿?”和“我怎么保存?”等等问题,都会不同程度破坏用户体验。


认知超负荷最常见的原因
许多设计元素都有可能对用户的大脑造成超负荷,外界环境中会有更多的因素它们超出了设计师的控制范围。例如:一个用户浏览网站的同时会担心第二天的工作报告,或者被窗户外装修的噪音所打扰,此时,无论你的网站设计多么简单,这些都会耗尽他们的工作记忆。
我们要知道每个用户的工作记忆能力都不同。随性的用户比那些对每一件小事都无比关注的用户更能专注于你的网站。不经常上网的用户往往比经验丰富的网络用户思考的更多。
虽然我们无法量化所有的认知过载,但我们可以尽量的去避免他的产生,下面,我们对网页设计中最常见的类型以及避免它们的最佳方法进行了分类说明。
1.不必要的操作
用户的每一步操作都会增加他们的认知负担。过多不必要的操作会打断用户的思路或者会让用户抓狂。因为用户的工作记忆都集中在完成特定的目标上,所以多余的操作将迫使用户投入更多的精力,这样就需要更多的工作记忆才能完成任务,所以,那些不必要的操作步骤很考验用户的耐心。
速度和节奏是让认知负荷最小化的基本因素。用户希望以轻快,目的性很强的步骤来完成任务,所以应该提前消除一切延迟。
Image title

用户希望在他们提交邮箱地址之前就知道他们将要进入什么网站,但Touch of Modern却要求用户在使用之前必须进行注册!这个强制而又多余的行为将会吓跑很多的潜在用户。
解决方案
下面这个方法,可以帮助我们找到不必要的操作有哪些:列出用户要完成任务必须要去做的步骤。例如发送电子邮件:
1、点击电子邮件图标。
2、点击“发送到”输入框。
3、输入电子邮件地址。
4、点击“主题”输入框。
5、等等....
现在,重新审视列表并且找出可删减的操作步骤,想到什么了吗?你可以通过将光标一开始就自动定位在“发送到”字段就可以删除步骤2.这将减少用户的操作,虽然很微小,但你消除的每一步对于用户来说都是友好的。

Image title

我们来看看谷歌的主页。光标一开始就在搜索输入框当中,因此用户所要做的就是开始输入文字。这些微小的交互提升了整体的用户体验,所以不要忽视它们。
2.过度刺激
杂乱无章的页面会分散用户的注意力,使用户无法专注他们想要完成的目标。就像有好几个人同时与你交谈时你会很难集中注意力,当页面上太多的图片、动画、图标、广告、文本类型和鲜艳的颜色夺取你的注意时,就会很难集中注意力。
记住,每个人的工作记忆在完成目标的过程中,会因为外界的刺激对每一步工作重新排序。每一次分心,尤其是视觉上的强烈刺激,都需要消耗用户的一部分注意力。

Image title

LINGsCARS就是个极端的例子,你可以看到有强烈对比的颜色和绚丽的动效冲击着人们的感官。在屏幕上,即便在两个不同位置同时进行的动效依然会对用户造成过度刺激。
解决方法
首先,减少一切不必要的元素。仅保留必要的内容通常是最佳的选择,减少加载时间并简化体验。用户更喜欢视觉简单的网站,而不是视觉上复杂的网站。
你还可以进行内容区分以达到平衡的效果。太多相同的内容(比如文字或图像)会让用户感到厌烦。所以,视觉内容要进行合理的组合,图像、视频、信息图表等,能够使页面和谐,并便于用户理解。
影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版,但它反而运用同量的文字内容来平衡网站页面。

Image title


在抽取出一个页面上必须要展示的元素之后,你应该采用一种让用户立即能够理解的方式组织这些元素。对称或者不对称的信息布局显示都可以很快的被用户所理解,也就是说,用一种方式,尽可能的减少大脑的工作。这样不仅对称和不对称都能让眼睛感觉很舒适,而这样的结构也能让界面交互更容易。
下面来看一下Groupon是如何布置页面的吧。左中是文本类的垂直菜单,右中是一个有特色的冻酸奶交易文本描述,插在文本中间的照片和色块的使用,分分钟创造出一个让人喜爱的沙漏结构。
下面来看看Groupon是如何将它的垂直菜单(中间偏左)和描述冻酸奶的文字(中间偏右)进行布局的吧。大图居中被文字包围着,这样就打造了一个舒适自然的沙漏形状。

Image title

对称不仅仅是在屏幕的两侧应用相同的布局,它是视觉重心和视觉方向的平衡。通过这种方式,非对称页面也能看起来很有组织性,如下图的OTHR所示。

Image title

将你的页面内容精减到只包含简单的和非竞争性的元素,这只是完成了预防过度刺激工作的一半。。不要忘记要以简单的布局呈现这些元素。
3、太多选项(希克定律)
这有点自相矛盾:用户需要更多的选择,但是往往太多的选择会使他们的大脑超负荷。


席克定律(选择困难症)为我们揭示出了一种现象:用户拥有的选择越多,他们做出决定的时间就越长。


作为设计师要去理解库克定律,可以把每个选项看作是明亮的闪光灯,如下所示,太多的闪光灯会过度刺激用户。

Image title

甚至像Rakuten这样的知名网站也会犯类似的错误,因为他们没有真正的理解这个设计原则。给用户需要的而不是给他们认为他们需要的。
解决方案
假如你已经解决了不必要的和多余的选项,你可以将他们分别放入不同的组进行分类,你可以在百货商店的网站上看到很多例子,这些网站拥有广泛的产品选择。
它不一定是太多的选择, 只是一次有太多的选择。如果你可以用隐藏菜单,抽屉和拉出其中的一种方式隐藏一些选项,那么你将获得两全其美的效果,这些超级菜单虽然为用户提供了许多选项,但一定程度上不会给用户带来很大的负担。

Image title

但是,隐藏式的导航栏不利于发现,因此电子商务和新闻等行业的设计人员应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)从而最大限度地减少隐藏菜单的缺点。或者你可以归纳导航菜单的类别,将它们精简为单行导航(如Apple和CNN那样)。

Image title

你还需要注意应该如何组织整个网站的导航。许多与库克定律有关的问题可以通过管理信息架构(IA)来处理,我们将在下面的“难以查找的页面和功能”部分中讨论。
4.太多内容
就像过度刺激和选项过多的问题一样,提供过多的内容会将用户的工作记忆拉向不同的方向。
显然,你希望展现的只是重要的内容,但对于一些网站来说,一切都是重要的,如果你的网站也有非常多的内容,为了避免让用户产生困惑,应该对内容信息进行和里的组织规划。

Image title

Arngren的问题并不是它展示了很多的产品,而是它同时展示了太多的产品。在组织结构上的调整将会给网站带来更好的体验。
解决方案
如上所述,George Miller的解决策略是“分块”,将需要展示的大量内容以可管理的方式组合起来,以便于记忆,电话号码分为国家代码,区号,一组三位数和两组四位数字便于记忆,而一连串的11个数字会很难被记住。
你想在商店主页上放大量产品的图片吗?比起将它们全部罗列出来,不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。

Image title

还有文本组块,文本组块包括简短的自然段,合理利用标题和副标题以及足够的留白。
对于需要大量数据的长表单字段,可以尝试采用多步骤表单。长表单可能会令人生畏,有时会导致用户流失。你可以将表单的信息分在不同的页面里,减少信息过量给用户带来的影响。记得一定要有一个进度标记来让用户知道还剩下多少页。(可以总结为复杂的页面简单化)

Image title

购买机票总是涉及填写大量的信息,其中没有一项是多余的。Virgin Atlantic通过将其分解在多个单页面上填写来改善其繁琐的体验:选择航班,填写乘客信息,输入付款详细信息等。将所有这些信息放在一个长页面上会对用户造成负担,也有可能会放弃购买。
5.模棱两可的界面
认知超负荷的罪魁祸首先就是用户界面混乱。永远不要让用户花费大量的时间来弄清楚他们如何才能完成想要的目标,以及花费时间来弄清楚图标的含义是什么。

Image title

并非所有用户都是经验丰富的,从而可以理解SpeedCrunch这种含义模糊的图标。即使他们能够识别代表Windows系统和Mac OS X系统的符号,那么位于右下角的那两个图标也会让用户迷茫。
解决方案
使用用户已经熟知的视觉提示。用户通常会用他所熟悉的符号来进行操作,即便是在以前从未使用过的网站上也是这样。如果你觉得没有新意,可以融合品牌特征巧妙的结合成为用户所熟悉的形式。Home Depot虽然运用了较为普遍的图标,但同时也赋予了他们品牌独有的橙色。

Image title

标准标签(如“联系人”和“提交”)的按钮比非传统标签(如“地址”或“开始”)更容易识别。通常已知的标签可以提高用户的浏览体验,而不常见的标签会让用户暂停以了解按钮的功能。不要为了个性化而丧失了识别性。
另外,你如果真的需要一个从未见过的图标该怎么办呢?如果这样,可以运用现实生活中的场景展示来让图标进行自我解释,这种做法是连接现实和虚拟的桥梁。例如:早期的互联网先驱选择了一个信封来代表电子邮件,因为信封是邮件系统的明显标志。
此外,要避免含义模糊的图标,特别是可能还会被误认为是其他含义的图标,就像下列Issuu的图标,有些是被人熟知的,但有一些却不是。如果用户必须通过点击这个图标来发现它的功能,这就会中断他们的操作进程。

Image title

任何一个表意不清的图标都应该附带说明,告诉用户怎样操作。新的并且不常见的用户界面,就需要更多的分步教程。例如,Slack就给出了一个完整的视频引导来说明界面的操作流程。

Image title

6.难以查找的页面和功能
即使用户已经拥有他们所需要的一切,但他们可能还是不知道如何去寻找它。这样就会让用户费尽脑力去寻找他们所需要的。作为用户体验中不可或缺的元素,导航应该放在明显的地方,给用户信心去任意浏览网站而不会迷失。

Image title

如果你觉得汉堡包图标不好,那可以在看看Mojo Yogurt,它会要求你将鼠标悬停在左上角的徽标上以显示导航菜单。

Image title

虽然围绕着Logo有个小的动效,但对于整个屏幕的颜色和动效来说,它并不够明显。
解决方案
根据用户的偏好理顺你的信息架构。你的目标用户群可能并不认可你的做法。因此,要想他们学习如何组织网站,卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。

Image title

如果你还希望通过组合页面和菜单项来消除多余的页面。设计工作室Waaark通过将其工作室的简介,团队成员简介和联系信息这三个页面合并到一个页面来简化他们的导航。

Image title

如果某些功能或特征比其他功能或特征更重要,可以运用视觉手段来吸引他们的注意,增加大小,添加动画以及使用对比色以此来吸引用户的眼球。

Image title

PayPal期望有更多的老用户而不是新用户,并通过设置登录按钮与吸引注意力的白色块背景来迎合前者。
7.内部不一致
假设网站的主页使用标准的蓝色和带下划线的文本来表示链接,但另一个页面仅使用蓝色而没有下划线。当用户浏览其他页面时就会停下来去想,“它没有下划线,这还是个链接么?”他们甚至可能不会再去关心链接,而会被其他页面的不统一分散注意力从而影响整体的用户体验。
要记住,最好的用户体验是不会被用户所察觉的,而像上面这样通常都会被注意到。
总结
1、认知过载是影响工作记忆的因素。当过多的信息阻碍决策和整体经验时,就会发生认知过载。
2、使用不同的内容类型和结构化页面组合,可以避免视觉混乱。
3、隐藏式菜单可以帮助用户一次管理可用选项的数量,但降低了可发现性。
4、“分块”和“步骤”等的方式可以防止认知过载。
5、UI元素和图标应该基于用户现有的认知上,这样他们就不需要过多的思考,新的独特的功能要加上解释说明。
6、围绕用户的实际思考方式构建你的信息架构。卡片分类等可用性测试可以为你的目标群体揭示最直观的导航方案。
7、视觉和功能的不一致,以及打字错误和语法错误,都会分散用户的注意力。
8、尽可能减少冗余。另外,请留意如何最大限度地减少用户操作步骤量和他们必须花费的精力。


文章来源:UI中国

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

引导页设计浅析

ui设计分享达人

APP中的闪屏、启动页、引导页的区别,设计方法,个人案例分析,以及品牌解读

【什么是闪屏 / 引导页与闪屏的关系】

(部分引用观点)



引导页是闪屏的其中一种,一般出现在版本分布或大版本升级时。

我们先整体看一下闪屏页的大致类型:

(声明:以下图片来源于应用截图,仅作为学习交流使用)









一、常规闪屏


为什么叫常规闪屏?

因为这类闪屏比较普通,我没有想到什么更专业的词汇,暂且就叫常规闪屏吧。这类闪屏的使用国内的和国外有点不同,因为按照苹果官方的说法是,用户打开应用能立即使用是最好的体验,例如:系统自带的一些应用,是没有闪屏的。再甚者闪屏最好就是让用户感觉不到,和首页能有一个完美的融合和过渡。

这种体验也很棒,国外的instagram、facebook等就是使用这种设计,闪屏长得很像首页,更像是一张加载类的占位符








当然,因地制宜,国内的我们已经习惯了闪屏作为App品牌的宣传和推广手段,一般由logo+名称+slogan+品牌色组成,界面还是相对简洁明了的,但还是很明显的违背了苹果官方的指导说法,但是没办法,这就是商业需要。


这样设计也有利处,可以减少用户在打开App时的焦虑感,也可以让用户更直观的了解品牌,传递一些情怀、理念,多看一次闪屏,也是让用户强化品牌记忆的过程,只是不知道是好的记忆点还是坏的,就要我们自己斟酌了。








二、广告闪屏


广告闪屏,顾名思义就是产品本身为了进行流量变现从而获得盈利,给一些商家打广告或者进行合作设计的一类闪屏,这是无可厚非的。不过广告闪屏自带被“嫌弃”属性,应该很多用户看到这类闪屏的心理是比较排斥的。

至少对我来说,我是很少关注这类闪屏,除非闪屏设计的非常的酷炫,我愿意多看一下,否则的话我就想立刻把它关掉,所以在这类闪屏上加上“倒计时(loading)和跳过”就显得很必要,并且“跳过”的位置也要方便用户点击。

这类闪屏最好只出现每天第一次打开App时,避免让用户厌烦。不管出于何种目的,都需要在商业利益和用户体验之间保持一个平衡,不然用户会流失的很快,用户流失了,何谈盈利呢?

另外广告闪屏和下面要说的活动闪屏一样,会有一个模板:底部是闪屏图片,上面盖上一层logo模板。

App启动时会从服务器拉取闪屏数据,本地会保存logo模板。如果服务器更新了闪屏数据会拉取数据进行展示,如果没有更新或是网络不佳,就会默认展示缓存的闪屏数据,以免发生卡顿现象,以保证流畅的用户体验。







三、活动闪屏


活动闪屏和广告闪屏有点类似,出于产品运营方面的需要,它起到活动宣传的作用,每年的双十一、双十二期间,各大电商App的闪屏都会用到活动闪屏,还有一些商家自己造的一些节日:品牌周、年货节、会员日、狂欢周…相信大家已经见怪不怪了。


近期我留意到一个问题,就是我们在使用App时,经常会在应用之间进行切换使用。如果我们从其他应用再次返回时,最好不要再加载一次闪屏,会给用户很不好的用户体验。目前使用下来,淘宝、天猫等这类主流应用都有这种问题,但是我想这应该他们有意为之。







四、节日闪屏


每逢一些节假日,各大品牌都会推出一些当日的闪屏,那么为什么要设计节日闪屏?

我觉得有几点原因:

       长期看常规闪屏,用户很容易会有视觉上的一种疲劳,节日闪屏会给用户一种不经意的惊喜和新鲜感;

       可以蹭一蹭节日的热点,提升产品本身的品牌调性;

       在节日给用户以问候和关怀,和用户在情感上产生共鸣,从而更好的连接用户和产品,我想这应该是最重要的原因。


节日闪屏比较吸引用户的注意力,它不像广告类闪屏,我看见这类闪屏就会忍不住的多瞅几眼,所以设计这类闪屏的时候要非常重视,因为用户愿意等待,这是非常求之不得的,这就需要设计师具有比较强的表现能力了。

我们在设计的时候可以先进行思维上的发散,或者是逆向思维之类的,比如:春节将近,我们可以联想到是什么,理清一个思绪,要有节日的氛围,可以活泼、可爱、夸张…切忌呆板。

 







五、大版本升级闪屏(引导页)


在App进行了大版本升级后,要向用户展示产品新功能的操作方法。这类闪屏也可以称为引导页,页面数量控制在3-5页,每一页都有一个对应的主题,主题要精简,切忌文字过多。


而且每一页设计形式要类似,否则会给用户一种视觉落差感。页面上要加上“跳过”功能,因为用户更希望尽快体验新版本,而不是看你的这些教导,在最后一页要加上类似“立即体验”的button。







——分割线【品牌传达力】——










启动页面告诉用户“我是谁”“我是做什么的”,开头跟用户做了自我介绍,引导页的目的主要是告诉用户:“我该怎么使用”或者是“我有什么亮点”(重点宣传的功能),借用男女相亲例子,双方介绍完自己之后,开始展示自己有什么优势,好的引导页设计直接关系到用户是否“对你有兴趣”想一进“了解你”。

从上图可以看到,引导页在品牌传达力上居首位,其次应用市场说明图。








【引导页展示目的】

以下尽量列举了金融相关app截图,仅供学习使用



引导页定义比较广,往小了讲,我们一般会认为在用户初次打开应用时跳出的几张介绍应用功能的页面就叫做引导页;那往大了说,在用户使用某个功能前就能帮助用户降低学习成本的页面或存在引导属性的弹窗都可以称为引导页。

先从引导页展示的目的出发,再结合实际app情况去确定宣传标题,最后结合不同的设计展示方式以及动效。







一、产品特色介绍


多数时候,我们初次打开应用会看到下面这样的引导页:


可以看到一个共通点——即页面呈现的内容为该 App 的主功能或新功能推荐,或者是对刚迭代的功能做了哪些优化的说明。

理想情况是:用户能了解这次产品做了哪些优化,帮助用户更清晰地了解产品。







二、操作引导


这类引导会出现在内容页面,直接引导用户去操作相关功能

蒙版引导通常紧贴着界面流程进行而出现,使用透明色间隔形式加上简单指示性文字与图形,总是能够简洁明了地告知用户产品的功能或者使用方法,并且由于其轻量的属性会大大减少用户的阅读时间。设计得当的蒙版引导不仅可以与其他引导相辅相成,同时也能够增加用户对产品的好感度。

它的好处就是清晰明了,直接让用户知道你想表达什么。它的实际效果会比纯内容引导页好很多,但同时也会有一个问题,即打扰用户操作。

这样的方式已经解决了内容操作引导的问题,但其实这种方法也会使用户厌倦,所以内容不易过多。







三、理念传达


以传达态度理念,生活方式等为主,比较概念和意义上的东西,吸引用户达到某种程度的共鸣,从而产生吸引力。







四、侧面实力烘托


多用于有实力/特色的产品或者企业,展示自身优势,让用户对产品产生信赖感。










五、问题解决


指出用户所面临的问题,而你的产品正好可以解决。



结合自身app/企业所具有的优势;产品的功能特色;产品的定位;等相应的展示目的。也存在混合展示,不过要把握好标题的设定,在标题与设计上达到统一。








【引导页设计方法】


在确定了引导页展示目的之后,下面整理了在引导页设计过程中的方法。

目前比较常见的几类引导页的类型(电商除外),根据产品的特点来确定设计风格,总体没有固定规则。










一、图文结合


使用有关联性的图片,同种版式,优点是感情表达直观简单,画面冲击感强,缺点是泛表达,不能表达内容。









二、产品界面描述型


功能描述型,使用app画面说明,通常在版本更新时用来对新功能进行重点描述,是目前比较常见的引导页表达方法之一,比较通用。









三、模拟应用场景


通常用插画方式表现,通过图文结合的方式全方位阐述中心思想,插画风格具有丰富的多样性,同时又能贴切表达主题,所以在app中出现频率越来越高。

以下列举了百度金融的版本引导页,通过系列插图表现贴心、安心、用心、省心、随心,插画紧密契合主题,完美使用排比句的形式。











四、吉祥物的运用


一个成熟的app通常会吉祥物来表现,启动页是用户打开app第一眼看到的地方,吉祥物可以让用户在2-3秒时间内深刻体会到产品的核心价值观。












五、代交互 动效的


这类启动页通常是在页面切换中加入一些动效果的设计,使得在交互体验上更加突出,与静态页面间的切换显得更加生动有趣。

动画呈现方式趣味性更高一些,开发成本相对也会高一些。











六、视频类/动画类


这类的理论上不叫启动页,叫开篇动画更贴切,打开app通常为一小段视频或动画引入页面











【实际案例分析】


闪屏/引导页的设计方法很多,但要在设计之前充分考虑到产品定位和应用场景。

下面引用我自己的案例分析,因为对产品理解不够到位,设计过程比较坎坷,经历了几个版本的优化。








【引申思考】


对晋盈汇app来说:

1.用户层面上,在不同版本的情况下需要紧跟不同的用户引导页,尤其这类理财类等APP,使用操作都是比较繁琐,因此需要用户引导帮助用户玩好APP;

2.品牌形象上,可以深化品牌价值,比如提炼产品slogon,吉祥物等,启动页是用户打开app,第一眼看到的地方,需要让用户深刻体会到产品的核心价值观。

3.商业用途上,可以利用启动页配合营销事件,实现商业价值。

4.从技术层面,程序可以利用启动页的2~3秒内,预加载一些东西,使得后面的用户体验更好。


启动页更多的是在启动过程中的2~3秒内,体现app的核心的品牌价值,而品牌价值通常体现在产品的情感化设计上。


情感化设计基于三个基本层次水平:本能水平的设计、行为水平的设计、反思水平的设计。

本能水平的设计——外形(UI界面,整体视觉感受);
行为水平的设计——使用的乐趣和效率(把完成目标前的过程乐趣化,如何最便捷的触达相应功能,或达成某结果);
反思水平的设计——自我形象、个人满意、记忆(强化品牌传播,构建品牌形象,让品牌成为一种文化)。


情感化设计点:登陆界面、启动页、引导页、节日闪屏、404、刷新加载...




强化品牌标识,有利于品牌传播



上图是美团外卖的闪屏,以插画这种具有亲和力的表现手法去搭建一个场景,讲一个小故事隐喻一个情感。然后传递给用户一个主题。而插画下方,则是美团的品牌标识:袋鼠LOGO、文案“美团外卖,送啥都快”。


当你听到电脑发出“滴滴滴”的时候,你就知道这是QQ来消息了,声音也是一种品牌标识。



弥补产品在用户使用过程中发生的意外



上图是ofo共享单车在用户退押金时的三个提示页面,分别是告诉用户ofo的作用是让你便捷轻松出行,退押金后损失的优惠,最后是用利益诱惑你。从三个层面去打用户的痛点。不过确切来说只有第一个界面算是与用户情感化交流,后两个算是再利用人的贪欲。


关于文案的情感化设计要分情况,根据APP所分领域、调性和目标用户人群的特性而定。



转自:站酷-呜呜吉良斯基

如何创建精致的UI界面布局篇

ui设计分享达人

前言

前面已经完成这个系列的 “排版和图形”两篇文章,本周接着后面的 布局篇幅,我们知道布局的好坏直接影响产品美观度,不同形式的布局,给用户带来的感受是不一样的,产品也将会有不一样的性格,因为布局直接影响界面空间疏密程度,不同产品都有着不同空间,那么我们要如何做,才能更好的去布局,并且能在激烈的竞争中脱颖而出,现今大部分产品基本都是长得差不多,作为设计师更应该去多研究一些布局趋势,并能将其融汇在自家产品中。 




为什么要重视布局

- 
布局对界面设计来说十分重要,不仅是我们常说的在移动端或者web端的设计中,他在车载中、电视端UI或者VR设计同样有很大影响。我们知道界面设计中最关键的五大基础语言;形,色,字,质, ,其中 构(结构)即是我们所说的布局,五个维度之前已经和大家分享了 图形和字体篇,今天我们可以看下布局对界面设计的影响,以及我们该如何通过布局来使界面设计看起来更加有范,更有自己的视觉特征点在里面。 




目前主流布局趋势是怎样的

-

前面在向大家介绍布局的重要性和他对界面设计的影响,那么如果我们需要做出一些比较有创新的布局来提高界面精致度,该如何去下手呢?我们可以通过观察目前主流一些趋势做法,了解国外设计师如何找到更有创意的方式来设计他们的布局 - 并将一些创意运用到界面设计中的,下面我们一起看下。 





偏移与叠加网格布局

-

网格布局我相信大部分人都知道,很熟悉,那么今天所说的偏移叠加网格布局是什么样子的呢?其实就是我们在设计界面时候,把最底层基础网格搭建好后,上层的内容排版,通过错落叠加方式来布局,这种布局的优点是留白空间大,呼吸感强,图文错落交织一起,形式感增强。缺点是,运用的范围会小一些,承载内容少,一般Web端运用比较多。当然也有一些移动端设计个性化产品存在这样的布局 (Rover APP)可以去下载体验下。 


上图文字与图片交叠错落排版,图片与图片之间也是网格交错



上面移动端设计,设计师通过留出左侧空网格,整体内容往右侧偏移,导航相对内容来说做了差异化设计,并未进行偏移设计(看我上图红框部分)  。这样做的目的是因为,我们点击汉堡菜单的时候,本来整体就要往右侧移动,如果再继续移动,那么内容会显示不下,同时视觉效果并没有很好



半偏移网格布局,界面中并非所有的内容都偏移底层网格,而是部分模块这样去做,原因是内容多的情况下。





分屏布局

- 

分屏布局,顾名思义就是将屏幕进行几种不同区域的划分,然后内容分布排版在里面,分屏布局解决的主要问题将屏幕大的设备进行合理划分空间设计,一般是在横屏运用比较多,比如PAD,或者WEB或者车机中控屏,下面一起看下分屏布局在实际设计中的具体表现



上图界面设计采用了1/2分屏布局,将图片与内容文字进行区域划分,下图是将主文案摆放在分割区域中间(文字较少情况下可以这样去做)增强形式感。当然分屏布局可以有多重形式,列如,2/3,1/3,3/4等等,可以根据内容进行选择合适分屏





Z轴视差布局

-

视差布局,在web app或者web端布局常用比较多的一种,运行方式当滑动页面内容时内容与内容之间运动速率会有时间差,同时Z轴空间位置也会有深度差异,这样就形成了视差效果,视差布局一般在H5界面出现比较多,用于营销场景会多一些,当然WEB端倒是比较常见 


地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/





内容重叠布局

- 
内容重叠布局,打破了传统平整的极简注意风格,扁平化设计将会加入Z轴空间元素,使得整体设计有了新颖的布局方式,这也是一种区分竞争产品的布局方式,一般内容重叠产品大多出现在偏杂志化设计的产品中,如之前我介绍图形篇时候提到 韩国29cm
他们详情页,运营页面运用了重叠布局。 



地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/






卡片布局

- 
为什么要把卡片布局拿出来讲?卡片布局应该是我们见过最多的布局了,卡片布局也会有很多种方式去布局,根据产品内容复杂程度去建立卡片容器大小,卡片作为承载内容的容器,对于响应式布局也是非常有利的支持,我们看appstore,behance的移动端,都是卡片布局。 



卡片布局还有一个最大好处就是,他能够封装内容,使得画面布局整洁,所有内容都往容器里面放,信息之间保持很好的区分



全封闭卡片布局,内容之间通过卡片封装,中间无空隙





自由式网格布局

- 
这种网格布局相对来说比较开放性的,布局上多以卡片承载内容为主,卡片跟随隐形网格随机分布在画板中,有点类似我们说的暴瀑流布局方式,这种会比较灵活,一般会在摄影类,杂志类,文艺类产品居多。 







如何运用这些布局进行创新设计

-

上面已经列举了目前比较流行的一些布局,可能部分人还是感觉不会使用,也不会很好的去利用在自己设计中。要么就直接把别人布局抄袭过来,其实是有方法的,我们可以把自己认为比较好的一种布局拿出来,然后拆解他,拆解完后,再来重新组装,组装的时候,你可以参考下其他布局,两者集合起来,就像乐高积木一样,你可以有很多种组合方式。 


上面利用乐高积木思维重新对布局进行拆解组合,当然一切的布局都是基于当前你的主旨,你的产品内容,找到合适布局,然后去研究他,并且拆解,然后重新搭建属于自己产品一套布局规则





总结

-

全文向大家介绍5种布局思路,当然其实不止这5种,但是其他布局相对来说会运用少一些,这些布局我们可以加以学习利用,可以运用在任何设计中去,当然运用的时候,一定要清晰知道自己产品的主旨目标,用户群体,合理运用布局,做出创新设计!


转自:站酷-设计TNT 

如何让你的设计更有说服力?掌握这五个体验设计原则··

ui设计分享达人

从数个项目中总结出的体验设计原则,包括详细的举例说明

李笑来说过一句话:审美常常并不需要知道原理,但创造美的人必须有方法论,否则不可能持续创造。但是很多人总觉得背方法论是笨工夫,高手难道不应该根据场上局面随机应变吗?但事实是,随机应变才是笨办法,方法论和成语典故、数学定理一样,是人脑思维中的快捷方式,“聪明人”之所以能做到随机应变,是因为他们脑中存有足够多方法论,当遇到事情时,这些方法论像神经一样互相连接,给出最优的解决方案。

 

今天就跟大家分享设计的方法论——设计原则,在方案输出时,可以将设计原则作为方案的自检工具,这样在方案内审时,面对领导和同事的质疑,除了说“大厂都是这么做的”这样苍白无力的解释外,还有更多的设计原则做支撑。

 

一、一致性

一致性的益处:对用户来说,一致性可以降低学习成本,对开发团队来说,可以减少错误,降低产品的维护成本,提高代码和设计的复用率。对企业来说,一致性意味着产品的不同模块要有相似的外观、感觉和行为,这种特性会被扩展到企业其他产品中(比如Adobe旗下的产品都严格保持着相同的标准),有利于强化用户对品牌的认知,建立品牌忠诚度。

 

一致性的弊端:很多设计师容易被这一原则而禁锢,进而成为设计师偷懒的借口,设计师有时为了强调一致性而忽略了特定情境下的用户行为和使用模式,所以在设计时不能只关注用户的感觉和品牌认知,要根据特定场景敢于创新。

 

一致性可以从以下几个维度分析:

 

1、交互行为一致性,交互行为一致性又包括操作方式,控件,控件位置等。拿最近做的项目举例,「转到银行卡」和「信用卡还款」虽两个不同功能,但尽量使模块内控件,控件位置及操作方式保持统一。


2、视觉表现一致性,包括风格,色彩,文字,图标,图片等。风格和色彩的统一比较容易理解,这里详细说一下图标和图片如何保持统一。


图标的统一性:

1)一款产品在各个平台上的图标要一致

2)多款产品在一个平台上的图标之间的风格或规范要一致

3)一款产品的每个图标的风格、细节、体量感上要一致


如何做到每个图标风格,细节,体量感上的统一?

1)保持图标的复杂程度或简约程度统一

2)不使用潦草、手绘的造型,几何形更容易达到统一

3)保持图标的维度统一(二维/三维)

4)保持图标阴影、渐变等样式统一或均无样式

5)保持图标颜色或图标背景的颜色统一

6)保持图标的尺寸和比例统一(体量感)

7)保持图标线的粗细统一

8)保持图标圆角大小统一


如何做到图片的一致性:

1)图片的处理方式一致(尺寸比例,圆角,投影)

2)图片的风格一致,图片风格是否保持统一视产品属性而定,像淘宝这样的电商平台想要保持图片风格的统一性简直要了店家的命,但是图片的处理方式可以做到统一,比如淘宝的商品图大部分是灰色背景等。

 

3、文案的一致性,文案的人称,风格保持一致,网易云音乐的文案都是用的第二人称,且具有很强的趣味性。

二、优先级

优先级可以从以下几个维度分析:


1、功能优先级:把握核心需求,突出亮点功能,拿最近做的项目举例:转账主页面功能优先级最高的是「转到银行卡」「微转账」,所以在页面布局、所占比重上强调这两个功能,同时上滑时两个按钮变小冻结在页面顶部,方便用户快捷使用。


2、内容优先级:内容分级,突出核心内容。拿最近做的项目举例:代金券详情页,根据用户使用卡券的场景,以及数据分析得出的内容优先级对内容进行布局与设计。将优先级最高的代金券二维码放在用户视线触达的位置,当用户上滑时,底部出现全局浮动的按钮,可快速显示二维码。


再比如,转账后的状态页面,用户最关心的内容是转账后的状态及转账金额,其次是收款方信息以及转账备注,将信息进行整理、归类、隐藏、删减,避免不重要信息对用户获取重要信息时的干扰。点击箭头可查看更详细的转账信息,最后的页面设计如下:


3、交互优先级:主要路径清晰,减少干扰和分支。如下转账流程中,根据用户每一步骤的目的与使用场景进行信息呈现,该出现的时候出现,不该出现时隐藏,分步骤进行,使转账这一主路径清晰明了,减少其他信息对用户的干扰。


4、视觉优先级:重要的视觉信息第一眼看到,主要次要信息有所区分。如微信钱包页面,收付款和钱包的视觉优先级明显高于下方的腾讯服务。美团首页上方虽都是功能按钮,通过图标的体量、大小、位置拉开彼此层级,突出展示「扫一扫」「付款码」「红包/卡券」「骑单车」这些功能,很好的引导了用户视线,完成产品目标和用户目标。


三、易读性

易读性可以从以下几个维度分析:


1、使用用户语言而不是开发者语言,贴近生活实际而不是学术概念。图1是改版前的页面,页面的核心目的是通过图表、止鼾次数、分贝向用户传达止鼾器的止鼾效果,呈现方式不直观,且用户对分贝并没有确切的概念,图二将分贝巧妙的转化成蜜蜂的声音,增强了易读性,在这里蜜蜂的声音就是用户语言,分贝即开发语言。


2、符合用户认知与心智,延续约定俗成概念。苹果的首席设计师乔纳森·艾弗说:“好的设计无需认知门槛”,好的设计不需要任何指示用户就知道如何操作。如下图苹果系统的亮度设置,向上滑动是提高亮度,向下滑动是降低亮度,而不是向下是提高,向上是降低。


再比如,根据我们的正常认知,下一步应该在右,上一步在左。


3、保持简洁,不给用户造成困扰与疑惑。还是拿之前做的项目举例:微转账不同于普通的银行卡转账,需要给用户进行解释说明,改版前的说明直接将大段的解释文字展示给用户,可读性差,改版后将大段的解释转化成4个直观的步骤,对用户来说更容易理解。

四、容错性

容错性可以从以下几个维度分析:


1、操作前可预知:有预防用户出错的措施,关键操作有确认提示,及早消除误操作。如图1输入转账金额时提前告知用户银行卡余额,避免余额不足让用户重复输入;图2提前告知用户提取的金额是50的倍数,避免用户出错。



分期还款时,提前告知用户一个账单周期只能申请一次分期,且在用户二次确认的弹出框再次提示。



2、操作中有反馈:给用户明确的错误信息,并协助用户方便从错误中恢复工作。如在分期金额输入错误时及时告诉用户出错的原因。



3、操作后可撤消:允许用户撤消错误操作,如mac系统垃圾箱中「放回原处」功能:



微信对话中的「撤回」功能,这些都体现了系统的容错性。


五、可控性

可控性可以从以下几个维度分析:


1、记忆及预测用户行为,帮助用户做些事情,减轻用户记忆负担。如mac系统的密码管理可以帮助用户记住常用的账户密码:

邮件中,输入收件人的姓,软件能自动检索出该姓下曾出现过的所有用户的邮件地址。


2、对操作给予及时反馈,用户能了解操作是否已生效,用户在界面上的任何操作,不论是单击、滚动还是按下键盘,或者操作状态变化,界面应及时给出反馈。


3、将操作状态或进度显示出来,用户能了解当前系统状况,如让用户实时了解货物的物流信息,会减轻用户等待的烦躁感,同时增加可控感。


4、用户清楚知道自己当前在哪里,退路在哪里,可以去哪里,如分页控件就能明确的告诉用户自己在哪,退路在哪,还能去哪。




5、提供适时帮助、必要的信息提示,如最常见的功能引导



回顾:


一、一致性

1、交互行为一致性:操作,控件,位置。

2、视觉表现一致性:风格,色彩,文字,图标,图片。

3、文案措辞一致性:提示语,功能按钮等。


二、优先级

1、功能优先级:把握核心需求,突出亮点功能。

2、内容优先级:内容分级,突出核心内容。

3、交互优先级:主要路径清晰,减少干扰和分支。

4、视觉优先级:重要的视觉信息第一眼看到,主要次要信息有所区分。

 

三、易读性

1、使用用户语言而不是开发者语言,贴近生活实际而不是学术概念

2、符合用户认知与心智,延续约定俗成概念。

3、保持简洁,不给用户造成困扰与疑惑。

 

四、容错性

1、操作前可预知:有预防用户出错的措施,关键操作有确认提示,及早消除误操作。

2、操作有反馈:给用户明确的错误信息,并协助用户方便从错误中恢复工作。

3、操作后可撤销:允许用户撤销错误操作。



五、可控性

1、记忆及预测用户行为,帮助用户做些事情,减轻用户记忆负担。

2、对操作给予及时反馈,用户能了解操作是否生效。

3、将操作状态或进度显示出来,用户能了解当前系统状况。

4、用户清楚知道自己当前在哪里,退路在哪里,可以去哪里。

5、提供适时帮助、必要的信息提示。


-希望此文对你有一点帮助


转自:站酷-poppy



干货|尼尔森十大可用性原则案例解析

ui设计分享达人

尼尔森的十大可用性原则,它们被称为「启发式」,<br>被奉为交互设计师的入门法则。

开篇灵魂拷问:


你认为一个怎样的产品才算是一个好的产品?

这个问题耳熟吗?面试的时候是不是有被问到过?
我们经常使用的那些产品,哪些是好的产品呢?

当我们谈论一个 APP 产品时,
作为用户你最关心的是什么?
一般都是是这个产品好用吗?功能复杂吗?
而不是这个产品用户界面颜色好看吗?
交互的动效酷炫吗?

互联网已经深入到每个人的生活当中,
时刻影响着我们;
一个好的产品会给我们带来便捷,
使我们的生活变得简单而又美好;
也会有一些产品使用时会感到不舒服,
糟糕的产品体验会让我们的生活变得复杂而又烦恼。
所以,决定一个产品好不好用,
能不能长期使用都是用户体验直接决定的。
用户体验关注的是在满足用户需求的同时带给用户美好的感受。

接下来我们来聊一聊「尼尔森十大原则」,
这十大原则是具体而又全面的用户体验可行性检验方法。

    
尼尔森是谁?
雅各布·尼尔森(Jakob Nielsen)是毕业于哥本哈根的丹麦技术大学的人机交互博士,他拥有79项美国专利,专利主要涉及让互联网更容易使用的方法。于1995年1月1日发表了「十大可用性原则」。1995年以来,他通过自己的 Alertbox 邮件列表以及 useit.com 网站,向成千上万的 Web 设计师传授 Web 易用性方面的知识,尽管他的一些观点可能带来争议,至少在 Web 设计师眼中,他是 Web 易用性领域的顶尖领袖。2006年4月,并被纳入美国计算机学会人机交互学院,被赋予人机交互实践的终身成就奖。他还被纽约时报称为“Web 易用性大师”,被 Internet Magazine 称为 “易用之王”。
        
尼尔森的十大可用性原则,它们被称为「启发式」,      
    
    
是广泛的经验法则,而不是特定的可用性指导原则。
虽然是1995年提出来的,
但是至今仍然被奉为交互设计师的入门法则,
我们不能把它上升为一种标准,
而只当做一种经验来学习,
然后跟现实中的设计结合来使用。
因为尼老师是从 web 设计提出的十大可用性原则,
我们要结合的是目前移动互联网的特点,

然后在「尼尔森十大原则」的结构下探讨在用户体验上达到的目标。


尼尔森十大可⽤用性原则为:

01. 状态可见原则 

02. 环境贴切原则 

03. 撤销重做原则

04. 一致性原则 

05. 防错原则

06. 易取原则 

07. 灵活原则 

08. 易扫原则 

09. 容错原则 

10. 人性化帮助原则


下面我们就针对每一条来单独分析一下吧~


 ·.  状态可见原则 
系统应该让用户知道发生了什么,
在适当的时间内做出适当的反馈。
不要蒙蔽用户;
沟通是所有关系的基础,无论⼈还是设备。

示例:在淘宝里,我下拉时他告诉我「松开刷新」,也就是现在还没有开始刷新;我松开后状态变更成「刷新中」,表示现在正在刷新。
这样的设计告诉我们,界面现在是什么状态,现在在干嘛,在整个功能的变化过程中我们都能看到对应的文字描述。


其他示例:下拉刷新时的加载中,加载完成提示,收藏成功、支付成功、实付失败等提示。


·. 环境贴切原则

功能和服务贴近用户使用的场景,

符合当前场景用户的体验。

产品的功能和服务应该贴近真实世界,

让信息更自然,逻辑上也更容易被用户理解。


示例:我们在店里买东西的时候经常会听到这样的声音「支付宝导致:5元」就是贴近环境的设计。
商家需要确认你是否付钱,
但是又经常忙于手头的事情无法及时查看;
而这样功能的设计,商家即使在忙着手头的事情依然能通过声音来确认已经收到你的钱了。
这样的设计对于商家和消费者是友好便捷的。


 ·.  撤销重做原则 

在使用产品时了解和掌控当前页面。

如果用户误操作,可以随时撤销,用户在使用产品时足够自由。


示例1:我们用微信和对方聊天时,当我们写了很多字,发出去时却发现其中有错误,这时我们可以使用微信的撤回功能,体验更好的是,撤回消息旁边有「重新编辑」功能,可以让之前编辑的文本回到对话框重新编辑再发送。如下图:


示例2:iOS系统照片的删除和撤回


·. 一致性原则

同样的文字、状态、按钮,都应该触发相同的事情,遵从通用的平台惯例。也就是,同一用语、功能、操作保持一致。主要包括以下五个方面:


1. 结构一致性

保持一种类似的结构,新的结构变化会让用户思考,规则的排序能减轻用户的思考负担。

示例:微信中每个模块的条目都有统一的「图标+文字信息」的结构样式,能让用户快速了解每一个模块;


2. 色彩一致性

产品所使用的主要色调应该是统一的,而不是换一个页面,颜色就不同。

示例:淘宝的图标颜色与界面的主色均为橙色,也包括其中一些标签和强调的文字颜色都是橙色色。整个界面除了图片的有效信息外,都通过灰、白、橙色色来呈现,界面保持了很好的一致性;


3. 操作一致性

能在产品更新换代时仍然让用户保持对原产品的认知,减小用户的学习成本。

示例:微信在对话框和通讯录都采用了左滑出操作的交互,如下图:


4. 反馈一致性

用户在操作按钮或者条目的时候,点击的反馈效果应该是一致的。

示例:QQ的每个分组点击后都是向下展开组内成员列表;


5. 文字一致性
产品中呈现给用户阅读的文字大小、样式、颜色、布局等都应该是一致的。
示例:例如微信几个关键界面的字体:三个主界面内容结构不尽相同,但是,列表的标题字体和间距都一样,这样让整个APP视觉上看起来很舒服;


 ·.  防错原则
比出现错误信息提示更更好的是,用设计防⽌止这类问题发生。在用户选择动作发⽣生之前, 就要防止用户容易混淆或者错误的选择。

1. 限制操作范围与条件;
示例:未输入验证码前,底部的登录按钮是置灰不可点击的,只有填写完整,底部的登录按钮才会变为可点击状态。这就是为了防止用户犯更多错误;


2. 对有风险的操作进⾏二次确认;
示例:删除个好友时,通过二次弹窗给出防错措施。

·. 易取原则

减少用户记忆负荷,在适合的时机给用户需要获取的信息。
1. 为用户提供历史记录、关注、收藏等功能;
示例:爱奇艺为用户提供了看过记录和我的收藏,帮助用户记忆:



2. 选择而不是输入,尽量降低输入成本;

示例1:打车软件自动获取当前位置;

示例2:iOS系统收到验证码后自动带入到键盘,点击直接输入;


·. 灵活原则

对于新用户来说,需要功能明确、清晰,对于老用户需要快捷使用高频功能。不可为了某一种用户,把不必要的信息占据重要部分。主要体现在3个方面:

1. 自定义功能或模块的展示位置;

示例:支付宝首页的应用是可以根据自身喜好自定义的,包括定义常用应用、排序、删除、新增等等。这样用户可以根据自己的个人兴趣定制自己适合的应用分布方式,这就叫做用户定制常用功能,如下图:


2. 将“常用”自动归纳以提升使用效率;

示例:微信聊天界面表情弹窗中会有一个「最近使用」的模块,它把个人平时使用频率或者次数最多的表情进行归类。当用户使用的时候,能很快的找到自己喜欢或者常用的表情,提高了聊天效率;包括饿了么的「我的订单」里的每一个订单都可以通过再来一单重新一键下单,如下图:


3. 缩短操作路路径,提升使⽤用效率与体验;

示例:微信的对话框,当点击「+」调出下面的操作选项时,会默认弹出刚截图或拍照的照片,方便用户直接调取,还有APP长按后出来的快捷操作列表,如下图:


·. 易扫原则

直译:美学和简约的设计;页面不应包含不相关或很少需要的信息,页面中的每个额外信息都会降低主要内容的相对可见性。

示例:如下图列表中出现的信息都是用户比较关注的信息,比如配送费,配送时间,距离等;携程的选择机票界面讲最重要的时间和机票价格放大突出,让用户能一眼看到,如图:


 9 ·. 容错原则

直译:帮助用户识别、诊断和从错误中恢复;我们尽量避免用户出现错误,但当出现错误时,我们应该尽量去安抚用户的挫败感。

⽤配图+文字代替「404」,明确告诉用户哪⾥错了和解决方案。

示例:界面加载失败时的刷新提示,还有登录时的手机号码校验,如果手机格式错误会出现会提示用户手机格式不正确和正确的格式。


 10 ·. 人性化帮助

帮助性提示最好的方法是:

1.无需提示:非常简单易懂,用户看界面就知道怎么操作,无需提示;

2.一次性提示:只需要一次提示用户就懂如何使用;

示例:常见的新功能引导、引导⻚等,示例:


3.常驻提示: 较重要的提示,用于指导或帮助用户;

示例:支付宝转账时,常驻在顶部的安全确认提示,还有转账时的服务费提示,如图:


4.帮助文档:稍微复杂一点的软件,虽然要让他尽量简单但帮助文档都是必要的;

示例:微信设置界面里的「帮助与反馈」,还有支付宝转账时弹出来的「求助反馈」,点进去后的常见问题界面;


以上就是我对Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则的理解和实例解读,希望对大家有所帮助。如果大家同样对这些方面有些兴趣或者看了后有些什么想法,欢迎一起讨论。

转自:站酷-搞设计的月野兔



日历

链接

个人资料

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

存档