首页

写出好创意的方法论,都在这了!

周周

运营人的日常工作,是与创意分不开的。无论是写文案还是设计页面,无论是拉新促活,还是管理社群,都需要在以往的基础上进行突破,而这就需要进行头脑风暴了。创意这种捉摸不定的东西,如果没有方法论的支撑,则会浪费时间和精力。接下来,本文作者为我们总结了一套写出好创意的方法论

辞典精译 | 怎么做响应页面?栅格系统来帮忙!

ui设计分享达人

栅格系统知识点 


使用栅格系统很有帮助,它有助于在不同布局之间保持一致性,并加快设计决策的速度。栅格可更地控制不同屏幕尺寸之间的对齐方式及布局。本文重点介绍响应式栅格的重要知识点,以及产品设计师如何在设计工作流中调整栅格。


栅格结构

栅格由3个主要组件构成,包括列、槽和边距。

列是虚构的垂直块,用于对齐内容。我们用百分比(%)或固定值定义列宽。


栅格中的列


它是列与列之间的空间,有助于分隔内容,我们将槽的宽度定义成固定值。


栅格中的槽


边距

边距是内容和屏幕边缘之间的空间。我们将边距宽度定义为固定值,该值决定每个屏幕尺寸的最小空间。弹性边距指的是列,槽和侧边距组成栅格后剩下的空间,它会根据不同的屏幕尺寸而变化。


栅格中的页边距和灵活边距


如何使用栅格设计界面?

信息内容(图像,文本或UI元素)常常会被放置于可见和不可见的内容块中。可见内容块具有明显的边框或填充区,而不可见内容块则不具备,多数是透明底。可见的父级内容块包括卡片,横幅等组件。


卡片形式的可见内容块


不可见的内容块包括文本或功能按钮。


内容块应与列的边缘对齐,避免与槽边缘对齐。内容块中的信息是独立的,不一定非要与列对齐。


内容块的列对齐


列结构

用于构成栅格的列数称为列结构。8、12、16和20是用于响应式布局的一些最常见的列结构,设计师可以根据设计要求选择具体结构。


8/12/16/20列栅格结构


12列结构是最灵活的,它可以进一步分解成为4–4–4或3–3–3–3大小的内容块。


响应点

当屏幕尺寸到达响应点,那么页面布局也会有对应更改,以实现最佳的布局视图。列结构,列宽,槽宽度和边距都取决于响应点。内容块则根据不同的响应点堆叠或缩放,以重新调整获得最佳视图。


栅格缩放和堆叠


如果较小的屏幕具备足够空间来呈现,其实缩小比例就能展示完整了。如果屏幕实在是太小,就会垂直堆叠成一列。


栅格的呈现类型

栅格有3种呈现形式,一起来看下吧!

固定栅格

固定栅格有固定宽度的列以及页面边距,且固定的栅格具有固定的内容块宽度,该宽度在响应点范围内不会出现变化,并且页面边距会占据剩余的空间。


固定宽度栅格


流动或全宽栅格

流动栅格列的宽度是不定的,但槽和页面边距都是固定的。流体栅格具有灵活的内容块宽度,该宽度根据屏幕大小来变化。流体栅格中,列会随着可用空间变大或是缩小。


流动栅格


混合栅格

混合栅格同时具有流动宽度和固定宽度。在现代布局中,一些元素会完全脱离栅格。常见的例子比如页眉,页脚,或是出血的图片内容块。


混合栅格


如果内容块宽度大于可用的屏幕尺寸,则固定栅格会转变为流动栅格来适应屏幕。


如何在原型制作工具中设置栅格系统?

电脑视窗

不要以1440×900、1600×900或1920×1080等高分辨率进行设计。1280×800是电脑端内最小的分辨率,以1280×800设计的流动与固定宽度的布局都可以适应更大的屏幕。


固定宽度栅格设置

要设置固定宽度的栅格,我们对槽和列都应固定好数值。建议设置列宽为74px、槽宽32px以及16px的边距。


固定宽度栅格设置


列宽74px、槽宽32px可以生成1240px的内容块宽度(不包括两端的16px侧边距),最大化的利用了可用屏幕尺寸。在不同的响应点,固定内容宽度大于当前屏幕尺寸时,则固定宽度栅格开始变为流动栅格。


流动栅格设置

要设置流动宽度栅格,对槽使用数值,对列使用自动计算的值(以%为单位)。


流体布局栅格设置


流动栅格利用整个屏幕尺寸作为主要内容的宽度,每侧留出16px的侧边距。


移动视窗

在移动端使用流动栅格,槽和页边距的宽度推荐设置成16px。因为移动设备的屏幕分辨率较小,若再分成12个独立的列、槽和边距的话,设计起来也会很麻烦。


移动端的流动栅格设置


因此,我们将3列中的每列合并以创建4个粗列,从而使布局栅格既简洁又方便,快速对齐。


平板视窗

平板设置栅格的方式与移动设备非常相似,推荐槽宽和边距分别设置为32px与16px,可以在768×1024大小的画板上为平板设计界面。


平板电脑流动栅格设置


将12列优化成6列,让栅格清晰明了,谷歌的材质设计曾建议使用24px宽的槽与页边距,实际应用时,不妨都试下看哪个效果更好。


布局样式

栅格布局的变化决定了主要内容的结构,针对不同的布局要求,使用不同的栅格系统,而页面中的内容块数量决定了页面布局的变化。


单列布局

单列布局或全宽布局,是着陆页和首页的风格之一。还可以合并12列来创建一个单列内容块,也可以将12列分配到父级内容块中。


一级页面常应用单列或全宽栅格布局


双列布局

该布局有两个内容块。通常,其中的一个内容块会占据比较多的区域进行信息展示。



在双列布局中,列要么分布在9–3或8–4父级内容块中,其中的一个组合列区域,用来创建主要内容。带有单个边栏的界面是两列布局的常见呈现形式。


三列布局

三列布局具有三个内容块,主要内容块占据最大的展示区域,在三列布局中,列分布在3–6–3或2–8–2父级内容块中。


固定宽度的侧边栏布局

固定宽度的边栏布局稍有不同。边栏宽度在一组响应点范围内固定,剩余空间由固定宽度或流动宽度的内容块占用。


侧边栏固定布局


移交开发

在原型工具中,设计布局和编码有很大的不同。代码可以合并列或将其堆叠,比如合并12列以创建单个列布局,或将12列分布到一组,用来创建不同布局变化的内容块。在原型设计工具中设计布局时,你需要确保开发人员清楚了解电脑端,移动设备和平板设备上设置的列宽、槽宽及边距。像Bootstrap,Zurb Foundation等开发软件,其中对栅格值的设置会有出入。


自定义栅格


设计师可以多尝试不同的栅格值设置,以找到最适合自己的呈现形式。如果交付开发的时间非常紧急,请使用文中建议的数值,更保险也不会出错。


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

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

通知系统的设计规则 | 深度解析

ui设计分享达人

本篇文章从通知模块的组成部分,到通知模块的设计规则,进行了一个详细的讲解,帮助读者更好理解对于通知的设计。

我们通过门铃声儿得知门外有人来访,也能通过电话铃声得知正被人呼叫。短信通知也有着类似的作用,包括各类产品的消息推送。


但不同的是,消息推送的重要性随着「通知」被滥用而变得不那么重要了。它们变得不像门铃或电话铃声起到的作用性那么大,包括短信现在也大多是垃圾信息。


而且,通知越来越多地通过各种方式去触达用户。比如消息未读的红点提示,或者显示消息的数字统计,以及手机使用过程中的顶部提示与声音或震动的提醒,等等。


但我们还是无法抑制点击图标的冲动,这仅仅是因为它具有未读的计数或红点提示,即使我们已经知道当中的内容并不重要。


而我要说的是,当通知内容变得次要且被滥用之后,它仿佛成了一种违背设计原则的功能 —— 中断用户当前行为。因为它打破了用户与产品之间的层级关系,破局至产品之外来吸引用户的注意力,这是一个非常打扰的行为。如果我在看书,突然收到一条并不重要的消息,那我一定会非常反感。


所以,为了不被「红点」支配,以及不让通知所打扰,我会把手机里所有产品的消息推送都给关了。


但是,以上内容并不能说明通知的无用论。同样有许多用户还是沉迷于通知的使用上,它所控制的是用户对于某个产品的控制欲,担心错过某条消息,就好像我在豆瓣写了篇随笔,就想看别人给我点赞评论的消息,但我又不可能一直盯着,所以通知这时候就起到了一个很好的作用。


以至于对于优秀的产品人或设计师,包括运营来说,利用好通知,就能掌握用户心理,巧妙的将用户留在产品中。它们甚至有助于与打算放弃产品的用户建立联系并促进互动。


那么,我们应该如何更合理的设计通知呢?下面我们通过「通知的组成部分」以及「通知的使用类型与规则」来详细做一次拆解。


通知的组成部分


关于通知的简单定义:它是一种吸引用户注意的功能模式,让用户获悉新事件的信息动态。产品将其发送给用户并与用户产生交流。


因此从这个定义中我们可以知道,通知有两种形式,分别是被动只读型和操作反馈型


被动只读型,是指该信息可读,但不可进行操作;操作反馈型,是指用户可对该通知进行操作,如某宝订单支付成功后的地址信息确认通知。


