首页

想抓住产品第一印象?看看这些引导页设计方法!

seo达人



引导页可以算作我们打开一个新产品时看到的第一个画面,能在未使用产品之前提前告知产品的主要功能与特点。

第一印象的好坏会很大程度上影响到后续的产品使用体验。文章通过梳理引导页设计的构成,总结出实用的观点与方法来助力引导页设计。

 

1.什么是引导页?

第一次打开新的应用时通常能会看到2-3个系列开屏页,上面有简短的文案来解释产品的功能,方便用户使用。

又或者打开一个全新的社交类产品,会引导用户进行创建帐号、设置偏好、添加兴趣等一系列操作,从零开始带用户了解产品。

图片

▲ 通过友好的引导页向用户介绍价值主张以及产品将如何改善他们的生活。

入门引导有助于用户了解需要做什么以及怎么做才能从产品中获得需要的东西。这是一种与用户建立信任的方法,不仅有助于用户,也是提高业务转化率和保留率的关键。

 

2.为什么引导页很重要?

平均来说,近四分之一的用户会在仅使用产品一次后就因为各种原因放弃再次使用。一旦用户试用了产品并且离开,可能很难再次成为产品的使用者,除非他们能从产品中获得一些有价值的内容。

例如我们花时间和精力去下载一个新产品时,总会带着某种目的性,希望这个产品能在某种程度上解决现阶段遇到的问题或者改善我们的生活。

图片

▲ Twine将渐进式的引导页融入到产品体验中,用户的流失率降低了一半以上。

用户留存率和客户忠诚度是大多数产品和服务成功的关键因素,合适的引导页可以提高长期留存率。

为产品或服务添加新功能虽然很好,但如果用户不了解或不知道如何使用,会导致用户在很大程度上未充分利用这些新功能,那么它们就没有为用户带来太大的价值。

 

3.引导页设计类型和方法 

引导页类型

为满足新用户的需求并留住他们,大多数产品会采用几种引导页组合来为用户提供指导。

 

入门之旅

这是一种在移动应用中非常流行的模式。用户第一次启动产品后,他们会看到几个快速概述产品价值和基础知识的页面。

这种简单、静态的介绍为新用户提供了一个很好的入门。

图片

▲ Slack通过四屏概览引入了新用户,整个介绍流程很清晰,为用户提供了明确的进度点以及跳过选项。

最好的做法是为用户提供进度指示以及退出或跳过选项。这样他们就会明白还有多少介绍内容需要阅读,并且不会感到困惑。

 

工具提示和指导标记

这是另一种很常见且相对省力的方法,用于从一开始并贯穿整个产品体验来引导用户。

图片

▲ Twine使用工具提示和指导标记帮助用户快速了解页面情况。

图片

▲ 在为Metrie的3D房间配置器设计界面时,通过添加指导标记的可切换图层,将它们合并到加载屏幕中。

虽然这种带注释的引导设计很有用,但要注意不要过度使用或者连续弹出多个窗口来干扰用户。一次引导用户使用一个元素或操作,避免解释太多显而易见的事情。

 

引导任务完成

让用户记住某事最好的方法就是让他们实际去做。引导式任务是通过一系列步骤提示用户与产品交互的方法,常用于当产品希望用户尽早创建帐户或设置一些个性化参数时。

图片

▲ 用户首次进入团队管理平台Basecamp时,会被引导完成一项任务,以此来熟悉产品的特性和功能。

 

什么时间开始引导

从初次进入到持续使用的整个过程中,决定在产品体验的哪个部分使用哪种引导模式对于用户体验来说都至关重要。

 

开箱即用

第一印象很重要,因为很多用户在第一次打开产品后就把它放弃了。

图片

▲ 日记应用Dailyo友好细致的引导页向用户解释了产品的价值,并提供了如何让用户从中获益的提示。

 

渐进式引导

用户完成了开箱即用的流程之后,在使用产品的过程中仍然有很多机会可以继续帮助、启发和取悦用户。

图片

▲ 每当用户选择一种新语言来学习时,多邻国都会提示用户表明他们的专业水平,然后测试他们的语言能力。这有助于用户避免因高估自己的能力而有可能放弃使用的挫折感。

 

新功能上线

当产品推出新功能或对体验进行重大的改动时,需要让用户知道这些新功能的优点以及如何使用。

图片

▲ 当Facebook为用户引入一项新功能时,会通过一个高度可见的工具提示标注来让用户知道如何在一个简单的消息中使用新的功能。

 

4.引导页设计实践和技巧 

了解用户

通过了解用户来调整引导页的设计,发现并利用用户现有的心智模型,来帮助弥合用户对产品的期望。

图片

▲ Basecamp通过提供一个简单的选择面板和友好的指南,突出了新用户在首次使用时要注意的核心要素。

在构建产品时,用户测试和可用性分析不仅能帮助团队改进整体设计,还能告知用户在入门时应关注哪些内容。

 

与用户价值联系起来

使用福利介绍来提醒用户为什么产品或服务适合满足特定需求。

图片

▲ Inbox对入门体验进行了冗长的介绍,但每个案例都强调了其功能将如何使用户的生活更轻松。

 

快速引导

使用一个实体产品时,很少有人愿意翻看说明书,相反大家更愿意自己去摸索产品的功能。

图片

▲ Morningstar Financial的入门引导违反保持简单引导的准则,因为没有人愿意花费时间去阅读这么多的说明,更别说记住这些说明。

如果产品很简单,快速的概览可能就足够了。当需要更深入时可以考虑渐进式引导,将引导扩展到整个产品体验中。

 

可重复引导

入门引导之后,不能假设用户不会再次访问这些引导内容,用户很可能忘记了第一次引导时提到的技巧或内容,所以考虑在导航中设置一个“帮助”模块,便于用户重复回看这些引导内容。

图片

▲ 指导标记可以根据用户需要在房间中选择打开或关闭,这使用户能够根据自己的实际情况获得指导和帮助。

 

避免过于个性化

鼓励新用户提供一些有助于个性化体验的信息是很好的,但需要注意不能要求太多细节,导致让用户有一种信息泄漏的感觉。

产品不应该向用户询问太多不必要的问题,尤其是在刚开始使用的时候。

图片

▲ 首次使用Pinterest时,用户需要使用邮箱才能登录,再通过年龄和兴趣爱好的选择为用户带来个性化的体验。

 

最后 

引导页不仅仅是一瞬间的操作,而是一个与受众建立并保持信任的过程。

 

原文地址:Clip设计夹(公众号)

作者: Clippp

转载请注明:学UI网》想抓住产品第一印象?看看这些引导页设计方法!


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

                                                            微信图片_20210513163802.png

 

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

 

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



设计心理学系列(03)——雅各布定律与心智模型

seo达人



在体验设计层面,设计师需要匹配用户心智和引导用户心智。而产品设计更需要建立品牌心智,提升用户对品牌的忠诚度。因此在产品和运营活动设计时需要充分考虑对品牌心智的影响,避免带来负面效果。今天我们继续设计心理学第3篇——雅各布定律。

本文主要内容包括:
  • 雅克布定律与心智模型
  • 心智模型对设计的影响

 