所以在梳理组件的时候也要注意掉这个差异。


1.消息中心

这里的消息中心,是一个信息汇总中心,但并不一定是信息来源。意思是,信息来源可能是有很多用户在你的文章下面点赞了,而这个点赞行为被汇总到了消息中心,再用消息中心指引作者去到文章页面查看具体详情。


所以它是一个汇总表。但也有可能它就是信息来源点,比如一些系统通知,告知要升级,因为它没有其他功能可承载,所以只会在消息中心里出现。


或者类比 iOS 系统的通知中心,如果通知是 App 推送的,那么它会指引用户进入某个 App;如果通知是系统行为,如勿扰模式,「6:00 前来电和通知将会静音」这个通知,是只可在通知中心进行操作的。想要更改,就需要手动打开设置。


2.通知指示符

它可以是点,也可以是计数器,只要表明目前消息中心有新的信息就可以。我个人一直觉得这就是让我们多数人养成强迫症的罪魁祸首。


3.信息标题

它主要是指该信息来自于谁或属于什么子类型,比如用户互动点赞消息,评论消息,系统消息等等。用户可以通过标题来获悉该信息类型,再通过内容摘要来判断内容是否重要。


当然,这里的摘要如果过长,就需要省略处理,引导用户进入消息源或消息中心。


4.推送时间

推送时间是一个看起来简单,实际上也好像不是很复杂的逻辑。只要说明该通知的发送时间即可,但是需要注意的是时间段问题。比如几分钟前,几小时前,几天前,这里的逻辑是按照时间推进规则持续增加来告知用户该消息的推送时间节点的。也就是过得越久,时间概念就越大。


5.通知图标

上面讲到消息类型,我们也经常会在各类产品中发现不同通知的类型会汇总在各自的类型下。包括用户所接收到的信息,通常也会告知用户该信息属于什么类型。有时候,标题可能会更细,但是用户通过图标可以判断该信息属于什么类型,甚至都不需要仔细查看标题与内容。


但是,并不是所有产品的信息都可以通过图标来判断,有时候图标只是一个大方向,如果手机锁屏,相对于用户来说,这条通知只是告诉用户该信息是由什么产品推送,而并不能指向至该产品的什么类型的信息。所以在使用的过程中,同样需要根据业务的场景,谨慎地选择图标。


6.阅读指示器

它就像是上面提到的红点,这里指的是进入 App 的消息中心之后,所显示的内容。


7.操作行为

这里的操作行为分两种,分别是 App 外与 App 内,它们之间的操作逻辑是不同的。iOS 系统通知的清除操作,只是在系统的通知中心将该信息清除,进入具体 App 后,这条消息还是会存在。而在 App 内删除该条信息,则该信息才会真正消失。


所以从上面可以看到,通知推送,是有两大类别的,分别是 App 外与 App 内,它们之间的逻辑关系与展示形式会有所差异,需要根据具体情况进行设计分析。


8.小结


对上面的内容进行总结,可以得到这样一幅画像:

大部分系统或产品的通知组成,都可以通过此图概括,唯一不同的是,它们会随着不同的业务而发生变化。


比如豆瓣的推送消息告知用户近期有新的电影上映,那么通知来源要么是电影模块的功能详情页,要么是通知中心的系统消息;而通知类型就是内容更新;详情则根据具体内容来组合排列;最后送达至用户。


而其中的差别就是,如果是通知中心推送的,用户点击之后则是进入通知中心列表。如果是具体功能推送的,那么用户点击进入的就是具体功能页面。如下图所示:

从这里可以看出,通知是有具体模式的。


一旦确定了通知的主要目标,以及想要解决的问题,包括它们如何对业务产生作用以及对用户形成吸引力,就可以确定通知的具体样式了。


在这一节里只要知道通知的组成部分与通知模式如何指引用户进入 App 即可。后面我来带大家理一遍逻辑,以及在设计通知时要注意哪些问题。


通知的使用方法


聊完上面的内容之后,我相信大家对通知的组成与使用模式已经有了全新的认识,但也仅此而已,我们还是不知道一个优秀的通知功能应该从哪些方面去提升用户体验。这里面所包含的不止是表象,还有内在的规则逻辑。所以从这一节开始,我们仔细来梳理一遍。


从我们平时使用到的,以及上文提到的,可以大概先梳理出几类常见的通知类型。


1.用户信息类通知


这种类型的通知有很多,比如微信消息发送,知乎私信,手机短信等等,它们主要由用户主动生成发送至其他用户被动接收,作用就是促进用户与用户之间的互动关系,以提升用户使用产品的频率与时长。


这种通知,可给予用户操作也可不给予操作,不操作就是读取,并回复;操作就是可对该用户的信息进行屏蔽、已读、删除等设置。


这是最常见的通知类型,在多数社交产品与有社交特性的产品里都能看到。


说明


之所以给予用户信息的操作行为,是因为用户信息可分为感兴趣的与不感兴趣的,它主要取决于人。不感兴趣的人,频繁的发送信息,会影响用户对产品的好感度,毕竟有很多用户消息并不是用户想要接收的,所以在社交产品里,用户可删除好友,或拉黑好友;在有社交属性的产品里,用户可拉黑账户,以达到不被骚扰的诉求。

如果没有到达删除好友的程度,也可对该好友的信息进行屏蔽,甚至对该好友信息做已读而实际上未读的处理;或者对重要信息做未读而实际上已读的处理。


当然,用户还能对群消息做更复杂的设置。这就是产品对这类通知的一种优化方式。


2.系统推送类通知


我们经常会在手机上收到一种系统类通知,或者在 App 中也会收到类似的系统通知。大多是关于系统升级,密码更新等。


这类通知多数是用户被动接收,且对于系统与用户来说是较为重要的。当然也有不重要的,比如 App 更新说明的通知,告知用户新功能有什么变化,或系统更新了什么等等。


对于这类通知,用户大多无法进行设置,因为它们比较强制,没有可以商量的余地,类似于告知用户:我们有新的消息,比较重要,你来看看,即使你不打算更新或执行也来看下。


说明


系统类通知,通常来说较为被动,要么强制用户执行操作,要么就是提醒用户系统近期做了更新,或者是一些并不重要的信息提示,比如勿扰模式。


强制类系统通知不能频繁,否则会给用户造成控制欲反制的副作用。类似于本身用户使用产品需要对产品享有控制权,现在反而被产品控制了。这是不行的。


3.通用推送类通知


这类通知就是第一节中提到的那些,比如点赞/评论,内容更新等等,这类通知如果是忠实用户,那么或许不会反感它的频率,当然还是需要适当。但如果是普通用户,那么造成的影响就是直接关闭该 App 的所有通知。


我们现在的很多人,之所以开始反感通知的主要原因,就是这类通知所造成的。内容不断更新,随着时间的推移,每天推送多条对于该用户来说无用的通知。包括只适合一些符合条件的用户参与的活动通知也推送给所有人,那么用户就会逐渐对这类产品的通知失去兴趣,造成无法弥补的损失。


即便像某团一样,经常弹出开启通知的弹框,也依然无法召唤回用户。这就是很典型的下场。


说明


通用型通知,如果是业务很复杂的产品,就必须建立通知推送的功能模块,给予用户进行选择接受哪类信息的权力。允许用户进行相应的设置,如活动类推送可拒绝接收。


在很多产品中都已经置入这样的推送模块设置,如下图。

这类内容就是针对于产品的具体业务进行细分。


比如兴趣精选,私信消息等做好类别划分。用户可对自己感兴趣的通知做选择性的推送接收。


另外就是,在相同账户的不同设备之间,推送应该同步推送与被处理。不能这边推送了,那边没推送,或者这边处理了,那边没被处理。


4.智能推送类通知


不知道大家是否有印象,在使用如大众点评等产品时,只要你切换了城市,产品就会推送通知告知用户该城市有哪些值得游玩的景点与品尝的美食。


虽然这类通知还算不上多少智能,但至少在用户群体中是存在这类诉求的。而这类诉求有时候并不能主动感知,因为用户可能会想不起来通过哪类产品来查找附近美食。当这么一条通知出现的时候,正好解决了用户的问题,反而提升了用户对于产品的好感度。


现在很多产品的通知都逐渐智能化,不会像以前那样,三更半夜发来一条无关紧要的通知。而出现这类问题的主要原因还是在于产品、设计、运营,在这方面没有下过功夫,只将通知作为一种普通的工具来使用。导致用户开始排斥通知,将其强制关闭。之后,就很难再让用户开启了。同理心效应,当做这类功能的时候,可以回想一下自己是如何被其他产品打扰的。


随着大数据的发展,我相信未来的通知系统会更加全面,且能做到千人千面的模式,不过在此之前,各位产品设计师,还需要对通知下一番功夫才是。


5.小结


我们还可以继续举例说明,但是基本大同小异,所以到这里为止,我再对上面的内容做一次总结,梳理出一个好的通知应该是如何设计的。


干扰最小化:通知本身具有强制性和干扰性。它的目的是把用户的注意力吸引到产品上来,所以要认真思考发送通知的内容、时间、频率;不要提醒用户当前屏幕上已经处于展示状态的内容;也不要推送与用户无关的系统信息。


跨设备:当用户读过了某条信息,这条信息应该不再做展示。同理,用户也应该能够在其它更适合接收消息的设备上找到已读信息。用户通知应该在所有设备上进行同步。


允许设置:允许用户在「设置」中禁止或调整通知的形式。如案例一,通过选择推送内容,来影响接收推送的频率。案例二,可选消息提醒的形式是红点+数字,或仅是红点。

时效性:良好的通知应尽可能实时推送。而不是等这件事情都过去很久了,才推送给用户知道。


支持汇总:把同类型的通知合并为一条,并显示信息未读数量。也可以考虑一键展开通知,显示信息详情。


可操作性:把通知和操作结合在一起,让用户不需要打开首页就能对特定通知进行常规操作。操作应该清晰明了,且仅在未重复默认操作时提供。同时操作应该是有意义、实时、和内容对应的,并且能让用户完成某个任务。如案例一,可以在不打开邮件的情况下,直接对通知进行管理、查看和清除。案例二中的操作针对的是未读邮件,可便捷地在通知板面进行回复、删除、标为已读或垃圾邮件。

小结


对本篇文章的拓展总结:

1.通知具有召唤属性,但是频率过多就会变成打扰,所以要注意通知的频率与内容重要性;

2.设计师或产品经理应该将通知的内容分类梳理出来,以便维护或新增必要需求可能需要用到的推送信息。

3.通知一般为两种类型,一类是推送只读型,一类是操作反馈型;设计师需根据不同类型的通知做好对应的设计,针对具体问题具体分析;

4.想要利用好「通知」,也需要对业务有详细的了解,再代入本文所列举的注意点,就可以设计出一个体验更佳的通知模式。


通知规则不会脱离本篇文章的范围,所以只要详细研读,必会有所收获。


转自:站酷-呆总丶

ui组件系列之文本框和表单设计

ui设计分享达人

当你在设计表单时,是否对文本框和表单的规则有疑惑?本文的一些简单的规则将帮助你完成设计用户希望完成的表单。

上图是表单的发展历程,由石刻上的表单到纸质表单再到电脑上输入的表单。印刷式的表单已存在多年,我们可以从其设计中学到一些技巧。


一、文本框剖析

文本框允许用户在界面中输入文本。它们通常显示在表单和对话框中。文本字段组件设计应为交互提供明确的可见性,使字段在布局中好发现,填充且容易理解。



这些是基本文本字段的重要元素:


1.容器-可交互输入文本的区域

2.输入文本-输入文本字段

3.标签文本(标题)-告诉用户给定表单字段中属于什么信息

4.占位符文本-是所需信息的描述或示例,在用户输入文本后会被替换

5.帮助提示或验证文本(可选) -提供其他上下文或验证消息

6.头部图标(可选) -描述文本字段所需的输入类型

7.尾部图标(可选) —对输入的文本的附加控制,例如清除,隐藏/显示等


二、文本框类型

它们大多数基于基本文本框,为了更好地展示特定类型的信息而做的演变,例如输入信用卡号的文本框。以下是我们创建的整个UI中最常用的输入类型的一些示例:

三、使用恰当的输入框类型来收集数据

为收集的数据提供正确的文本框类型,将帮助用户以正确的格式输入信息,并避免错误,从而使填写过程尽可能简单。

四、文本框需要根据状态和用户的交互来及时变化外观

可以通过提供视觉上的变化来传达文本框的状态。输入文本字段可以具有以下状态之一:未激活,悬停,激活,禁用,校验,报错。大家在做表单设计时最好的做法就是遵循这些状态的变化,不要挑战已经形成的用户思维模型。

五、选择最佳的文本框样式

通常,文本框的标题有三种常用的位置可选择:顶部,左侧对齐和右侧对齐。采用哪种样式将取决于表单的主要目标和表单的大小,组件库以及要设计的平台。它们各自具有一些优点和缺点。

我已经根据大型设计研究的研究结果进行了汇总,最开始的Material design指南中流行的下划线输入并不是最佳选择。有趣的是,同一项研究表明,用户更喜欢带有圆角的输入。

(1)标题左对齐

当用户不熟悉所要填写的内容时,这是一个不错的选择


优点:标题易于拓展;充分利用垂直空间

缺点:标题和相应的输入内容之间的距离过长,而且不一致的距离会增加文本输入的完成时间

(2)标题右对齐

与左对齐的标题相比,完成时间快将近两倍


优点:文本的标题和输入内容的位置更紧密,减少了了眼睛的运动次数,从而缩短了完成时间

缺点:难以快速扫描表单并了解所需的所有信息

(3)标题顶对齐

这是在大多数情况下最快的时间和最全面的选择。在移动端上效果很好,因为它们不需要很多水平空间。


优点:能够让用户单一眼球移动即可了解输入标题和输入文本,能够更快的完成

缺点:需要更多垂直空间

六、文本框的长度应与预期的用户输入内容长度成比例

为表单中的所有文本框都使用相同的输入长度会使它们在视觉展现上令人愉悦,但是却很难完成填写。

七、占位符文字不能替代标题

输入信息后文本框内占位文本的消失,会对用户的短期记忆产生压力。没有标题,用户将无法在提交表单之前检查他们提供的所有信息。如果您需要极简的表单设计,则可以使用“Material design”浮动标题的方法。
表单内的占位符文本有时会使用户感到困惑,最好在字段外使用提示文本。


八、帮助用户填写表单

  • 使用自动完成功能帮助解决部分查询功能,在用户的输入框中,用户可以按Enter或“右箭头键”使用它。

    使用自动联想值搜索相关的关键字和建议使用的内容列表。列表以下拉弹层形式显示多个建议列表。

    预填充字段并使用智能默认值。通常,您可以通过IP或地理位置轻松检测用户所在的国家和城市。根据最常见的方案进行分析,我们一般可以定义默认情况下应选择的内容。

    提供上下文信息。为了用户做出正确的决定或避免错误,用户在进行转帐时将需要一些其他信息,例如帐户余额,如果能够从上下文中获取这些信息,就请及时给出。

    九、使用实时校验

   “实时校验”是在用户浏览表单时实时检查用户输入的有效性,而不是在用户提交表单时一次性检查全部输入:

  • 验证消息显示在靠近输入的区域,并一起显示

  • 不要太过于激进的方式提示错误消息,应该告诉用户如何解决问题,而不是责怪他们

  • 当字段在用户完成输入之前就被标记为无效时,请避免“提前验证”

  • 考虑使用“正向校验”,可以增加一种愉悦感和成就感

十、让表单看起来更简洁

(1)减少字段数

   它将消除视觉和认知负担,并且看起来更简单。

  • 不要将全名和日期之类的文本分成多个字段

  • 不要多次询问相同的信息

  • 使用标签和提示复制以尽可能地缩短它

(2)隐藏不相关的字段

  我们仅展示基本要点,通过逐步显示信息的方式来帮助用户管理信息的复杂性,在用户需要的时候再展示出来。比如加个开关按钮把不重要的信息隐藏。

(3)使用条件逻辑

使用条件逻辑能够根据用户的答案,自动显示或隐藏某些字段,并可以在表单中t跳过页面。这种方法不仅可以减少字段数,而且可以使填写过程更具个性化和对话性。



(4)相关字段打组

简化复杂表单的最简单方法之一就是开始对相关字段进行分组。格式塔心理学中有多种分组原则,可以使项目感觉相关:接近度,相似度,连续性,闭合性和连通性。将数十个非结构化字段分组为几个可管理的集合将显着提高表单的可用性。

(5)将复杂的表单分为几个简单的步骤

有时即使删除了所有不必要的内容,某些表单也会很庞大。将大型任务分解为一系列较小的任务看起来容易得多,并促使用户将填写过程进行到最后。

  • 显示步骤条,以视觉方式传达用户的进度,这可以提高满意度并激发用户继续填写的动力

  • 不要过于细化表单,太多的步骤将无济于事,只会惹恼用户

  • 对关键信息进行汇总以减轻用户的焦虑,最后需要进行复查

(6)避免使用多个列布局

一列布局为用户创建了一条清晰的完成路径。使用多列表单布局的后果包括:用户跳过他们实际要输入数据的字段;将数据输入到错误的字段中;或者只是想暂停一下而可能导致放弃。


十一、让用户沉浸在表单填写,尽量少的显示表单外的功能

如果表单足够大,可以分成多个步骤,则应该为它分配一个单独的,清晰明确的空间。显示常规导航或任何会破坏表单填写过程的链接/按钮,只会造成混乱。我也建议不要在小型弹出窗口中使用多步骤表单。

十二、显示恰当的键盘类型

Android或iOS提供了几种不同的键盘类型,每种类型的键盘都旨在促进不同类型的输入。为了简化数据输入,在编辑文本字段时显示的键盘应适合该字段中的内容类型。注意键盘将出现的位置。为了避免不必要的页面滚动,请将文本字段放在上方区域。


十三、停止荒谬的密码创建设计

  • 允许用户取消隐藏密码,而不是要求他们输入两次密码,这对于生成密码的应用程序也将更有效

  • 始终显示密码要求,并显示用户在满足填写条件方面的进度。尝试简化对用户的要求

  • 使用强度计量条以鼓励用户创建更强的密码


    文章来源:站酷     作者:ZZiUP

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