01雅各布定律与心智模型

雅各布定律指的是如果用户已将大部分时间花费在某个网站上,那么他们会希望你的网站可以与那些他们已熟悉的网站一样拥有相似的使用模式。
这个定律揭示了用户认知事物的过程和特点——用户是“懒”的,会通过已有的经验去认知新的事物。当经验无法匹配时,用户会产生各种不适应,极端情况下用户会放弃使用产品。
比较典型的就是长期使用Windows的用户,最开始使用Mac时会表现出各种不习惯。最根本的原因就是用户在Windows系统中建立的使用心智,无法适用于Mac系统,为此有人在MacBook 中安装了Windows 系统。
图片
Don Norman 将心智模型定义为:“存在于用户头脑中的关于一个产品应该具有的概念和行为的知识,这种知识可能来源于用户以前使用类似产品的经验,或者是用户根据使用该产品要达到的目标而对产品的概念和行为的一种期望。”

因此我认为雅各布定律其实是用户心智模型的外在表现。

 

02心智模型对设计的影响

设计师如何去应用心智模型呢?主要有以下3个方面。

图片

1、匹配用户心智

匹配用户心智模型来改善体验是设计师的首要任务。当设计方案与用户心智模型一致,用户可以轻松地将已有经验从一个产品转移到另一个产品上,无需额外的理解和学习成本。

 

最常见的就是与真实环境相匹配。例如手机系统中开关样式、日历风格,都是与现实生活中相匹配的,用户的认知成本很低。同样在电商平台中,很多弹窗套用类似于微信红包样式,希望可以提高活动对用户吸引力带来更多点击和转化。

图片

之前曾经碰到一个案例。在某一数据监控系统中,数据正增长时采用红色表示,负增长采用绿色表示,理由是与股市的涨跌配色保持一致,但是系统跟股市并没有任何关系。该系统中红色又代表了告警色,绿色代表了健康色,同一系统中采用了两套设计形式,结果造成了用户困扰。

 

因此匹配用户心智需要综合考虑用户场景、应用目的等多种因素。

 

例如常见的地图,在不同的场景中表现方式也是有所差异的。在高德地图中,用户需要查询地点、导航出行等等,所以地图与我们常见的实物地图更加匹配。而在滴滴打车中,地图更多是为了确定用户地理位置、上车地点、周边车辆数量等等,所以地图更多的是作为背景进行了简单化的处理。

图片

 

2、建立新的心智

我们在设计工作中会遇到各种新的场景、新的功能,无法完全匹配用户已有的认知,因此需要借助一定的设计手段建立用户新的心智,主要包括以下3种设计形式。

图片

 

1)产品心智植入

最开始我对slogan之类的品牌心智是无感的,感觉这种口号太虚了,用户不会care,或者很难引起用户共鸣。但是今日头条改变了我的认知,短视频逐渐占领了我的碎片时间,通过短视频让我看到了别人不一样的生活,跟着别人的镜头也让我“看见了更大的世界”。

拼多多月卡为了建立用户的省钱心智,在页面中突出了产品slogan,并且将“4张5元无门槛券”打造成标志性权益,降低用户的决策成本,并且形成权益记忆点,方便营销传播。

图片

 

2)心智引导

当产品设计无法与用户心智相匹配,或者改变了用户已有心智时,需要通过引导方式让用户快速建立新的心智。例如常见新手引导、功能入口提示、功能调整说明等。

图片

 

3)行为培养心智

为了培养用户习惯,签到类产品都会采用“定时玩法”打造用户心智。例如淘系的各种游戏化产品,都采用了每天早上7点定时收获游戏奖励的玩法,通过日复一日的行为刺激固化用户心智模型。

图片

对于会期比较长的年卡付费会员,用户对权益感知比较散碎,同样需要周期性权益激发用户与产品之间的互动,不断的增强用户的省钱感知。因此不少付费产品增加了月度权益。例如京东每月100元优惠券,淘宝88VIP每月兑换优惠券,1号会员店每月领鸡蛋,考拉海购黑卡月度专享购物券权益等。

 

这些月度权益在用户生命周期中形成了一个个记忆点,逐渐增强用户对产品的“省钱”心智,并且可以持续的激活用户,为续费活动做好衔接。

图片

 

3)利用心智

设计师既要为用户服务,又要考虑商业价值实现。所以某些场景下,设计师需要利用已有的心智为产品服务。

例如弹窗可以更好地吸引用户注意力,并且用户对于弹窗主要有两种操作,要么关闭要么点击。基于这样的心智,某些App开机广告就采用弹窗样式吸引用户点击。

图片

 

另外广告作为互联网平台重要的收入来源,需要考虑投放效果,因此广告大都采用软植入的方式,在形式上尽可能的与实际内容保持一致,从而借助已有的心智引导用户浏览和点击。

图片

写在最后
我个人认为心智模型其实包括交互和品牌两个层面。

在体验设计层面,设计师需要匹配用户心智和引导用户心智。而产品设计更需要建立品牌心智,提升用户对品牌的忠诚度。因此在产品和运营活动设计时需要充分考虑对品牌心智的影响,避免带来负面效果。

 

原文地址:子牧UXD(公众号)

作者:子牧先生


 

转载请注明:学UI网》设计心理学系列(03)——雅各布定律与心智模型



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

                                                            微信图片_20210513163802.png

 

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

 

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


后台界面设计的7条原则(附常用图表组件库下载)

seo达人

B端界面设计越来越受到重视,但设计师单从界面设计总感觉没有太多值得发挥的地方,其实对于B端界面设计来说,视觉在其中的作用真的很有限,需要设计师有更多的深度思考。今天这篇文章就从更加深入的角度去反思B端界面的底层逻辑,一起来学习吧!

文末会分享给大家一组非常实用的常用后台图表组件库,欢迎大家下载!

 

一个看起来很酷的仪表盘可能有很多功能、小工具和好的视觉效果。但实际上,它往往被设计成只是一个好看的玩具,而不是一个有用的工具。类似于一个多臂机器人,它能把数据整理成整齐的一堆,然后用明亮的数据让人眼花缭乱。

摆弄这个机器人可能很有趣,但最终会让用它的人感到失望。

为什么会发生这种情况?创造一种工具而不是一种可以很快被丢弃的玩具的诀窍是什么?

图片

Illustration: Outcrowd

 

1、构思仪表盘界面的大脑

让我们深入研究设计解剖学。仪表盘的“父母”是客户端、设计人员和开发人员,每个组件设计都需要他们的合作产出,所有关键点在一开始要做出说明。

智人是由胚胎发展而来的。首先形成的是脑细胞和神经细胞,然后是身体的其他细胞。这正是任何可行的项目应该遵循的方式。第一个阶段是最重要的。如果你忽视这个阶段,再花哨的设计也不能挽救局面。这正是为仪表盘的长期发展奠定基础。

仪表盘如果会说话的话,它会问“我为什么出生?谁需要我?“。

试问你能回答吗?因此你需要明确:

  • 仪表盘将如何助力公司目标?
  • 什么结构,功能和视觉效果将帮助仪表盘服务好用户?
  • 哪种设计最适合目标受众?