轻量化设计总结

ui设计分享达人

「轻量化」是近两年来设计圈一个比较火的话题,什么是轻量化?从字面意思上来看「轻量」的反义词就是臃肿、拖沓,反映到产品设计中就是界面内容过载,操作步骤繁琐。如果非要用一个字来定义,那就是“多”,内容多,步骤多。


我们需要清楚,“多”来自于用户的主观感受,我们无法给出一个具体的数据指标来判定到底是不是“多”。用户会在什么时候觉得多呢?日常生活经验告诉我,当对方觉得你没用的时候,你就会显得多余。如果这个界面中的每一个功能对于用户来说都是高频操作,那么用户是不会嫌多的。所以「轻量化设计」的主要思路可以归纳为:在用户不需要你的时候不要出来瞎得瑟。


场景


问题来了:用户什么时候需要我?首先我们应该从功能层面入手,因为产品是一个个功能的组合体。页面内容臃肿问题的源头是功能过载,在这个问题上,很多设计师吐槽自己扮演的是一个背锅侠的角色。其实我也不想在这个页面里塞这么多东西,但是这些功能我们必须展示给用户啊,要不然用户都不知道还有这个功能。


要解决这个问题,我们需要引入「场景」的概念。什么是场景?我们可以将场景理解为「外部环境」。


外部环境影响用户的感知,感知决定了用户的行为。只有身处于特定的场景,用户的行为才会被触发。在有网场景下,用户启动网易云音乐,进入的是首页。在无网场景下,用户进入的是我的音乐。因为有网,用户“听新歌”行为的可能性更大,无网听已经下载好的歌曲。


功能也是一样,用户需要这个功能,但并不是每一个场景都需要这个功能。有些比较冷门的功能,用户只有在特定的场景才会想起使用,那么我们就可以只在那个特定的场景中展示该功能。


我们看一下两款竞品的歌曲播放界面,我们可以很明显的发现,酷我音乐的界面更加简洁明了。当然你可能会说,那是因为酷狗音乐给用户提供了更多的功能。

undefined

其实并没有,两款产品提供的功能都是一样多的。只是酷我音乐做了场景化区分,以K歌功能为例,酷我音乐的处理方案是:当用户点击查看歌词的时候才会展示“K歌”的话筒图标,因为当用户查看歌词的时候,提醒引导用户去K歌更加合适。


undefined

这个方案的确可以简化界面元素,但是也带来了另一个问题:如果用户不查看歌词,那就不知道原来还有k歌功能,无法给K歌功能做到有效的引流。的确如此,没有一个完美的设计方案,任何一个设计方案都无法做到可以兼顾各方的利益。设计师的作用就是尽可能去发现和解决界面中最主要的矛盾点,而不是所有的矛盾点。


我们再来看一个歌曲播放界面的例子,现在很多产品都提供了AI电台功能,所谓AI电台就是根据你的听歌记录,分析你的喜爱,据此来给播放你可能感兴趣的歌曲。我们之前听歌需要手动搜索相关信息,在搜索结果(歌曲、专辑、歌单等)里查找。AI电台的出现大大节省了用户的操作步骤,那么我们来思考一个问题:与常规的场景相比,在AI电台里播放的歌曲,界面上我们应该做哪些改动?


undefined

AI电台模式最大的区别就是随机性。因为这歌是根据你的喜好随机推荐的,你不知道会听到这首歌,也不知道这首歌后面有哪些歌。这个就导致了播放模式这个功能很鸡肋,虾米音乐的AI电台就没有提供切换播放模式功能。


1 列表循环 :我都不知道列表里有哪些歌曲,怎么循环?


2 随机播放 :现在不就是随机播放吗?


3 单曲循环:这是唯一一个用户有需求的场景;


其实AI电台推荐的歌曲也是有歌单的,用户点击播放列表图标就可以看到。这里提供了切换歌曲模式的功能,让用户看到了播放列表才可以选择歌曲模式。


undefined


入口


当我们确定了功能的最适用场景,我们接下来的任务就是如何合理的设计功能的入口。


1)入口分类


不同的层级的功能,在界面中的展示方式是不一样的。这里我们可以分为三类:常态类、更多类和隐藏类。


比较重要的功能一般都在界面中有常态的入口,而优先级比较低的功能,我们会选择使用临时视图来承载,入口放到“更多”类按钮里,用户需要点击才能查看。


undefined

优先级的功能在界面中没有实体的入口,需要用户的手势来触发。例如,在抖音中,用户长按视频可以唤起三个功能:保存、收藏不敢兴趣。这三个功能抖音做的如此隐蔽,就是希望用户不去使用。


undefined

1 保存:为什么保存到手机看?来抖音看吧


2 收藏:既然喜欢这个视频,为什么只收藏不转发一下,让更多人看到


3 不感兴趣:emmmm


2)入口分类


哪怕是同一个功能,位于不同的场景,我们也要对入口样式做出调整。例如,在音频类产品中,为了方便用户在不同的场景都可以快速的进入播放界面,会在界面底部加上播放条。


undefined

但是我们也可以发现上图中企鹅FM播放条的空间利用率很低,有大面积的留白。那么到了二级页面,我们可以尝试修改播放条的样式,减少对界面内容的遮挡。


undefined

类似的处理方式还有淘宝,当用户在首页下滑一屏左右,那么底部栏原首页图标变成了火箭,用户点击火箭可以直接返回至顶部,不用额外新增一个浮动按钮作为入口。


undefined


总结


以上就是我个人对于「轻量化」设计的简单思考和总结,如果您有不同的意见或者看法,欢迎留言或者加群讨论。

转自-站酷

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

不要让我思考: 20 句可用性设计名言

周周

编辑导读:想要做好一个设计师,就要多研究优秀人士的作品,取长补短。现在互联网的发达,很容易就能在网上找到相关的学习资料。本文以史蒂夫·克鲁格的名著作为引入,分享20句关于界面可用性设计的名言,希望对你有帮助。

设计,以及许多其他领域,都是建立在优秀专业人士的作品和发现之上的,每个想要成为某个领域专家的人经常寻求指导来学习如何把事情做好。专业导师的各种书籍和文章现在都可以在互联网上免费阅读,让努力学习知识的人很方便的找到。

我们经常会分享来自数字设计领域最优秀专家的名言和睿智的想法。你会在迈克·蒙泰罗(Mike Monteiro)所著《设计是一项工作(Design Is a Job)》里找到有关设计的短暂洞察,奥伦·沃特尔(Aarron Walter)的《为情感而设计》(Design for Emotion)以及排版大师埃里克·斯皮克尔曼(Erik Spiekermann)的一系列智慧思想也是如此。

下面我们要分享的是史蒂夫·克鲁格(Steve Krug)的名著《不要让我思考(Don’t Make Me Think)》中的一组引言。

2000 年初版,14 年后再版,《Don’t Make Me Think》在今天仍然切合时代发展,符合实际需要。史蒂夫·克鲁格为界面可用性设定了一些基本原则,并与该领域的专业人士分享,这使得本书成为 UX 设计师推荐的最重要的资源之一。

可用性第一定律——“不要让我思考”描述了关于网站可用性的要点、案例和见解。创造不需要用户过多思考的界面设计,不仅可以解决问题,而且易于使用。这里有 20 句名言,反映了“不要让我思考”的一些关键点。

1、如果某件事需要大量的时间投入——或者看起来会这样——它就不太可能被使用。

2、让每一页或每一个屏幕都不言自明,就像商店里都有良好的照明:它会让所有的商品看起来更好。访问一个不需要我们思考的网站会让人感觉毫不费劲,相反,为不相关的事情多花心思会浪费我们的精力、热情、还有时间。

3、无用的客套话(“happy talk”)都是一种沾沾自喜的宣传,你可以在蹩脚的小册子里找到。与好的宣传文案不同的是,它没有传达任何有用的信息,它一个劲的说我们有多棒,而不是描述是什么让我们这样棒的。指示说明必须被消灭。

4、可访问性(Accessibility)非常重要,它不仅仅是正确的做法,而且是非常正确的做法。关于无障碍访问,如果没有引起足够的重视,你就无法意识到,它能显著的改善一些人的生活。仅仅通过把工作做得更好就能显著改善人们的生活,这难道还不够厉害吗?

5、另一个让人困惑的来源是那些看起来不太明显的链接或者按钮。作为一个用户,我永远不应该花哪怕一毫秒的时间来考虑这些东西是否可以点击。

6、最近几年里,让产品更加易用成为几乎所有人的责任。现在,视觉设计人员和开发人员常常要做交互设计(决定用户单击、按下或滑动时下一步会发生什么)和信息体系结构(确定应该如何组织所有内容)之类的事情。

7、可用性(Usability)就是确保让一个能力和经验一般(甚至低于平均水平)的人,能够想出如何使用并完成任务,而不必费事。相信我:事情就是这么简单。

8、可用性是有关人们如何理解和使用事物,而与技术无关。

9、关于指示说明,你只需要知道一点就够了:除非“蒙混过关”多次尝试失败,没有人会去读它们。

10、你越仔细观察用户,并倾听他们明确表达他们的意图、动机和思考过程,你就越会意识到,他们对网页的个人反应是基于许多变量的。试图用一维的“喜欢”或”不喜欢”来描述用户是徒劳的,而且会适得其反。另一方面,好的设计会考虑到这种复杂性。