这些问题的答案将构成你的设计理念基础。

图片

Perls

 

仪表盘中没有琐碎的细节。

仪表盘显示的信息应该使用户能够做出决策。设计师的工作是帮助用户解决问题,而不是让他们使用一堆很酷的小工具。任何对目标不起作用的事情都会与目标背道而驰。

从项目的最初阶段到最后阶段,设计师必须关注公司的目标、仪表盘的目标和用户的目标。

否则,仪表盘将永远不会做的更好。

图片

Clover

 

2. 数据及关键指标选择:循环系统

仪表盘数据就像循环的血液。我们必须理解它们来自哪里,当用户需要它们时如何处理,以及应该如何可视化。

设计师需要理解数据的目的。显然,这将帮助他们选择合适的组件,但还有更多的工作要做。例如,用户希望在屏幕上看到大量不同的读数。你不需要移除任何东西来清除一些空间,但你可以做的是突出最重要的元素,并在视觉上“弱化”次要的东西。然而,要做到这一点,你必须知道数据的优先级。

图片

Bidding Car

 

最重要的指标是哪些数据能帮助达成目标。例如:

  • 显示实际成功率;
  • 影响产品的感知方式;
  • 激励创造产品的团队。

参数的选择也需要了解用户。用户应该看到哪个关键指标,他们认为什么样的可视化表现最容易理解?

人们喜欢看到与他们的目标相符的数字。

图片

Panch

 

3. 仪表盘结构:骨架

想象进入一个酒店房间,看到一张床,一张桌子和椅子,一面镜子和一个壁橱。甚至不用打开壁橱,你就能猜到里面有什么。吹风机、拖鞋和毛巾都在你想要的地方——有人确保了这些。一个好的仪表盘就像那个房间。它是干净的,整洁的,可预测的。你马上就能看到所有的要点,凭直觉知道在哪里可以找到其余的内容。

设计师有自己的工具来确保整洁。

 

1) 层次结构

首先,你得整理思绪。在开始设计之前,一定要对所有数据进行排序,将其分类,了解什么是最先发生的,什么是最后发生的,接下来是什么等等。确定用户必须马上看到的关键内容。

视觉层次结构必须反映信息层次结构。

数据层次结构通过小组件的大小和位置表示。如果你的读者从左到右阅读,关键信息必须放在左上角,最不相关的信息将在右下角。

对数据排序的方法将取决于仪表盘的用途。重要的是根据信息的优先级组织信息,并创建逻辑场景。

把信息面板看作是一个故事,而不是一系列数据点。

 

2) 网格

网格对于创建页面的总体布局、排序、平衡和对齐元素非常有用。

图片

 

3) 信息模块

模块系统类似于公寓的分区。卧室是用来睡觉的,餐厅是用来吃饭的——每个区域都有自己的功能。你的舒适度取决于他们所处位置的便利程度。糟糕的布局不能通过装修或家具来修复。相应地,必须提前考虑模块划分。

模块帮助显示内容层次结构,根据数据的重要性、相关性和逻辑连接对数据进行分组。每个模块都应该在给定的流程中服务于特定的目的。

图片

图片

 

4) 连续性和接近性

如果你去厨房需要经过有两扇门的走廊,这是一个糟糕的布局。互连的流程假定逻辑接近。如果一个模块中的流程需要来自另一个模块的信息,那么布局上应该保证数据的连续性。这一点必须提前考虑,这样用户就不必在晦涩的存储空间中寻找他们需要的信息。

图片

Illustration: Outcrowd

 

所有相关信息都应按重要到不重要的顺序进行分组,并就近放置。

 

5) 分离模块

没有人需要一个延伸到卧室的厨房。为了将一个模块与另一个模块分开,你需要负空间。确保从一开始就考虑到这一点:将负空间视为需要视觉平衡的设计元素的组合。

图片

Wingle

 

4. 功能:肌肉

功能和工具的数量由仪表盘的用途及其用户的关键目标决定。

要想自由活动,人类只需要两条腿,狗需要四条腿,蜘蛛需要八条腿。一个功能太多的仪表盘就像一条六条腿的狗一样,这有点令人毛骨悚然。

不要在控制面板上放置过多的工具。用户只需要手边有必要的东西。过多的可用工具会让人们感到困惑,并吓走他们,因为它看起来太复杂了。个性化总是比标准化好。

图片

Band

 

5.小组件:重要的器官

如果屏幕上有超过5到7个小组件,人们就很难理解内容。因此,我们的工作是让相关数据易读,但不过量。用户应该在几秒钟内理解他们所看到的内容。

数据可视化工具包括:

  • 表格
  • 图表
  • 示意图
  • 卡片
  • 指标
  • 地图
  • 图片
  • 分组
  • 筛选器
  • 列表
  • 选择树

图片

Activity

 

小组件的选择取决于仪表盘的用途和用户。想想以下几点:

  • 哪个组件能最好地显示一个特定的KPI?
  • 用户可以立即看到什么?
  • 哪个组件是用户最容易理解的?
  • 什么可以帮助用户更快地找到他们需要的东西?

选择易于理解和阅读的小组件。

这里是一个令人困惑的小组件的例子:

图片

想想主要的“目标”来吸引用户的注意力。例如,如果你的优先级是绩效目标,你应该使用数字;如果你需要比较值,用直线或柱状图会很好;为了激励团队,可以使用带有相关亮点的排行榜。

不正确选择的小组件或默认小组件模板可能会使用户混淆或导致他们误解数据。

最好的解决方案是分析和测试的结果。

图片

最好的小组件设计是极简和易于阅读的。例如,一个3D图表可能看起来令人印象深刻,但它占用了用户太多的注意力,最终证明会分散用户的注意力。这也适用于渐变、过度使用颜色和过多的细节。

 

6. 视觉设计:一般技巧

我们已经创建了仪表盘的思想和身体。唯一要做的就是皮肤——最外层。这可以根据优秀设计的基本原则来实现,但仍有一些新的需要注意的细节。

 

1) 简单

仪表盘应该像你喜欢工作的桌子一样干净:它必须只有必要的文件和工具,没有干扰。

图片

MEMO

 

2) 颜色

仪表盘颜色的选择必须有一个目的:尽可能清晰地显示信息。颜色跨度越大,就越难把数据展示清晰。所以不要让仪表盘的颜色过多。使用同一颜色的深浅是一个好的办法。

图片

首先要选择底色,然后是补色。每种颜色都必须有特定的用途。一种颜色可以用来组合元素,另一种颜色可以用来高亮。颜色还能体现一个元素是积极的还是消极的。

避免使用可能有负面含义的颜色。例如,在这个例子中,红色看起来像是代表坏的和不受欢迎的东西:

图片

如果仪表盘提供了可定制的颜色,确保所有可用的选择看起来都比较舒服。

选择颜色组合的一个好工具是Adobe color CC。

 

3) 突出

语义高亮应该与视觉高亮相对应。为了突出一个元素,你可以使用颜色(对比度,亮度),形状,大小,负空间等。

 

4) 可读性和数字格式化

这是确保视觉清晰度的重要因素:干净的布局,视觉层次,重点突出,对比元素,适当的字体,这些字体也必须具有对比性和易读性。

高精度的数字格式很难理解。最好把所有的数字都四舍五入,然后把较长的数字尾巴去掉。

 

7. 适应性

在实践中,当用户优先考虑桌面版本时,在移动版本之前创建网页版本是合理的。如果你的目标用户主要使用的是手机版本,那么你可以先从移动设备着手构建仪表盘,然后再开发桌面版本。

图片

Snap

 

总结

设计一个好的仪表盘不是一件容易的事情。我们把它比作人类的发展,因为它是一个很好的方式来呈现重要的东西。当你在设计仪表盘时,请不断地问自己:是否一切都已就绪?有多余的肢体吗?身体的各个部位协同工作吗?用户会喜欢这个结果吗?它有用吗?

正如你所看到的,视觉设计实际上是设计师最不应该担心的事情。

最后,彩云再分享一组常用的后台图表界面组件库,相信会对大家的日常设计工作有帮助,

图片

图片

图片

获取方式:关注公众号 ,后台回复关键词  后台组件 ,即可获得!

 

本文翻译已获得作者的正式授权。

 

原文地址:medium

作者:Erik Messaki

译文地址:彩云译设计(公众号)

译者:彩云Sky

转载请注明:学UI网》后台界面设计的7条原则(附常用图表组件库下载


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

                                                            微信图片_20210513163802.png

 

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

 

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

设计系统指南——搭建你的专属色彩系统

seo达人


想要搭建一套完整的设计系统,颜色是你需要最优先考虑的,我浏览了大量设计系统相关外文也下载了各类搭建完毕的设计系统文件,颜色永远是排名第一的考虑项。至于原因,就要提到颜色(后面会统称为色卡系统)在设计系统中所担任的角色及其意义。

另外,我基于figma搭建了个人博客,以期以更灵活的方式展示和分享内容,后续文章、设计系统资源都会在上面进行发布,大家可以收藏一波。

博客链接 点击此处

 

原文地址:UI中国

作者:南山可

 

转载请注明:学UI网》设计系统指南——搭建你的专属色彩系统


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

                                                            微信图片_20210513163802.png

 

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

 

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


6个潮流UI设计套件合集

seo达人



还在寻找好的UI设计套件吗?别急,今天小编给大家带来了6个潮流UI设计套件合集,每一个UI设计图层都经过精心设计,是很有创意,漂亮,精美的首屏设计,兼容photoshop,sketch,figma,xd,感兴趣的朋友快来跟小编看看吧!Macz.com提供下载

1.电商服饰衣帽电器购物应用UI套件

移动应用程序UI套件Shoppir,有组织的薰衣草团体,基于向量的元素,完全可定制,基于向量的元素,包括样式指南,Shoppir Ul套件与Figma、Sketch、让每个屏幕都采用高质量的矢量制作,易于定制。

2.潮流时尚创新版式首屏设计ui套件包

潮流时尚创新版式首屏设计ui套件包是应用在时尚设计,潮流UI设计,首屏设计的套件,每个图层都经过精心设计,是很有创意,漂亮,精美的首屏设计,兼容photoshop,sketch,figma,xd。

3.31屏美食烹饪食谱应用UI设计套件

31屏美食烹饪食谱应用UI设计套件是一款可定制组件所有屏幕都经过精心设计,图层调整,简单的设计,易于搭配,您可以根据需要进行编辑,图层很容易添加、替换或编辑,是非常时尚的一款UI设计套件,兼容的软件为sketch,figma,xd。

4.电子商务app应用UI套件

电子商务app应用UI套件是应用在手机上的Ecommerce商务应用,精心设计组织良好的图层,包含40多个操作系统屏幕,可以根据自己的喜好进行编制,兼容sketch软件,需要的朋友欢迎下载。

5.潮流时尚购物网站高级创意版式模版UI套件

潮流时尚购物网站高级创意版式模版UI套件是创制购物网站,时尚创意,高级创意的UI套件,各图层都已命名,您可以根据自己的需要进行编辑,创制属于风格特色的购物网站!

6.20屏深色高质量音乐应用IOS 14 UI设计模板

20屏深色高质量音乐应用IOS 14 UI设计模板是应用在音乐应用,iOS应用设计的深色模板,使用符号来创建草图文件,您只需单击一下就可以更改所有字体或颜色,轻松设计出漂亮的界面。



文章来源:百度  作者:MAC知识分享土土

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

                                                            微信图片_20210513163802.png

 

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

 

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





UI中国App UI设计大赛

seo达人




UI中国App UI设计大赛

 

  • 千呼万唤,UI中国App终于要来了!
  • 你想象中,TA应该什么样?
  • 无需辞藻华丽,你的创意就是利器。
  • 你想要什么样,就让TA什么样,
  • 这一次,做一回自己的甲方爸爸!
  • 一切准备就绪,U你来!

 

大赛时间

作品征集:2019.3.5-2019.4.7

作品评审:2019.4.8-2019.4.10

初赛公布:2019.4.11

决赛评选:2019.4.12-2019.4.17

最终公布:2019.4.18

 

  • 本次赛事分为2个阶段,4月11日初赛公布16个获奖选手,并公布优秀奖和三等奖,其余3人进入决赛,并在决赛评选阶段补充最后2个页面设计,4月18日公布最终一、二等奖结果。

 

奖项设置

一等奖(1名)

千呼万唤,U你来!| UI中国App UI设计大赛

 

二等奖(2名)

千呼万唤,U你来!| UI中国App UI设计大赛

 

三等奖(3名)

千呼万唤,U你来!| UI中国App UI设计大赛

 

优秀奖(10名)

千呼万唤,U你来!| UI中国App UI设计大赛

 

参与本次大赛的设计师均可以获得:

  • ProtoPie 2周使用码
  • 2个月墨刀2人版VIP会员
  • 摹客iDoc高级版本3个月使用授权
  • “字加”内字体参赛免费使用权限(仅限本赛)

 

 

大赛评委

千呼万唤,U你来!| UI中国App UI设计大赛

 

 

要求

  • 1.设计规范:参赛设计师需整理设计规范;
  • 2.尺寸:1125X2436px;
  • 3.元素尺寸: App设计中所用封面图、banner等尺寸比例须和web端保持一致,下文有标注说明,如有遗漏可在大赛指定交流群反馈,亦可通过浏览器的「检查」功能查看;
  • 4.字体要求:字体使用安卓或iPhone适配字体;
  • 5.页面数量要求:小红点标记的关键页面必须设计,完成剩余会加分;
  • 6.交互原则:参赛设计师可以在保证功能和主要元素不变的情况下对交互、动效细节自由发挥,但大的交互改变有影响评奖的风险,需和主办方产品负责人商讨。大赛交流QQ群:700240526
  • 7.待定功能:第三个导航栏菜单——「灵感」由于时间关系原型待定,将于决赛阶段公布,但导航菜单设计需按5个菜单设计。参赛设计师亦可自由发挥,为自己设计喜欢的功能
  • 8.注意事项:注意不要遗漏空页面,网络异常,加载动画等设计;
  • 9.设计工具:工具不限(建议使用Sketch)。
  • 10.交互原型链接https://free.modao.cc/app/2a1595bec25f6300202d33f20da42291bdb1edbd

活动规则

  • 1.作品截稿时间为2019 年4月7日23:59:59,请参赛者及时上传参赛作品,逾期则不能参加评选。
  • 2.本次赛事分为2个阶段,4月11日初赛公布16个获奖选手,并公布优秀奖和三等奖,其余3人进入决赛,并在决赛评选阶段补充最后2个页面设计,4月18日公布最终一、二等奖结果。
  • 3.参赛者在提交作品前请确保已经阅读并且愿意遵守相关比赛规则,参赛者提交的参赛作品均须未被商用且未授权他人使用,必须为参赛者为本次大赛单独原创且未经发表的作品,参赛者须保证未自行使用或许可任何第三方使用参赛作品,未转让参赛作品的任何权益或在其上设置任何权利负担或限制,否则主办方及承办方有权取消参赛者的参赛资格,并要求要求参赛者返还所获奖金以及赔偿主办方和承办方由此遭受的所有损失。
  • 4.如多人合作,需征得所有合作者同意并标明所有合作者姓名;同一用户名可上传多组不同参赛作品,评选结果以作品为单位,即同一用户名可获得多个奖项;同一作品提交多次的,以最晚提交作品为准。
  • 5.一等奖和二等奖获得者,需配合主办方签署作品著作权转让协议,主办方无须就该作品另行向参赛者或任何第三方支付任何费用、报酬或款项,且参赛者保证不再自行使用或提供或转让给任何其他第三方使用。
  • 6.三等奖及优秀奖获得者需配合主办方签署作品著作权共享协议,主办方无须就该作品另行向参赛者或任何第三方支付任何费用。
  • 7.其他参赛作品的版权仍归参赛者所有。主办方拥有对所有参赛作品进行展示、报道、宣传及用于市场活动的权利,且无需向作者支付任何费用。
  • 8.获奖通知将在最终结果公布后5个工作日内通过邮件方式发送至获奖选手的UI中国注册邮箱,手机号码注册的选手请在个人资料页绑定邮箱。
  • 9.获奖选手请在3个工作日内回复获奖通知,并根据邮件内容,配合主办方完成获奖作品源文件收集、作品作品知识产权共享协议签署、奖金奖品发放等工作。若获奖选手在限定时间内对获奖通知未做回应或提供相关源文件,则视为放弃奖项,根据排名依次递补。

参赛网址:https://activity.ui.cn/uiapp


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

                                                            微信图片_20210513163802.png

 

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

 

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





watchOS App 设计指南

资深UI设计者

随着技术的发展,可穿戴设备正在从实验室走向市场,从独立使用到多平台联动,从注重基于硬件的产品功能到注重基于用户数据的应用与服务。Apple Watch 搭载的 watchOS 则是可穿戴设备用操作系统中的翘楚。相较于 iOS、Android 及网页,watchOS 对于大多数设计师来说都是一个相对陌生的领域。在这篇文章中,我们将为大家分享设计 watchOS app 中的要点。

本期提纲:

  • 设计原则
  • 手势
  • 触觉反馈
  • 跨设备交互
  • 页面布局
  • 字体体系
  • 色彩体系
  • UI 组件
  • 通知
  • 结语

设计原则

watchOS 有 3 项设计原则:

  • 交互轻量(Lightweight Interactions)
  • 软硬件一体(Holistic Design)
  • 面向个人(Personal Communication)
1. 交互轻量

碎片化的使用时间、较小的屏幕空间,这些客观条件要求 watchOS 上的设计要足够「短平快」。

「短」常体现于精简的信息量及大尺寸的文本。如在「体能训练」app 中,对关键运动情况的说明不仅言简意赅,还用了最大的 large title 这一文本样式。仅需一瞥,心中就有数了。

微信官方出品! 超详细的 watchOS App 设计指南

「平」体现在扁平的信息架构。相对于其他平台,watchOS 上的 app 一般仅使用以下 2 种相对简单的信息架构类型:

层级型(Hierarchical Navigation)

微信官方出品! 超详细的 watchOS App 设计指南

分页型(Pagebased navigation)

微信官方出品! 超详细的 watchOS App 设计指南

在实际运用场景中,这两个类型还可以混用。如「体能训练」app 就用了混合的信息架构类型,但仍保证了仅有 2 层深度的扁平要求。

微信官方出品! 超详细的 watchOS App 设计指南

「快」则在于被拆解为小块的微任务,如 iOS 中的「音乐」,在 watchOS 中被拆解为「音乐」「广播」「播放中」3 个 app,其对应着浏览音乐库、浏览广播、控制音频播放这 3 个微任务。这一思路与「桌面应用的移动化」非常相似。

2. 软硬件一体

承载 watchOS 的 Apple Watch 有着极高水准的工业设计,而与 UI 最为相关的则是其屏幕及 Bezel。其中,Bezel 指的是 Apple Watch 屏幕四周环绕的黑色边框,经特殊工艺处理,其边缘如水滴般饱满。在强光照射下,更能呈现出其精致质感。这很难让人不想到 Apple 经典的 Aqua 风格。

为了能将其设计美学在 UI 中得到继承,我们建议采取以下设计策略:

纯黑背景

Apple Watch 采用的是 OLED 材质的屏幕,这种材质的屏幕在展示纯黑(#000000)时不会发光,也更省电。若在设计中使用纯黑的背景,背景就会与 Bezel 融为一体、UI 元素直接「镶嵌」于表盘,可谓浑然天成。

平滑圆角

无论是 Bezel 还是屏幕,均有着圆润的设计语言。因此,在 UI 中使用与物理环境相匹配的圆角样式,可使软硬件更加契合。watchOS 中的圆角使用可以比 iOS 中更大胆。如在 iOS 中,按钮的常规圆角值为 8pt,watchOS 中则增大为 9pt。同时,watchOS 还有大量全圆角的样式,就连应用图标都是正圆。

微信官方出品! 超详细的 watchOS App 设计指南

微信 Apple Watch 版中,聊天页面的 3 个回复按钮更是使用了正圆样式,不仅减少了被屏幕圆角裁切的可能,更为应用赋予了浓郁的 watchOS 平台特色。

微信官方出品! 超详细的 watchOS App 设计指南

全宽元素

因 Bezel 的存在,当前的 Apple Watch 还不能称为真正的全面屏。如果可能,将按钮、列表项等元素横向撑满屏幕,不仅能从视觉感知上尽可能增加无框感(frameless),还能充分利用原本就比较紧缺的屏幕空间。

微信官方出品! 超详细的 watchOS App 设计指南

3. 面向个人

Apple Watch 是非常个人化的设备,我们需要为用户的隐私做足够缜密的考量。如 Apple Watch Series 5 及更新机型的屏幕有着常亮显示(AlwaysOn)功能,当用户抓着地铁扶手或伏案工作时,屏幕上常亮显示的信息就可能被旁人看到。因此,我们要为常量状态页面中的个人信息进行脱敏处理。

但同时,作为基本随时贴身的设备,减少对用户无谓的打扰也是设计师需要注意的基本要求。关于这方面的设计,大家可参阅本公众号关于宁静科技(Calm Technology)的文章。

总的来看,watchOS 的设计原则可简要总结为:在物理性质上,强调「软硬件一体」;在交互表达上,规避信息过载、注重信息安全。

手势

1. 常规手势

watchOS 支持以下手势:

  • 轻点(Tap):单指轻触屏幕
  • 拖移(Drag):单指向上、向下、向左或向右轻扫过屏幕
  • 轻扫(Swipe):单指移过屏幕但不抬起
  • 双击(Double Tap)

受限于较小的屏幕,多点触控是不被支持的。如 iOS 中常用的双指捏合(Pinch)及双指旋转(Rotate)。

2. 边缘滑动(Edge Swipe)

在小而圆滑的 Apple Watch 的屏幕上,边缘滑动是更加便捷的。其中,上、下、左侧的边缘滑动已被系统定义,分别为打开通知中心、打开控制中心、返回。而右侧的边缘滑动则尚未被系统占用,这给了设计师一个自由发挥的空间。

微信官方出品! 超详细的 watchOS App 设计指南

3. 实体按钮

数码表冠(Digital Crown)

数码表冠是非常适合在手腕上与智能设备交互的实体。通过旋转数码表冠,用户可以实现页面、列表的滚动,滚动速率收放自如。

我们还可以将滚动数码表冠所产生的交互效果进行灵活的设计。如:

  • 在播放音频的场景中,滚动数码表冠以调节音量
  • 在浏览图片的场景中,滚动数码表冠以缩放图片
  • 在编辑表盘的场景中,滚动数码表冠以实现编辑对象的切换(类似于点按 macOS 中的 Tab)
  • 在查阅弹窗的场景中,向下滚动数码表冠以关闭弹窗

侧边按钮

目前,侧边按钮相关的交互属系统级,不可自定义:按下侧边按钮,可以调出程序坞;双击侧边按钮,可使用快捷交通卡。

4. Force Touch

Force Touch 是较旧版本的 watchOS 中的特殊手势,一般情况下可呼出上下文菜单(Context Menu),可以简单理解为 iOS 中的 3D Touch。但因 Force Touch 这一手势的可发现性较弱,目前已用长按(Long Press)来代替之。

微信官方出品! 超详细的 watchOS App 设计指南

不过,目前又有了在 watchOS 中用双击(Double Tap)来替代长按的趋势,这是因为双击这一手势会更加轻巧一些。如在信息中,双击或长按消息气泡均可呼出点回选项。

触觉反馈

伴随着设备数量的增长,用户的注意力变得越来越稀缺。秉承 Calm Tech 的思想,设计师需要选用合适的反馈形式,来帮助用户将注意力进行有的放矢的合理分配。运用触觉这一边缘感知通道,是一个非常好的降噪思路。

得益于 Taptic Engine 的硬件支持,watchOS 的触觉反馈(Haptics)效果非常理想。虽然目前 watchOS 暂不支持自定义触觉反馈(在 iOS 中可通过 UIFeedbackGenerator 来自定义(fn)),但 watchOS 于系统层级提供了一组触觉反馈模版。我们需要对振动模式有着充分的理解,才能为关键的交互添加触动人心的触觉反馈。

1. 隐喻

触觉反馈与听觉反馈可以进行有机对应,因为从物理学的角度上来看,他们都是由物体振动产生的。所以,在设计触觉反馈时,我们可以借助声音设计的经验来辅助思考。

想象这样一支交响曲,悠扬的长笛声缓缓地奏响(Ascending),拉开了风和日丽的一天。提琴、单簧管也徐徐加入(Flat),正如柳树的嫩芽在春风中飘扬。长笛独奏加快了节拍,曲调变得活泼起来(Steady),原来是草坪里的小兔子探出了脑袋……最后,伴随着音乐的渐弱,美好的一天结束了(Descending)。

在音乐作品中,作曲家通过不同的节拍、旋律、音色,来构建出不同的听感。如:

  • Ascending
  • Flat
  • Descending
  • Steady
  • Staggered

微信官方出品! 超详细的 watchOS App 设计指南

转译到触觉中,我们也可以通过不同参数的调节,来构建承载不同信息内容的触觉反馈。

2. 参数

Apple 官方给到了如下 2 个设计参数:

  • 锐度(Sharpness)
  • 烈度(Intensity)

我们对官方的参数进行进一步的解构,并参考作曲家的做法,给到了如下 3 个参数来描述触觉反馈:

  • 节奏(Granularity)
  • 强弱(Amplitude)
  • 质感(Timbre)

微信官方出品! 超详细的 watchOS App 设计指南

其中,质感指的是振动脉冲的锐度。锐度越高,每个振动脉冲就能感知得越清晰。

3. 展望

相信在未来的系统版本中,无法自定义触觉反馈的限制将被逐步解除。现市面上已经出现了诸如 Lofelt 一类面向触觉反馈的专业设计用程序,设计师们可以前往小试牛刀。

跨设备交互

Apple 的产品拥有着得天独厚的生态优势,watchOS 也不例外。类似于 macOS 及 iOS,watchOS 也支持「接力」功能(Handoff)。如:在 watchOS 中使用「邮件」app 回复电子邮件时,可以通过「接力」切换至 iOS 中以使用更大的屏幕进行输入。

同时,「接力」不仅能在 app 间生效,也能在网站和 app 间生效。如在 macOS 中使用 Safari 浏览你的网站的用户在离开 Mac 设备后,Apple Watch 会提示用户是否继续在 watchOS 中使用你的 watchOS app。这给我们的设计带来了更多的可能。

巧妙运用 watchOS 的「接力」能力,我们能构建跨设备交互的无缝体验。

页面布局

市面上的 Apple Watch 有着 4 种不同的屏幕规格:30mm、40mm、42mm 及 44mm。其中,40mm、44mm 是较新设备的屏幕规格,也是设计过程中应重点关注的对象。下面,我们以最大的 44mm 的屏幕规格来进行设计解析。

1. Display Corners

指的是屏幕四角无法展示内容的区域,契合于 Apple Watch 的屏幕物理边界。设计时,需避免在这些部位放置内容。

微信官方出品! 超详细的 watchOS App 设计指南

2. Clear Space Under Status Bar

指起始状态下,界面内元素与位于屏幕顶部 status bar 的间距。另外,在 watchOS 中,status bar 是常驻的。

微信官方出品! 超详细的 watchOS App 设计指南

3. Copy Safe Area

文本的安全展示范围。纵向来看,上距 status bar 5pt 的 clear space,下接 display corners。

微信官方出品! 超详细的 watchOS App 设计指南

4. Fullwidth1 Element Safe Area

指除文本外其他元素的安全展示范围,横向撑满了整个屏幕,纵向避开了 display corners。这里对应了上文推荐大家使用的「全宽元素」策略。

微信官方出品! 超详细的 watchOS App 设计指南

40mm 的页面布局与 44mm 的类似,只是数值有所不同。对于 38mm、40mm 的页面布局,因没有 display corners 的引入,布局方式非常简单,这里便不展开叙述了。

字体体系

1. 西文环境

在西文环境中,watchOS 默认使用 SF Compact,也可以选用 SF Compact Rounded(SF Compact 的衍生字体)。值得注意的是,SF Compact 这一字体需视文本的大小来选用具体类别:

  • 字号小于等于 19pt 时,使用 SF Compact Text
  • 其他场景,使用 SF Compact Display

在实际开发过程中,配合使用 Dynamic Type 技术,UI 中的文本可以随用户的设置动态调节:无论是字重、字号、字间距还是行高,均会有一一对应的调整。

2. 中文环境

在中文环境中,watchOS 默认使用苹方字体。西文环境中 SF Compact Text 和 SF Compact Display 使用的细致判定,在中文环境中暂无。

3. 字体适配

Apple 官方在不同的屏幕尺寸下使用了不同的字体阶梯:

  • Small(用于 38mm)
  • Large(用于 40mm、42mm)
  • xLarge(用于 44mm)

微信官方出品! 超详细的 watchOS App 设计指南

不过,我们推荐在实际设计过程中选用一个字体阶梯即可。

为论证仅使用一个字体阶梯的合理性,我们需要引入「弧分」的概念。弧分是一种用来描述相对尺寸的单位,而弧分值指的是观测者眼睛与被观测物的夹角。由于使用了角度来计数,在定义字体尺寸时就可以忽略物体的距离。但无论用户使用哪种屏幕大小的 watchOS 设备,其舒适的抬臂姿势是相对固定的,即用户眼睛距离 watchOS 设备的距离是相对固定的。因此,只有相同尺寸的大小的字体才能保证相同的弧分。

选用一个字体阶梯的另一个好处体现在多屏幕尺寸适配中。若严格遵循 Apple 官方的处理方法,设计师需要输出 4 套视觉标注才能完成设计;若使用一个字体阶梯,我们仅需在设计中标注好自适应规则即可。倘若未来出现了更多的屏幕尺寸,我们的方法会显得更加自如。

4. 推导方法

为了不重复造轮子,我们推荐使用你已有的 iOS app 设计中的字体体系为基础,来推导出 watchOS app 的字体体系。具体过程如下:

  • 整理好你的 iOS app 中的字体系统;
  • 剔除 Callout、Subhead 这类在 watchOS 中不需要的字体样式(Style);
  • 适当地增加除 Headline、Body 以外字体样式的字号(Size);
  • 适当地减少所有字体样式的行高(Leading);
  • 依据所使用的字体调整字距(Tracking)。

我们按照上述方法,推导出了微信 Apple Watch 版的字体体系:

微信官方出品! 超详细的 watchOS App 设计指南

色彩体系

目前,iOS 及 macOS 共用一套色彩体系。watchOS 及 tvOS 因使用场景、硬件性质及美学理念的差异,其色彩体系需要进行差异化推导。

watchOS 色彩体系分为以下 2 个部分:

微信官方出品! 超详细的 watchOS App 设计指南

1. Global Tint Colors

基本等同于 iOS 中浅色模式(Light Mode)的颜色。在实际设计过程中可以直接迁移。

2. Additional Colors

它是 Global Tint Colors 的延伸,一般用于可交互元素的底版,如「体能训练」中的按钮。通过为 Global Tint Colors 添加不透明度即可生成一套相对应的 Additional Colors。不透明度数值的范围推荐在 14%~17% 之间,并遵循「亮度(Brightness)越高,不透明度越低」的原则。

3. Semantic Colors

语义化颜色指的是根据用途来描述颜色,而不是直接描述色值。虽然在 watchOS 中没有深浅色模式的区分,但色彩的语义化仍能帮助我们科学而谨慎地用色。

为了方便在设计过程中使用语义化颜色,我们推荐在 Sketch 中使用颜色变量(Color Variable)进行底层色彩体系构建。如下图所示,是微信 Apple Watch 版中非常常用的三个颜色变量:

微信官方出品! 超详细的 watchOS App 设计指南

UI 组件

watchOS 中的 UI 元素与 iOS 差别不大,设计师在拿到 UI Kit 后应该都能快速上手。这里仅提出 4 个比较特殊的组件进行简述。

1. Lists and Tables

微信官方出品! 超详细的 watchOS App 设计指南

Lists 和 Tables 都是纵向排列以展示内容的元素。简单来说,Lists 能承载更多的样式及交互行为,如:

  • Carousel Style(类似于古早 iOS 中的 Cover Flow)
  • 滑动交互(Swipe)
  • 整理(Reorder)

2. 按钮

在 watchOS 中,常见的按钮样式有:

  • 标准圆角矩形按钮
  • 全圆角按钮

如何判定该使用哪种样式呢?这取决于按钮所在页面是否需要滚动才能展现所有内容:

  • 若页面需滚动(Scrolling Views),使用标准圆角矩形按钮
  • 若页面无需滚动(Nonscrolling Views),则使用全圆角按钮

微信官方出品! 超详细的 watchOS App 设计指南

以上判定方式的原理是,只有通过标准圆角矩形按钮,才会在屏幕中呈现出「按钮的一部分被盖住」的视觉效果,进而暗示用户下面还有内容。这一判定实为巧妙,但在实际开发实现的过程中却很难做判定。因此,我们推荐默认使用标准圆角矩形按钮。

通知

在 watchOS 中,通知被分为 3 类:

1. Short Look

微信官方出品! 超详细的 watchOS App 设计指南

Short Look 指的是收到通知的那一刻立即弹出的模态页面,其的持续时间很短,是为「轻轻一瞥」的行为设计的。所以,我们要保证 Short Look 中的内容足够简短。

同时,在配有常亮显示的机型中,Short Look 会在尚未解锁的情况下展示。因此,我们应避免在 Short Look 中展示敏感信息。

2. Long Look

可以将 Long Look 理解为 Short Look 的详情。它由以下部分组成:

  • App Icon and Name
  • Sash
  • 内容区
  • Action Buttons
  • Dismiss Buttons

微信官方出品! 超详细的 watchOS App 设计指南

其中,内容区不仅仅可用于展示信息,我们还可以在内容区放置一些简单的交互元素,如在座位预订 watchOS app 推送的内容区中,就可以放置选择就餐人数的 Sequence Picker。

3. 应用内通知

这部分留给我们的发挥空间较大,恕不展开阐述。

结语

无论你是否会真正地开展面向 watchOS 的设计,了解 watchOS 中的设计方法及其背后的推导过程都是非常有价值的。可以看到,无论是设计原则,还是字体、色彩体系的推导,都始终贯穿着普适的设计思维。我们相信你能从中获得一些启发。同时,微信 Apple Watch 版已于近期更新,欢迎大家下载体验。


文章来源:优设 作者:We-Design

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



30个启发性的3D图形Web设计概念

ui设计分享达人

在平面插图趋势大放异彩之后,3D图形又回到了主流,并在Web和移动用户界面,插图,动画视频和广告图形中表现出明亮而多样化的性能。最近几年,在不同的团队和媒体资源对UI设计趋势的所有众多评论中都提到了3D艺术和动画。因此,越来越多的设计师将它们集成到网站和登录页面中。

以上为Web端设计中的3D的图形运用,希望可以给大家启发,共勉。

文章来源:站酷  作者:对啊设计君

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

新项目设计时一定会遇到的5个盲区

资深UI设计者

最近负责的新项目快上线了(感觉我好像一直在做 0-1),给大家总结了5个一定会遇到的新项目盲区及最新的解法,希望能帮助大家在交付开发前就顺利完成设计输出。


关于苹果账户登录的硬性规定

2020 年 4 月后,我们在设计 iOS 登录界面的时候都知道必须加上苹果官方强行要求的 Apple 账户登录按钮,但关于这个按钮的设计规范其实有比较硬性的规定,没有注意的话到了开发还原的时候就容易踩坑。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

在国内的 iOS 登录设计中通常突出的主流登录方式是“微信”,手机登录以及其他的第三方登录都会以更弱一点的视觉方式呈现。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

苹果官方是允许对 Apple 账户登录按钮进行一定的自定义的,其中就包含将其弱化为一个圆形的图标按钮,只是图标与圆形按钮的大小比例是官方固定的比例(这个大家直接下载官方提供的图标,它是自带留白的区域的,保持图标与高宽一致就符合要求了)。

而国外的 iOS 登录设计中通常没有那么多的第三方登录方式并存,主要的“Facebook”与手机登录通常会与 Apple 账户登录按钮同一级出现在界面中。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

这个时候需要特别注意的是,苹果官方对于这种大按钮的限制主要在于 3 个部分:

  • 按钮的高度需要等于图标的宽高(图标官方有提供下载,已经是自带留白区域的)
  • 按钮的高度需要与中间的文案成一定比例(字体是按钮高度的 43%,比如 44 的高度配 19 的字)
  • 图标离左侧最小间距需要超过按钮高度的 10%

剩下的按钮样式,比如颜色和描边也非常有限,只可以使用白色填充黑色描边与纯黑色底这 2 种。

关于安卓启动图标可带动效了

还记的早几年做安卓项目的时候上架应用商店的启动图标输出还是和 iOS 差异不大的,基本就是尺寸换换。这次输出启动图标,被安卓的开发大大告知,安卓可以出这种带动效效果的启动图标了,它的原理和效果,如下图:

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

实现这个效果的设计配合输出也很简单,只需要整理一下的具体启动图标输出就可以:

1. 启动图标(前景,不带背景的)-108dp(324px)

当然以上仅针对纯色背景,可以与 logo 主体轻易分隔的启动图标。如果是混为一体的话就需要调整输出方式为以下:

  • 启动图标(前景,不带背景的)-108dp(324px)
  • 启动图标(背景)-108dp(324px)

关于全屏切图的压缩限制

这次新项目又遇到了开发中改稿的问题,大部分都因为全屏的背景图切图大小问题。

个别全屏视觉的界面,比如闪屏、登录页、音视频语音等等,我们通常设计时不考虑切图的大小问题就会比较放飞去设计。

但实际情况是一张全屏的花色 3 倍 png 切图基本都在 2M 左右,就算把压缩率提到 80%+(市面上大部分压缩软件的压缩率都很有限,比如大家常用的 tinypng、pp 鸭等),就算你重复压缩,也有至少 200 多 KB,远远超出开发 100k 以内的切图大小限制。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

所以不得不要求我们在输出格式的时候抛弃 png 格式,启用 JPG。

不过实际设计时候我们可能仍然会遇到不能用 JPG,必须用 PNG 格式的情况(透明度蒙层),那么建议大家可以尝试以下 2 个小技巧:

  • 尽量使用纯色背景设计,这样背景图可以用代码来写,主体切图大小可以想对控制小一些。
  • 如果还是需要使用花色背景,建议可以尝试高斯模糊的花色背景,这样开发可以直接用 1 倍图进行拉伸,也可以有效控制切图大小。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

最后不想屈服于样式限制的铁汁,一定记得提前输出格式大小康康会不会超标严重(尽量控制在 100k 以内),不然无法落地再好看也没有用咯。

关于动效到底导出什么格式不坑爹

目前关于移动端界面里个别小动效的导出比较主流的几种格式是:Gif、逐帧图、Lottie(Jason)、Webp、Apng。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

Gif、逐帧、包括前几年流行的 Lottie 大家应该都比较熟悉了,这里稍微科普 2 个陌生一点的格式:

  • Apng:一个 PNG 格式的位图动画格式图片
  • Webp:2010 年 Google 推出的全部通吃的图片格式(可代替 Jpg、gif、png)

目前我觉得性价比最高的就是 webp,它的优势主要在于:

  • 压缩率极大提升,同分辨率的 webp 比 gif 要小很多
  • 支持位图、支持支持 Alpha 透明和 24-bit 颜色数、支持 3D 翻转(这些 GIf 和 Lottie 都有限制),也就是不会出现毛边啦、变色一类的坑爹情况
  • iOS、安卓都支持(比如同样高性价比的 Apng 只能用于 iOS 端)

唯一的 2 个问题在于:

  • webp 目前只兼容 Chrome 和 Opera 浏览器,其它浏览器不支持。不过基本我们都应用于移动端应用,所以浏览器兼容对这个影响应该还好
  • AE、PS 等各类动效设计的软件无法直接导出 webp 格式,需要通过插件或其他第三方软件转换。

我度娘过一些导出 webp 的方式都不是很好用,问了我司的动效设计师,推荐一个比较简单靠谱的方式分享给大家:

1. 先从 AE 导出逐帧图(记得需要循环的动效做好循环)

不知道如何到逐帧图的看这里:渲染→渲染设置→格式→选择“PNG”序列→导出即可

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

2.下载 isparta

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

3. 直接将 AE 导出的逐帧图文件包拖到 isparta 里导出 webp 格式(可选)

关于切图标注协作方式谁家强

设计交付的协同平台现在市面上很多,很多大厂也有自己内部的协同平台来承载设计交付,俺们猪厂用的叫 dbox(非常滴不好用),在强推之下开始申请经费改用 Figma 了。之前为了更换协同平台,把交付的协同平台都做了一番调研,这里给大家直接看表格吧。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

看完图大家就会发现除了 Figma 大家的使用情况不会差很多,差的主要还是钱。总的来说的建议就是,如果已经从sketch改用Figma的土豪团队就可以直接分享Figma文件链接给开发搞定切图标注以及文件存档这2件事儿了。

如果还在用 sketch 和 XD 的铁汁,交付型的协同平台我个人比较推荐 Zeplin,虽然有的人会说它服务器在国外很卡,我觉得其实还好吧,同时 Zeplin 近几年还解决了 Win 系统适配的问题。

然后最后小吐槽下腾讯的 Xshow。一开始我觉得它是最香的,因为高清度、流畅度到美感几乎都比较完美。一直到我发现了它居然是个完全开放的交付协作平台,也就是别人知道你的账户 ID 之后就可以搜到你并看到你的所有项目文件,瞬间安全系数降为 0。作为一个明显对标企业级的协作平台这么疯狂的植入社交功能,到底是企鹅的社交基因太强大还是怎么肥四?

文章来源:优设   作者:Nana的设计锦囊

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


净水机设备界面设计--赏析

前端达人

收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏


转自:站酷

作者:许小瓶


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

日历

链接

个人资料

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

存档