11、那些设计网站的人并不在乎让事情变的明显和容易,这会削弱我们对网站及其背后公司组织的信心。

12、然而在现实中,大多数时候我们不会选择最佳选项,而是选择了遇到的第一个合理的选项,即所谓的“满意”(satisficing)策略。

13、大部分的网页设计问题(至少是对重要的那些问题来说)都没有一个简单的“正确”答案。有效的答案是那些运作良好的、满足需求的综合设计,它们往往经过了仔细思考,良好的执行和测试。

14、删掉每页上一半的文字,然后把剩下的再删掉一半。

15、设计师喜欢微妙的线索,因为微妙是复杂设计的特征之一。但网络用户通常都很匆忙,经常会错过这些线索。

16、如果你在设计了很多不同的网站之后只发现一件事,那应该是:几乎所有的设计理念——无论一开始多么糟糕——都可以通过足够的努力,在合适的环境下变得可用。

17、你的主要职责应该是分享你所知道的,而不是告诉人们应该怎么做。

18、你的目标应该是完全删除说明文字,让每项内容不言自明,或者尽可能做到这一点。当说明文字绝对必要时,把它们减少到最少。

19、和遵循惯例去设计相比,设计师们面临很大的诱惑去重新发明轮子。很大程度上是因为他们觉得自己被雇来是要做一些新的、不同的事情,而不是做原有的旧事情。更不用说,来自同事的赞扬、奖励和高级职位很少是基于“最好地利用惯例”这样的标准。虽然少数时候,在重新发明轮子上花的时间足以制造出新的革命性滚动设备,但通常情况下,这只是浪费时间而已。

20、如果你想要一个很棒的网站,一定要测试。因为你在这个网站上工作了好几周,已经失去了新鲜感。你了解的太多了。要想知道它是否真的有效,唯一的方法就是测试它。

 

文章来源:人人都是产品经理           作者:Alina Arhipova


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

如何产出一个对实际落地更有指导性的的设计分析

资深UI设计者

设计分析是作为交互设计师必备的一项基础能力,一套有效的分析思路可以帮助我们找准设计发力点,更效率的推导出合理的设计方案,它是一种思维能力,也是一种方法工具,但是在我们的实际项目中,常常会遇到这样几种场景:

  • 新手设计师或者第一次做活动的设计师,设计分析不知道要如何入手

  • 花了很多时间做分析,但感觉对实际画稿子并没有什么帮助

  • 分析过程中发散了很多很好的点,但最后大多都落不了地

这些情况常常会导致设计分析流于形式,套用了很多方法、花了很多时间、输出了很长的文档,内容看上去似乎很丰富,但落地的方案却平平无奇,甚至也会自我怀疑设计分析真的有用吗?

总结下来,会出现这些场景的原因有两点:首先是设计分析太泛,没有聚焦到核心问题;其次是时间分配不合理,没有抓到发力重点。那么结合我们目前的项目来看,怎样做一个更有用的设计分析呢?

活动中常见的项目类型

根据活动产品化设计思路,可以把我们的日常项目分为两类:迭代型项目以及探索型项目。

迭代型项目是指过往已有过积累的成熟项目,例如大促主会场、我的专属会场、榜单会场、攻略等等,通常是一些已经比较固化的经典业务,或基础的功能类业务;探索型项目则是一些全新的业务方向,例如下沉会场、直播会场等等,刚处于进入期或成长初期。

undefined

如何完成一个有效的设计分析

1. 迭代型项目

迭代型项目容易陷入的一个误区是时间分配不合理,没有抓到发力重点,尤其是对于很多新手设计师来说,往往大部分的精力花在重复之前已经做过的内容,比如花了很多时间重新去分析用户、分析方向、分析行业趋势等等,但是对于已经比较稳定的迭代型项目来说,这部分背景内容相对来说已经比较固化(除非有明显的变化),这就可能会导致重复分析出来的结论跟之前的差别并不大,也很难带来实际业务提升。

undefined

既然迭代型项目过往已有过经验和策略的沉淀,也经历过多轮的数据迭代,核心思路应该是先定义要解决什么问题、然后才是如何解决,这样才能找准关键发力点。

要解决什么问题

首先要思考是不是真的有问题,没有问题的项目也可以不用再花时间做分析,效率做即可,例如像全部会场,本身的业务模式就比较简单,过往的效果也相对比较稳定,如果不考虑进行突破性的创新,通常是可以效率复用的,这种时候则不需要再去做分析,毕竟也要考虑投入产出比。

那么怎么定义要解决什么问题呢?有三个常用的思路:看数据、看用户反馈、看运营策略。

第一,从数据分析中找到关键问题,例如根据618的项目数据复盘,我们发现预售会场、品牌会场的页面跳失率较高,那么双11核心可以围绕“如何降低跌失率?”“如何提升流量利益效率?”去进行分析,从而推导出更有针对性的设计策略。

undefined

第二,根据用户反馈来找到关建问题,例如过往的主会场,用户调研一直都会反馈主推楼层太长而找不到感兴趣的内容,那么可以围绕“如何更好的进行需求匹配?”“如何提升屏效?”来思考和分析,解决实际存在的问题,才更有可能提升体验和数据。

undefined

第三,结合运营策略,很多业务虽然已经相对稳定,但随着每次大促战略的变化,运营策略上也会有一些新的需求,那么就根据这些差异化的诉求去找到发力点。例如针对我的专属会场,在原会场定位不变的情况下,在近两次大促中运营侧都提出需要由这个会场来承载平台服务内容曝光的诉求,那么服务内容如何匹配“专属”会场的用户心智,则是这个会场可以重点解决的问题。

undefined

如何判断真正有效的解决方案

在定义清楚核心要解决的问题后,就可以按照常用的设计方法进行方案的推导,在发散解决方案的过程中,如何判断方案的合理有效,确保最后的可落地性,是让我们设计分析有价值的关键,因此总结了两个常用的技巧。

首先要理解业务逻辑,减少无用的策略发散,很多时候我们的方案很难推动落地的原因,是没有考虑到业务的诉求,越能够深入的了解业务,才能更好的解决业务侧的顾虑,保证方案的可落地性。

其次是要跳出来从整体来看优先级,我们在进入自己的思维逻辑中时,会比较容易陷入细节,有时候自己觉得很棒的想法花很大力气去推却很难获得其他人的重视,并不是因为我们的方案不够好,而是没有关注到整体优先级,因此要学会看全局,通过多沟通多评估的方式来让自己的判断更加准确。

2. 探索型项目

探索型的项目没有过往的参考依据,相当于需要从零开始去探索如何做,对于设计分析的能力要求会更高,那么常常容易陷入两种极端相反的误区,要不就是容易被方法论套路,设计分析过泛但得不出实际有价值的结论,要不就是完全没有头绪,属于想一步做一步的类型,分析的内容之间缺乏逻辑。

undefined

因此,探索型项目的核心思路是要先有分析框架、再做纵向深挖,就像画交互稿的过程一样,需要先定义交互框架,纵再进行交互细节的打磨,才能够保证设计效率及效果。

确定分析框架

确定分析框架的过程主要分为两步,一是先想清楚要分析哪些内容,包括哪些环节是必要的,哪些是重点的,时间要怎么分配。例如当我们第一次做宠物品类活动时,需要对这个品类有深入的理解,因此我们在前期需要去分析养宠人群的特征、宠物行业的发展现状、京东宠物货品的优势等内容,而如果我们做的是一次大促的综合会场,其主要用户群体如果跟常规站内主流群体并无差异时,则不需要再花费大量的时间单独去分析用户画像,因此,需要结合项目情况先想清楚需要分析的内容、以及这些内容的必要性和优先级。

undefined

第二步是梳理清楚内容之间的逻辑关系,常见的逻辑结构有两种,一是递进式的推导(A→B→C),分析维度之间是先后关联的,通过严谨的逻辑步步推导而来,例如先梳理用户画像、才能进行用户行为痛点的分析、进而推导解决方案;另一种逻辑结构是进行综合归纳(A+B→C),即通过几个不同的维度综合推导,例如经典的五导家分析方法,结合用户目标以及业务目标综合推导出设计目标。

undefined

在很多设计分析中,我们也会参考一些方法论,其实方法论提供的就是分析框架,在理解了这一步之后,相信也能更灵活的应用。以下是根据我们日常项目梳理的一些常用分析框架。

undefined

纵向深挖如何得到有价值的策略

有了分析框架后,接下来就可以进入每个模块的具体分析了,如果要得到有价值的策略,同样有两个小技巧。

首先,策略要足够具体、有差异化,尽量避免提出过于笼统的结论。例如针对如何提升流量利用率比较泛的策略就是要进行流量精细化运营,这个大的方向没有错,但如果只到这一步是很难指导具体内容落地的,所以需要细化到流量的渠道有哪些、这些渠道有什么样的特征、针对不同的渠道用户可以用怎样的内容吸引他们,才能够更准确的判断是否会存什么问题。

其次,策略最好能够关联验证指标,可以参考UGD数据增长思路,在推导策略时要能预判它能带来哪些数据指标的提升,以保证设计分析的结论是有理有据的。


文章来源:站酷    作者:大葱设计


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

设计师如何构建认知体系

资深UI设计者

文章来源:站酷    作者:兔子大吉


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

地图基础知识及通用设计原则

资深UI设计者

Part 1. 地图的发展

地图作为记录地形传递路线信息的载体,在人类文明中一直扮演着重要的角色。其承载形式一直紧跟着时代技术的发展而变化,从石板、动物皮革,到丝绸、纸张。当互联网走进千家万户,地图也步入电子化时代。

相较于纸质地图,电子地图优势显著:更新速度快、获取信息效率高、更清晰、可交互等。电子地图(后文简称地图)的出现也影响着人们的出行方式,尤其当智能手机普及,我们可以随时查询地点、发起导航,再也不需要提前记下高速出口和转向路口了。

Part 2. 地图在滴滴的重要性

滴滴拥有网约车、代驾、骑行、公交、自驾导航等众多业务,是一站式出行平台。而地图作为承载出行服务的重要载体,横向支撑着各业务线的发展。以网约车业务为例,调研结果显示绝大部分乘客都会关注并使用地图。

随着各业务线对体验的要求不断提升,单一的地图模式已经不能满足业务诉求及用户需求,需要进一步细分场景、精细刻画地图样式,于是地图的设计也变得愈发重要。

滴滴出品!地图基础知识及通用设计原则

Part 3. 解构地图

地图承载的信息种类复杂、数量巨大,初期可能会找不到设计切入点。我们可以先了解下它的定义和实现方式,或许就能从中找到答案。

定义:地图是依据一定的数学法则,采用地图语言,经过制图综合来表示地球表面的图形。

实现流程:

  • 采集真实世界的地点信息,经过编译转化成数据
  • 数据信息中包含了地点的坐标、分类、名称等
  • 数据经过渲染形成可视化雏形地图
  • 雏形地图经过设计最终变成策略完整、视觉美观的电子地图。

滴滴出品!地图基础知识及通用设计原则

结合“从雏形到完整地图”这一步流程的实现方式,进而可将地图拆分为基础层、策略层和感官层。帮助各职能角色找到对应切入点。

  • 基础层,指的是地图的数据和能力。数据大家已经有所了解了,能力指的是引擎渲染能力、定位能力、图像识别能力等。有了数据及各类能力作为基础,才能设计出信息精准、交互明确的地图。
  • 策略层,则指的是如何使用这些基础数据和能力。地图数据量非常庞大,无法全部展示,需要结合不同的场景及用户需求,有重点的呈现。
  • 感官层,便是我们给数据穿上的衣服,会根据品牌调性、对应场景诉求等去设计最终的配色、图标等。

滴滴出品!地图基础知识及通用设计原则

解构地图后,我们不难看出,感官层是设计侧需要关注的重点层级。

Part 4. 地图设计原则

1. 元素分类

面对如此复杂的地图信息,为了梳理出清晰的思路,我们会对地图元素进行分类:根据数据的类别和呈现状态,可拆分为点、线、面三类元素。

  • 点元素:地名、POI*等。数量庞大,是城市规模的体现,尤其POI信息,它是地图中颗粒度最细的位置信息。
  • 线元素:道路、地铁线、水系线、铁路线、航线、边界线等。线元素呈现了道路的走向、区域的划分等,描绘出了城市的样貌。
  • 面元素:陆地、草地、湖泊海洋、AOI*。面元素以色块形式出现,很大程度上决定了一张地图的色调。

名词解释:POI, Point of Information的缩写,即“信息点”。一个POI可以是一栋房子、一个商铺。

名词解释:AOI, Area of Interest的缩写,即“信息面”。指的是区域状的地理实体,如医院、小区等。

滴滴出品!地图基础知识及通用设计原则

2. 核心设计原则

从定义可以看出,地图是一种特殊的图形语言,是以上所有元素的集合体。相比我们所了解的UI设计、运营设计,地图有属于自己的设计原则。以下为大家总结了一些核心的原则:

符合制图学和公众认知

地图发展到现在已经成为了一门学科,我们会发现即使语言不通,拿到一张地图时也能看懂,这是因为有制图学和公众认知在规范着地图设计。如地图默认北向上、草地水系基本遵循物理世界的颜色、省界线是实线、停车场图标大多用P来代表等等。符合制图学和公众认知,大大降低了用户的学习成本和记忆负担,使地图可以作为一种世界通用语言流通起来。

保证识别度

地图属于信息类工具,其上出现的元素均需清晰可识别,保证可读性是最基本的设计原则。所以在设计时会限制颜色对比度、最小字号等,而具体规则会根据场景确定。

清晰有层次

地图的层次清晰包含了两个方面:信息主次清晰,视觉具有整体性。

信息主次清晰,地图信息庞杂,没有主次关系会影响用户的读图效率。在设计时需要考虑元素本身的特点、重要性,可通过颜色、icon/文字大小、线形宽窄等表达。做到同类元素有关联性,不同元素有差异性。同时,信息主次也会根据比例尺的变化有所调整。

视觉具有整体性,在滴滴的业务场景中,地图通常作为最底层组件出现,上层还会有很多业务组件。因此在设计时需克制用色,既要保证地图中各元素之间的区隔度,又要保证地图整体与其他业务组件拉开视觉层级。这样才能更好的突出当前业务模块的重点,提升整体的使用效率和体验。

细分地图模式

地图在各业务模块中应用广泛,用户需求也不尽相同,设计时需要根据使用场景区分不同模式。以网约车场景为例,业务信息始终处于上层,地图用来帮助用户定位、快速发单。因此,网约车场景的地图整体性强、色调偏冷、视觉层级后退,能更好的搭配网约车模块的整体设计,保证用户的操作效率。

滴滴出品!地图基础知识及通用设计原则

具有品牌特性

品牌调性一直是滴滴设计层面非常关注的原则,品牌基因贯穿了所有产品,始终具有独特的视觉风格。遵循品牌的视觉语言,使地图可以更好的融合到产品中,保证了设计的统一性。

文章来源:优设    作者:CDX创意设计中心


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


设计师要懂的原子设计(AtomicDesign)理念

周周

“我们不设计页面,我们设计构成元素的系统。”——Stephen Hay 

原子设计理论并不是什么高大上的规则。

随着网页设计的持续发展,我们认识到开发设计系统(design system)的重要性,它最早就是为了让网页设计师更容易理解网页的构成,后来才延伸到UI设计当中。


简单来说,当公司的业务产品逐渐扩大时,我们需要制定一套完整的设计系统,提升设计和开发的协作效率,统一所有设计师的输出物。 开始设计系统的制定时,大部分设计师可能都会先去网上找到大厂现成的设计系统,当拿到他们的成品的时候,会把自己的产品进行拆解和借鉴,这的确能快速解决问题,但是如果不理解其中的组织规则和逻辑,只是借鉴他们现成的设计系统,只能了解个大概,知其然而不知其所以然。因此,原子设计理论的出现就是为了帮助我们去搭建设计系统,这套理论已经逐渐被国外一些大厂应用于创建统一和富有层次的设计系统。

原子是所有事物的基本构成物质。每一个化学元素都具有不同的性质,并且它们一旦被分解就会失去其意义。

分子是由两个或两个以上的原子通过化学键结合在一起的。这些原子的组合具有自己独特的性质,并且相较于原子来说,更具实际意义和可操作性。
有机体是由分子有机地组合在一起的。这些相对复杂的结构可以从单细胞生物一直到像人类这样难以置信的复杂生物体。 


 宇宙中的物质都可以被分解成为原子元素。

碰巧的是,我们的界面就是由一些基本的元素组成的。Josh Duck的“HTML元素周期表”完美阐述了我们所有的网站、APP、企业内部网、hoobadyboops等等是如何由相同的HTML元素组成的。

△Josh Duck的“HTML元素周期表”

接下来和大家细聊一下什么是原子设计;原子设计到底好在哪里;为什么要有设计系统;以及该如何利用原子理论创建自己的项目组件库。

原子设计(Atomic Design)理念最早是由国外网页设计师Brad Frost提出的,他从化学元素周期表中得到启发,发现原子结合在一起,可以形成分子,进一步形成组织,从科学的角度来讲,在宇宙中的所有事物都是由一组有序的原子组成。

Brad将这个概念应用到界面设计中,仔细观察后我们不难发现,界面其实就是由一些基本的元素组成,文字,颜色和图标等都是一个个原子。

 

通过原子设计,我们可以把界面看作是一个连贯的整体,同时也是一些元素的集合,每个元素都不尽相同,互相结合产生更多层次和结构,模块之间相互统一。说到底,原子设计其实是一种设计方法论,它由原子、分子、组织、模块和页面共同协作,由此创作出统一和富有层次的设计系统。 

简单来说:原子结合在一起,形成分子,进一步结合形成的生物体。原子理论意味着在已知宇宙中的所有事物都可以分解为一组有限的原子元素。

原子设计是一种方法,由五个不同的阶段一起工作,以更慎重和更具层次的方式创建界面设计系统。从而创造出更有效的用户界面系统的一种设计方法。

它的五个不同阶段是:

原子(Atoms):为页面构成的基本元素,例如标签、输入框、文字、颜色等;
分子(Molecules):由原子构成的简单UI元素,例如按钮;
组织(Organisms):相对分子而言,较为复杂的构成物,由原子及分子所组成;
模板(Templates):以页面为基础的架构,将以上元素进行排版;
页面(Pages):将实际内容(图片、文章等)放置在特定模板内;

 

原子设计不是一个线性的过程, 它更像是一个心理模型,来帮助我们把用户界面看作是一个连贯的整体,同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面,让我们更深入的了解每一个阶段哦~

原子

如果原子是物质的基础组成部分,那么我们用户界面的“原子”就是那些构成我们用户界面的基本构件了 。在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线等。 


在团队开始新项目时,为了保证各个页面具有统一的设计风格,我们会制定一套简易的视觉规范,在关键的设计元素上,各个设计师达成一致,这样就能很大程度保证不同页面的风格统一,并在这个基础上去探索更有创新意义的设计方案。

 


在模式库中,原子一目了然地展示了所有的基本样式,当你回来继续开发和维护你的设计系统时,这是一份很有用的设计参考指南。

分子

分子是原子组合建立的元素,两个原子即可组成一个分子。

在界面中,分子就像是一个由UI元素组成的相对简单的组织。例如,搜索框里的文字和图标共同打造一了个搜索表单分子。

 


 以按钮为例,它的组成元素包含了文字、色块、图标和栅格。合并后,这些抽象的原子从毫无关联到又一个共同的目的,图标和文字互相配合传达意义,颜色定义了按钮的特性,栅格为按钮定义了一个尺寸和规范。

 


将单个元素组装为简单的功能组是我们一直以来构建用户界面的方式,可帮助UI设计人员和开发人员坚持单一职责原则,这种方式简单且复用性高,可以保证界面具有良好的可用性。

以界面设计中的表单为例,表单是一个非常常见的设计元素,一个表单分子是由文字、图标和线条原子组成。这些原子合并后,得到的是一个可以应用在任何信息展示或者功能入口的组合。

 

组织

组织是由分子或原子或其它有机体组成的相对复杂的UI部分 。这些组织组成了界面的不同部分。

通过结合分子和原子,我们可以构建更复杂和可扩展性的模块,这个称之为组织,其实也可以称之为组件,这些组件组成了界面的不同部分。同样以表单为例,一个表单我们可以通过数量的组合,以及间距的调整,元素的增减,在界面中表达不同的场景和含义。从建立分子到建立更精细的组件,这为设计师和开发人员提供了重要的内容构建思路。

 

组件在解放设计师生产力方面有着重要的作用,我们可以把界面中常见的组件进行分类整理,如搜索、表单、图片和卡片等,这些常用组件基本能满足日常的设计需求。以Aribnb为例,他们主要分为3类:卡片、表单和内容。每个标签内容的设计形式尽量都保持统一,因此负责不同内容模块的设计师只要选择同一个组件就能完成页面的设计。在短时间内就可以完成页面超多的复杂项目,极大的提升了团队的设计效率。

 

在网页端最典型的例子就是网站导航,搜索表单,我们几乎访问的每个网站都会看到这些类型的组件。 

模板

原子,分子和组织的这种语言有助于我们有意识地构造设计系统的组件。但是,最终我们必须采用一个更适合描述我们最终产出的语言,这样才好汇报给老板、客户和同事,简单来说就是说人话。

 

模版的本质就是线框图,在这一步我们基本可以看到一个产品的形态。我们可以不断调整组件和分子组合在一起的效果来尝试不同的方案,找到一个相对合适的方案。模版的意义就在于可以专注于页面的内容结构布局,而不是页面的最终内容,此时模版内容是随时可以调整的,尝试不同的方案,在多个模版中进行对比,在这个阶段改动和沟通保证了成本。因此,模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。

 

模板是页面级别的对象,它将组件放置在布局中,并显示设计的底层内容结构。在设计一个有效的设计系统时,必须在布局的环境中展示组件的外观和功能,以证明这些部件组成了一个功能良好的整体。

 

模板的另一个重要特征是它们专注于页面的底层内容结构,而不是页面的最终内容。设计系统必须考虑内容的动态性质,因此,把例如标题和文字段落的图像大小和字符长度此类组件的重要属性说清楚是很有帮助的。

页面

页面是模板的具体实例,填充了真实的内容(图片、文字等)后形成页面,也就是常说的「视觉稿」,将占位符替换为有代表性的真是内容,使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的视觉方案。

 

页面阶段是原子设计中最具体的阶段,由于一些众所周知的原因这个阶段非常重要。别忘了,这可是用户在访问你的界面时会实际看到和交互的内容。

除了演示用户所看到的最终界面之外, 页面对于测试底层设计系统的有效性是必不可少的 。在页面阶段,我们可以看到当将真实内容应用于设计系统时,所有这些模式如何运作。所有的一切看起来都很棒吗?如果答案是否定的,那么我们可以回过头去修改我们的分子、生物体和模板,以更好地满足我们内容的需求。

 

页面还提供了一个表达模板变量的地方,这对建立强大而可靠的设计系统至关重要。以下是模板变量的几个例子:

用户在其购物车中有一个商品,另一个用户在其购物车中有十个商品。
网页APP的仪表板通常显示最近的活动,但是该部分对于首次使用的用户是禁用的。
一篇文章标题可能是40个字符长,而另一篇文章标题可能是100个字符长 

在所有这些例子中,底层的模板是相同的,但用户界面将会随着内容的动态性质而改变。这些变化直接影响了底层分子,有机体和模板的构建方式。因此,创建解释这些变量的页面有助于我们建立更具弹性的设计系统。


 这就是原子设计!这五个不同的阶段同时协同工作,以产生有效的用户界面设计系统。


原子是最基础的UI元素,并且是可以用作界面的元素构建块;
分子是用于形成相对简单的UI组件的原子集合;
组织是形成界面各个部分的相对复杂的部件;
模板将组件放置在布局中,并演示设计的底层内容结构;
页面将真实内容应用于模板,设计出视觉稿,并最终成为开发落地的依据;

 

原子设计为制作设计系统提供了清晰的方法。客户和团队成员通过实际的设计流程与步骤,能更好的去理解设计系统的概念。原子设计使我们能够从抽象的设计中过渡到具体的设计中来,因此我们可以对一个设计系统进行一致性和可伸缩性等类似特性的控制。


通过模块化的设计系统调动组件,可以使我们开发新的产品时,从开始就可以对产品进行严格的把控与一定程度上的控制,进而规避了事后风险。开发之前不确定好系统模块化,毫无逻辑的去开发,开发到一半发现功能与需求对不上等问题逐渐产生,会导致产品的延期、人员成本的浪费、资金成本的增加,产品的迭代率的下降、进而影响市场先机与市场占有率。 

原子化设计与原来的样式库设计思路不一样,原子化设计从抽象到具象,从元素到组件,让设计师从底层开始思考,对整个设计会有更清晰的理解。同时也能让设计更加统一,在新增组件的时候更谨慎。

原子设计的原理可以保证任何一个设计组件的构成与开发构建组件一一对应。同时应用原子设计的设计软件(e.g., Sketch, Figma)可以给新设计师足够的自由满足需求变通,并且可以保证同一个设计组件的更新会覆盖到任何一个使用这个组件的设计中。 

原子设计为我们提供了一些关键的见解,帮助我们创建更有效、更深思熟虑的UI设计系统。

那么、 


如果产品规模小只需要1,2个设计师,大概率是前期不需要大费周章搞一个需要开发配合的设计系统。可以只利用Sketch或者Figma做一个像贴纸一样的设计组件库。但是功能多了怎么办,公司来新人了,当新设计师产出后就会发现与原设计师设计的风格不一样,慢慢发现整体设计风格不统一了,只靠一个简单的组件库很难能满足新功能需求,新功能贴纸上没有设计或者设计需要变通,又或者是新设计师忙着交工忘记检查自己新组件和已有组件的异同。

 

这时候就会需要一个设计师领头去重新整理设计系统,走查发现同一个正文所用的十几个不同字号,又或者是十几个透明度不同的灰黑色字体,所有组件跟现有上线产品对比整理好后一并交给开发,开发再一一整理代码库。

设计系统(Design Systems)对于很多年轻设计师可能十个新名词,但是设计规范和组件等我们应该还是有一定认知的。在设计的过程中,我们会被其影响。在我们日常所使用的App产品中,如Apple、Google、Airbnb、Uber、滴滴等,他们的产品体验非常流畅,用户使用产品时能够地满足需求,在其良好的体验背后都有着一套强大的设计系统做支撑。


为什么需要设计系统

 

1、团队协作,体验一致。以滴滴为例,虽然只是一个简单的打车应用,但是其旗下的业务却很多,快出、出租车、顺风车等,每个业务都由不同的团队和设计师负责。可以想象如果没有设计系统,任由各模块设计师自由发挥,风格各异,出来的结果可想而知。而有了设计系统的帮助,就会感觉界面风格非常统一,感觉是出自同一个设计师之手,可见其设计系统的功劳不小。

 


2、系统的管理多样性。在设计过程中,我们会发现过程中,我们会发现每个业务的形态都是基于不同的场景,因为场景的多样性,在表现上就会催生出不同的样式。如果每个业务都用一种样式表达,久而久之当业务增长过快时,我们现有的设计模式就会难以满足。Airbnb的设计方式就是非常值得参考的一个案例,从最开始是提供民宿,到后来新增的餐馆服务,你会发现房源和餐馆都用了同一套图文信息结构,只是在内容的细节上有一些不同。这样可以降低设计的难度。设计师不用为每个场景思考一个设计模式而烦恼。同时,用户在浏览不同场景的内同时,在相互切换中也不会产生为违和感,一切都是很自然的操作。

 

 

3、帮助产品成长,避免一次性设计。互联网产品的成长模式是一种渐进式迭代,在产品初期的主要诉求是快速上线,等到产品上线获取一定的用户,证明它可以活下去时再逐步完善,增加更多的功能。每一次的迭代都是站在我们之前的思考之上,每一次的优化都会让我们的设计更进一步,这是我们期望达到的结果。

 


以Uber为例,新版本继承了黑色按钮的设计,并和地图进行了结合,地图的配色和旧版本相比也变得生动了,这种改变并不是一蹴而就,而是建立在原有版本之上。

一致性(Consistency):由于分解界面成单一元素,不论在哪一个页面,UI元素的互动性是相同的,例如颜色变化、字体的排序、以及反馈。不但让使用者体验相同,在视觉上更为和谐。


效率(Efficiency):由于建立了组件库,一旦要更改某一个元素,可以马上施行、应用。


跨部门的共通语言(Collaboration):不仅方便设计师思考页面的和谐性,也可以让工程师、测试检验清楚页面的逻辑架构及变化,减少不必要的来回沟通

在此,顺便浅谈下设计系统。

通常,设计系统包含的内容由设计原则、设计语言和组件库,这是一个整体的概念。

 

设计原则

设计原则是一个产品的核心设计理念,设计的本质就是解决问题,在制定设计原则时要建立在这个中心思想之上。这些问题也许是一个业务形态,例如打车的场景,也许是一个设计形式,如表单。设计形式又很多,我们应该如何选择呢?相对合理的方法就是建立一个规则,所有的问题和形式都想这个规则靠拢,减少不确定性,这就是设计原则的出发点。因此我们可以理解为,设计原则就是一系列的规则,是我们设计过程中要遵循的中心思想。

例如:苹果把审美作为第一要素存在于设计原则中,它的产品往往也是品味的代名词,看看它的设计原则就知道了:

审美的完整性

一致性

直接操作

即使的反馈

隐喻

用户可控

 

△ 官网:https://developer.apple.com/design/ 

再来看看Material Design,Google对其定义是一个完整统一的系统,结合了理论、资源和工具的数字体验产品,相比而言它的设计原则就是更加独特,这是它的设计原则:

材料是一种隐喻

大胆/图形/强调/

运动赋予意义

灵活的基础

跨平台 

△ 官网:https://material.io/design

由此可以看出,和iOS相比,Material Design的设计原则更加的抽象,因为他拥有一个独特的设计世界观,用还原的方法和物理方法呈现出它的本质,通过抽象的视觉卡片传递出设计的目的和原则。

设计语言

 在建立设计原则后,下一步就是制定一套设计语言规范,设计规范是设计系统的表现层,面向的对象是团队设计师和开发者,他能帮助设计师的设计输出保持风格统一。同样也能帮助开发者高度还原设计。非常有利于设计师和开发者的协作。这套规范包含的有:字体、颜色、图标和栅格。 

组件化设计

组件化设计主要作用有两点,一是保证多人协作效率,组件化设计可以快速完成一个简单页面的设计,提升设计效率;二是保持产品体验的统一性。同时,组件化设计环节在设计系统中是一个相对重要的工作,需要有一个全局观,要有较强的设计水平和沟通协作能力,这样,组件化的落地才会得到很好的推进。

 

在多屏时代,我们时时刻刻都在设计产品界面,需适配多系统,其中很重要的一点是如何在多系统之间保持体验一致性,很多人想到的就是规范,要想做一套严谨逻辑好,灵活的设计规范,那么原子设计可以帮助我们来很好的实现它,它在构建设计系统中算是比较科学的一种方法,国外很多设计团队都在使用这样的设计方法。比如以下这几个团队: 

1、Airbnb

Airbnb设计副总裁Alex Schleifer在IXDC2017国际体验设计大会上分享了这一创新React Sketch app 管理设计系统, 这是为Airbnb的设计系统而设计的,其实就是个实时更新的代码数据库,可以实时查询sketch数据、代码,也可以下载图标、设计模块,所有工程师、设计师都可以免费下载。

△ 官网:https://airbnb.design/events/when-we-use-systems/

2、Frames

Frames 使用了精致的组件和先进技术,并结合 Sketch 构建了强大的 Web 设计系统,同样能满足修改原子,全局同步更新的功能,支持响应式布局。提供了近百个网页模板,可以非常迅速地完成效果图制作。

△ 官网:http://framesforsketch.com

3、Nested Symbols

这是一套免费的设计系统,它将按钮、输入框、下拉菜单、通知等控件,都制作成了嵌套符号,方便自定义和编辑。

△ 官网:https://www.janlosert.com/ 

原子设计理论最大的价值,就是为设计体系/组件库的构建提供思路和方法,如果你不满足于市场上现有的设计系统,我们还可以自己创建。因此我们首先要为产品设计出一个独特的视觉语言作为起点。这个视觉语言一定要有力度、易于扩展,必须能在所有地方奏效!


接下来就以 Sketch Library 功能来实现组件库的创建。

第一步:定义颜色(color)

将颜色添加 Main、Text、Status 等一级分类,例如:Color/Status;再添加二级分类,例如:Color/Status/Success 等,命名需使用「 / 」 符号区分层级结构。定义好颜色和命名后,将每个颜色转换成 Symbol,便可统一调用。

 


第二步:定义字体(font)

根据设计规范,将不同字号的文字样式罗列出来,例如:Title 1、Body、Body2 等,按照「样式名称/颜色/对齐方式」的层级结构,将文字赋予 Text Style,整理出所有的字体样式。

第三步:定义图标(icon)

将图标放置在 24*24px 大小画板内,从定义好的颜色系统中选择合适的 Symbol,这样替换图标颜色时直接选定义好的颜色就可以了。在属性面板中锁定尺寸(size)大小,并把调整尺寸(Resizing) 设为上下左右同时吸附,以确保图标在使用时可以等比缩放。

 

第四步:加入其他元素(Elements)

 

根据以上对原子的定义和命名方式,依次完成对其他原子、分子和组织的定义,例如:按钮、表单、空状态等,整个过程都是通过 Symbol 的不断嵌套,最终实现组件库的创建。

 

第五步:加入组件库

 

使用快捷键「cmd+, 」打开 Preferences 面板,选择「Libraries」(组件库)标签,点击「Add Library」(添加组件库)按钮添加刚才的 Sketch 文件,完成后就可以从其他的 Sketch 文件中,对此库里的元素进行调用了。

 

 

写在最后,原子设计是一套具有科学严谨的创建设计系统的方法论,是一个构建UI系统的心理模型。

 


原子设计使我们可以将我们的界面UI细分为原子元素,并通过这些元素组合在一起形成最终的界面。

原子作为整个理论最基础的元素,当我们改变其中的原子时,整个体系都会发生变化。原子的设计概念和sketch中的“符号”有异曲同工之妙,当我们改变其中一个元素时,其他所有包含这个元素的页面都会发生变化,可以保证整个系统的一致性和层次感。原子设计为界面元素提供了应用规则和组织原理,这套方法论对于设计系统建立、团队协作、产品迭代都具有非常重要的指导意义。

经常有同学问ios设计规范,安卓设计规范在哪看这类问题,最后,来推荐一些大平台的设计网站,上文出现过的下面就不重复了。我们耳熟能详的优秀设计都是来自于这些世界互联网公司,说真的,审美这东西还真是人家说了算~


反正看看又不要钱,都去康康呗~

 

Google Design

谷歌设计中心,它非常全面的展示了谷歌的设计工作和概念。包括Material Design在内的所有关于设计、体验、产品等互联网领域的探索。 

△ 网址:https://design.google/

Fluent Design

微软基于Windows10的设计语言,包括人机界面布局、控件、样式及资源下载。

 

 

△ 网址:https://www.microsoft.com/design/fluent/#/

 

IBM Design Language

IBM设计语言是伟大设计的代名词,他将人们的需求转化成精心打造的产品。在这里可以学习IBM设计团队一用户为中心设计的新思维方式。

 


△ 网址:https://www.ibm.com/design/

 

Facebook Design

脸书设计官网,在国内,我们常常看到脸书的设计文章被翻成中文为中国设计师所学习

 

 

△ 网址:https://facebook.design/

 

Uber Design

作为全球第一家即时打车应用,优步其超前的设计理念和优秀的用户体验成为同类产品竞相模仿的对象。

 

△ 网址:https://www.uber.deign.com/


Ant Design

蚂蚁金服设计平台是阿里旗下子公司,基于蚂蚁金服生态系统的跨设计与开发的体验解决方案。

 

△ 网址:https://design.alipay.com/


参考资料

《原子设计》官网

Airbnb 设计规范

Apple 设计规范

Material Design设计规范

Google及其他

文章来源:tob.design

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

日历

链接

个人资料

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

存档