APP界面设计文章及欣赏

留白设计和UI设计准则

博博

接上一篇文章叙述留白设计准则以及UI设计的排版准则,希望在这个隔离的日子里,大家一起努力克服疫情,加油!






    • 文章来源:站酷   作者:赤鲸

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

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

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


UI设计中色彩理论和实用的调色板指南

博博

颜色是感知的问题。每种颜色代表不同的定义波长,但是我们每个人对颜色的感知都取决于我们的感知能力。

颜色是感知的问题。每种颜色代表不同的定义波长,但是我们每个人对颜色的感知都取决于我们的感知能力。此外,我们都有与颜色相关的不同文化或背景关联。

有很多很棒的文章和视频,介绍了色彩理论和色轮,还有许多用于生成调色板的工具。但是有时您会在实践中发现这些文章不太好用,颜色组合不完全匹配或所生成的调色板在您的项目环境中效果不佳。

所以你会怎么做?您如何开始思考和查看颜色,使它们更易于选择以及调整您的需求?

诸如互补和单色,饱和度和亮度之类的色彩理论术语并没有吸引他们。

因此,我开始以不同的方式分解色彩,方法是从绘画和室内设计等传统视觉和图形艺术中汲取灵感,并以对我们作为UI设计师所做的方式有意义的方式对其进行取景。

匹配调色板并平衡配色方案

也许您已经按照所有的色彩协调和颜色理论教程进行了准备,并生成了一个免费的调色板,但是您注意到这些颜色似乎不太匹配,也许它们看起来比较粗糙或不专业。

创建良好的配色方案就是与色调,阴影和温度匹配的平衡。要在设计应用程序中成功做到这一点,您需知道要拉动哪些杠杆。

色彩理论提供了一些公式,可用于启动调色板,这是理解调色板的重要基础。但是创建漂亮的调色板不仅与这些公式有关,还与平衡色调,阴影和温度有关。

这些是我们可以推拉的“杠杆”,可以为我们的UI设计实现更加平衡和独特的颜色组合。

因此,首先,回顾一下这些杠杆的作用。

色相是用于描述所见到的每种色调的通用术语。

饱和度指的是我们正在查看的特定颜色的主要颜色系列。白色,黑色和灰色通常被称为无彩色。

明度也指颜色的明暗程度。色调相同的颜色,明暗可能不同。例如,绛红色和粉红色都含有红色,但前者显暗,后者显亮。

色温-色温更多地是关于我们如何感知所看到的色相。并且我们倾向于将它们分为暖色和冷色。

暖色-通常是通过增加色调中的红色或黄色来获得的颜色。这些往往会唤起激情,舒适,活力和运动的感觉。他们使我们想起阳光和热量。

冷色-是增加蓝色和绿色的颜色。这些趋向于唤起,清新,冬天,静止,平静。他们使我们想起冰,雪和水。

色彩模型和色彩空间

要获得一些技术知识,您可能听说过3种不同的颜色模型,这将有助于我们更好地理解光和颜色的协同作用。

CMYK使用减法混色。它指的是光线反射物理白页的方式。颜色的重叠导致黑色。由于页面无法投射光线并向您发光,因此页面必须具有反射光。将这些颜色混合在一起就可以掩盖页面的白色,从而减少了可以反射的光量。

RGB称为光的加法混合。它指的是数字屏幕向我们投射光的方式。您在全亮度下的颜色会导致我们看到白色的重叠。有点像被明亮的泛光灯所蒙蔽。

HSB-代表色相,饱和度和明度

HSB颜色模型为我们提供了放射状的颜色,其中我们具有一定范围的色相,饱和度和明度值。

这就是我们的眼睛和大脑如何解释颜色HSB就是我们的眼睛所看到的一切,而与它是从屏幕还是在纸上投射的光线无关。

因此,出于为UI设计选择颜色的目的,我们将使用HSB颜色模型。

颜色属性

您经常会听到两种较大的颜色分组。暖色和冷色。

暖色通常被认为是主动色,这意味着它们会引起更多关注。

冷色通常被认为更被动且后退一些。

根据色彩的丰富程度和它们如何平衡,您可以使柔和的暖色充当被动元素,而更鲜艳的冷色则扮演主动角色。

现在,您了解了颜色如何在屏幕上显示以及如何设置我们的设计应用程序。让我们谈谈如何在我们的设计软件中使用和推动这些杠杆,并平衡我们的配色方案和调色板。

为了得出这些不同的颜色类别,我们将集中于推和拉色调,饱和度和亮度(HSB)的控制杆。

在数字屏幕上,我发现有一个公式和安全范围的饱和度和亮度,可以每次为每个类别创建一个完美的调色板。

为简化起见,我将主要颜色分为6种通常可以识别的主要颜色类别。这些反映了我们在日常生活中谈论颜色时通常倾向于指代颜色的方式:

1.宝石色调

S:83-73,B:76-56

这些颜色是饱和度很高的色调,以宝石命名,包括宝石蓝,宝石红,紫水晶紫色,柠檬黄和翠绿色。想一想红色宝石项链或皇家紫色的魅力。这些颜色富丽堂皇,深沉,并赋予豪华感。

2.粉彩

S:14-21,B:89-96

柔和的颜色属于浅色系。粉色,淡紫色和淡蓝色是常用的柔和色。这个家庭的颜色通常被描述为“舒缓”。我们通过降低饱和度和调整色彩来创建这些颜色。

3.大地色调

S:36-41,B:77-36

这些是自然界中常见的颜色。可以通过将纯色与白色,黑色或灰色相结合来创建它们。从广义上讲,这些是中性色。它们受到树木,森林,海洋和天空的色调的影响,被用以模仿自然色彩。我们通过增加饱和度和调整色调来创建大地色调。

4.中立

S:1-10,B:99-70

纯中性色包括黑色,白色,米色和所有灰色,而接近中性色则包括棕色,棕褐色和深色。这些是通过使色彩去饱和来创建的。它们可以与以上任何类别配对以创造平衡。我们通过降低饱和度并调整色调,色调和阴影来创建中性色。

5.荧光灯/霓虹灯

S:100-63,B:100-82

在物理世界中,这是由霓虹灯管或紫外线反应涂料的颜色创造的,但在数字世界中,我们可以通过将非常明亮和高度饱和的颜色应用于我们的设计来获得相同的效果。我们通过增加亮度和色调来创建它们。

6.阴影

S:0-0,B:0-100

两种主要的阴影是黑色和白色,其他阴影也包括不同程度的灰色。

UI颜色组合

最佳的用户界面设计结合使用一种颜色类别以及中性和阴影。

您实际上只需要这些类别中的1或2种颜色即可设计参与整个用户界面。

我们为什么不这样谈论颜色

作为数字设计师,我们倾向于避免给这些配色方案分类,因为术语似乎是为混合自然色彩的画家,印刷设计师和室内设计师保留的。但是从实际的角度来看,当我们仍在学习色彩理论并使我们的眼睛习惯于选择可以一起使用的色彩时,我发现以这种方式引用色彩在UI和数字屏幕设计中可以非常有用。

这不是一门精确的科学,但是您会看到如何以这种方式思考颜色并掌握一些杠杆和数字,以指导您帮助用户创建更令人愉悦和精致的调色板。

理解色彩理论的基础和原理很重要,特别是当涉及到实际应用时,它就显得尤为重要。引用不同的学科并找到对我们有用的类比可以带来很大的不同。

作为UI / UX设计师,最重要的是,无论您如何去实现,您都能够有效地使用颜色来传达信息并为用户创造最佳体验。


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

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

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

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


UI 设计:如何做到理性?

博博

有哪些理性,以及如何做到理性



UI 设计,是用理性方法,来满足需求,并带来美学享受。


本篇探讨 UI 设计如何做到理性。全文共有三部分:有哪些理性,如何做到理性,止步于理性吗。



01 UI 设计:有哪些理性?


UI 设计主要有四类理性:基本原则,基础知识,风格设定,风格把控。四类理性有一个共同核心:活学活用



1 基本原则


共有四个基本原则:对齐,对比,亲密,重复。



先说对齐


秩序产生美。对齐作为一种基本秩序,主要事关整齐美观阅读体验


对齐一般分左对齐、右对齐和居中对齐。


从阅读体验角度来讲,左对齐通常胜过居中对齐,所以绝大部分文章和 UI 界面都是左对齐为主。


从美感角度来讲,居中对齐往往胜过左对齐,所以一些强调美感胜过强调阅读效率、篇幅不长、同时需要细品的诗或歌往往采用居中对齐。



从空间利用率角度来讲,右对齐往往是左对齐的一种补充。比如微信的发现页面,最重要的图标和文字左对齐,次要的右箭头和其它信息右对齐。


UI 设计追求阅读体验、美感和高空间利用率,所以这三种对齐方式大部分时候都会同时出现。整体而言,是以左对齐为主,居中对齐和右对齐为辅。


再说对比


嘈嘈切切错杂弹,大珠小珠落玉盘。音乐讲究韵律和节奏,设计也追求错落有致的节奏感。这种节奏感,很大程度上靠对比实现


好的对比可以带来视觉张力,就是抓人眼球的吸引力,同时也能起到主次分明和视觉引导的作用,最终带来良好的阅读体验。


一定程度上,对比是无处不在的。只要存在不同,就存在对比。比如大小之间的对比,不同颜色之间的对比,文字与图标/图片之间的对比,不同对齐方式之间的对比,等等。


一般而言,对比需要果断:若不同,就彻底不同。因为一般情况下,充分的对比能带来更好的视觉张力和更好的阅读体验。


第三说亲密


设计就是分类,张小龙曾如是说。分类中最重要的原则是亲密,还有一个副产物是留白。


性质相同或相似的元素,我们会让它们看起来离的更近,关系更亲密。亲密成就分类,分类能化繁为简


最后说下重复


设计追求一致性,一致性主要靠重复来实现。被大量“重复”的元素,比如这篇文章里的字体大小和字体颜色,既保证了一致性,又提高了效率。


2 基础知识


基础知识主要包括:手绘、颜色、版式设计、字体设计、品牌设计、动效设计、插画设计等专业知识。


UI 设计师可能不用画卡通人物或插画,但一定会画图标和 logo,这些也会用到手绘。作为造型基本功,需要掌握一定手绘技能。


颜色方面,最重要的是能够很好感受和理解颜色传达出来的感觉,也即颜色的“精神之美”,这块主要依赖审美和练习。


配色方面,推荐软件里的 HSB(色相、饱和度和亮度) 模式,这种模式很好理解,也方便调色。另外还强烈推荐从照片中吸取颜色,因为照片往往会和“生活”、“自然”有一定关联,“生活”和“自然”是非常重要的素材和灵感来源。从色卡中选择颜色也是一个不错的选择。


版式设计就像是选秀节目中练习生的舞台表演,考验的是唱跳、表情管理、舞台魅力、临场应变等综合实力


“活学活用”环节,会结合例子分享版式设计。


字体设计、品牌设计、动效设计、插画设计等方面,个人经验不多,就不分享了。文末会附一份推荐书单,囊括基本原则和部分基础知识。


3 风格设定


风格设定,即上篇提到的“精确描述”,是在动手设计之前,先探索出合适的风格,并把它精确描述出来。


好的开始是成功的一半。风格设定是一个开始,极其重要。如果风格设定只做到 60 分,稍微打点折扣的执行结果就是不及格。所以,如果要把设计做到 85 分,风格设定一般要做到 90 分。


风格设定犹如在茫茫大海中行船,首要目标把握方向,核心诉求是精准。海上并无现成道路和导航可循,只能依靠繁琐而严谨的推理和计算。


风格设定的次要目标划一个既清晰界定风格、又清晰指明“发挥范围”的“圆圈”,核心诉求是周密。因为需要清楚知道“圆圈”以内代表什么,“圆圈”以外代表什么。


在“精准”和“周密”上同时做到优良,风格设定才能做到优良。


既精准又周密的风格设定,通常无法一蹴而就:“风格设定”阶段一般只能做到七成,剩下三成需要在设计过程中继续探索和打磨。下一大段会结合案例分享具体方法。


4 风格把控


风格把控有两层含义,一是实现当初设定的风格,二是在实现的基础上做到统一和规范


只要严格在“圆圈”里发挥,实现当初设定的风格并不难。那做到统一和规范难吗?往难了说就是需要做大量琐碎工作:以联系的眼光看待所有设计元素,并把它们分类规整好,注意分类不宜过多,同时分类逻辑上不能出现明显问题。往简单了说就是大量复用已有的设计样式。


风格把控就是在划定的“发挥范围”内,利用设计知识和经验,以规范的方式实现规划好的风格。


5 活学活用


活学活用作为四类理性的共同核心,最典型的应用场景是版式设计。


活学活用有两个要点:正反结合,风格第一



所谓正反结合,是指设计知识既能正着用,也能反着用。最常见的例子是对齐原则,大部分时候是正着用,但如果想要营造活泼的感觉,也会反着用:故意打破对齐原则。


除了对齐原则,其它设计知识,比如重复原则,也可以反着用。


本文配图就是一个例子:图片左上角、右上角和右下角分别散布着装饰元素(横线、圆环)和 logo,在装饰元素的出现次数上,没有用重复原则。过年家里挂灯笼一般至少挂两个,同一装饰元素一般至少出现两次,以达到一种和谐和较为热闹的装饰效果。



我在装饰元素的出现次数上没有用重复原则,而在出现位置(相似位置)、元素大小(相似大小)和元素颜色(相似颜色)上用了重复原则,同样达到了和谐效果。之所以没在装饰元素的出现次数上用重复原则,是想放一个隐喻在这里。


所谓风格第一,是指设计风格永远第一,设计知识永远第二。知识服务风格,切不可重知识轻风格。


《倚天屠龙记》中,张三丰教张无忌练习太极剑时,要他忘记剑招,只记剑意。某种程度上,版式设计也要将“剑意”放在第一位,“剑招”服务“剑意”


对比原则也有反着用的时候。有一条关于对比的知识:对比要果断,若不同,就彻底不同。这条知识能解释百事可乐 logo 里红色与蓝色的强烈对比,但解释不了山本耀司旗下大部分服装那千篇一律的黑色——单色,无对比。



设计最重要的是感染力,感染力主要来自个性、态度、价值观这些风格层面的东西,而非设计知识这些技法层面的东西。


当一个设计,技法高超而风格不足时,感染力和魅力就会不足,这也是设计师经常会犯的错误,大家需要注意。



02 UI 设计:如何做到理性?


可以简单分成三步:规划,成形,细化。下面结合微信 Redesign 这个案例来说明。



1 规划:用“红绿灯”法设定风格


设定风格,用到的方法姑且称之为“红绿灯”法。“红绿灯”法借鉴并改良了我在网上看到的一种“红黄绿卡片法”(在红、黄、绿三种颜色的卡片上写下不同的设计关键词),并和“情绪板”法有相似之处:都包含关键词定位图片参考两部分。


先说关键词定位,共有两步。


第一步类似头脑风暴,结合产品属性、用户属性、市场情况、个人喜好等因素,把能想到的设计关键词全部写下来。合适的不合适的都要写,只要想到了就写下来,确保有二三十个。如果关键词数量不够,这个步骤可以多重复几次,直到够了为止。这一步设计师和需求方都要参与进来,在提供关键词上双方是平等关系。


这个微信 Redesign 是个具有探索性质的小练习项目,基于微信 7.0,有两个目的:首先保留原有交互体验和品牌识别度,其次在视觉上更年轻、更流行。可以通俗理解成:一款微信“皮肤”,主要给年轻用户和赶新潮的中老年用户用。


结合产品属性(社交类、工具类、内容类)、用户属性(年轻用户为主)、市场情况、个人喜好这些因素,这一步想到的关键词如下图所示。



第二步是归类,就是把第一步产生的所有关键词归成“红黄绿”三类。如果关键词不够,还可以再补充。这一步依然是需求方和设计师共同参与,但需要设计师来主导。


红色关键词代表不能踩的红线:不能这样做黄色关键词代表黄灯警告:这样做不太合适绿色关键词代表畅通无阻:应该这样做


需要注意的是,绿色关键词最好控制在 3-4 个之间,如果超过 4 个,就需要分成主绿关键词和次绿关键词,主绿关键词依然要控制在 3-4 个之间。这样做有两个考量,一是确保简单和重点突出,二是也更容易实现。


回到第一步的关键词上来。设计中当然可以用“拟人”、“隐喻”等手法,所以“拟人”这个关键词显得意义不大,故删去。“温润”和“亲和”,“老少皆宜”和“大众”在语义上都存在一定的重复,所以删去后者。删除这类不合适的关键词后,剩余关键词就按“红绿灯”法归类,归类后情况如下。


(微信 Redesign 之按“红绿灯”法归类后的设计关键词)


关键词定位已就绪,再来找参考图片。


可供参考的图片有两大类:照片和 UI 界面。UI 界面也有两类:线上作品(真实项目、练习作品等)和上线作品。


做 UI 设计,参考什么样的图片?个人建议,做什么类型的设计,就重点参考什么类型的图片。比如 UI 界面就重点参考 UI 界面,banner 就重点参考 banner。


UI 界面的设计,个人喜欢重点参考知名产品的上线作品。单从视觉角度来说,上线作品的质量可能比不过一些线上练习作品。但是已经上线的知名产品的 UI 设计,其风格的形成往往都会经过很多推敲,会有很多比较成熟的设计思路在里面。


参考别人的设计,最重要的是参考设计思路,其次才是参考表现形式。这种设计思路,有时候能从网上找到,但更多时候靠自己推测


微信 Redesign,根据“很多年轻人在用,且风格比较流行”这条主线,找来了 QQ、抖音、B 站、小红书、陌陌、Soul、腾讯视频、爱奇艺等产品的截图。这些产品的截图,看完一圈后,就会面临一个问题:以图标为例,这几个产品的图标,风格各异,但基本都具备“年轻”和“流行”的特点,那应该参考哪一个?



这时就要求助关键词定位。除了“年轻”和“流行”,主绿关键词还有一个“轻微老少皆宜”。最符合“轻微老少皆宜”的是爱奇艺和腾讯视频:很多老人和小孩也会用这两个 App 看视频,网上公开的数据也能佐证这一点,所以它们的设计一定会照顾中老年用户的审美。


最后,出于个人偏好,我选择重点参考爱奇艺的图标风格,具体而言就是:深浅双色、较粗(1.5pt)描边、圆润风格。


2 成形:按照规划,实现风格


红黄绿三色关键词及重点参考图片就绪后,就可以动手设计。


我一般会把界面设计粗略分成三大部分:版式风格、元素风格、元素大小,元素为图标、图片、按钮等,然后去一一实现。


先说版式风格


用的主要绿色关键词是“更流行”和“更年轻”。“更流行”包括:更大字号的页面标题、尽可能用留白代替分割线和卡片的“无界”风格、圆形头像、更多留白更多舒适、等等。“更年轻”包括:更圆润的搜索框、输入框和图标、更年轻更具活力的配色、等等。


再说元素风格之图标风格。


图标主要参考爱奇艺 App:其一,底部导航和发现页的图标都是深浅双色加较粗的描边;其二,除了更圆润以外,部分图标还变 Q 了。


最后说元素大小


以这个小项目为例,最主要的元素大小是图标大小和字体大小,它们会影响整个设计的感觉。通常情况,元素越小,给人感觉越精致、越高端,此其一;其二,可能是年轻人和老年人视力存在差别的原因,越小的元素往往代表年轻人的审美,反之则代表老年人的审美。


元素大小主要运用的绿色关键词是“轻微老少皆宜”。也就是说,需要在年轻人和中老年人的审美中找到一个平衡,所以元素大小基本直接参考了微信 7.0 的设计,个别地方做了微调。


最后,出来的效果如下图所示。



3 细化:打磨优化


这份设计我发在了网上,部分网友留言说看着不够好,不太舒服,有一个表达的比较具体——“虽然用了大面积留白,却让人感到紧迫...”。


基于网友的留言,我仔细审视了这个设计,最后发现问题主要出在页面(发现页为例)左右两侧:留白过小。



当初之所以这么设计,是想通过页面左右两侧较少的留白制造一种内容将要撑破屏幕的感觉,从而营造一种活泼的感觉。注意,彼时“活泼”还没出现在“黄色”关键词里,上文两张关于关键词的图都省略了中间探索和优化的过程。


很多网友之所以没有感受到活泼而只是觉得不太舒服,至少有两个原因:第一,整个设计的基调是简约、清爽,有一定的年轻感和流行感,但没有太明显的活泼感,硬往里面某个地方塞“活泼感”并不和谐,大家也难以感受到;第二,单纯就“活泼感”而言,做的依然不到位,比如图标与右侧文字的留白,可以比图标与左侧边界的留白大,方能更好彰显活泼与活力。


考虑到“轻微老少皆宜”这个绿色关键词及微信主要是工具型和内容型产品,“活泼感”用在这里并不十分合适,于是放弃,并将“活泼”归为“黄色”关键词。此处留白的目的就回归其本职工作:整体和谐与舒服。于是就把留白相应调大了。



另外一个优化的点是“眼睛”的形状:微信图标、看一看图标、表情图标、朋友圈里将点赞和评论折叠起来的图标都有一双“眼睛”,这双“眼睛”起初是竖着的椭圆形,很萌,也比较低龄化。为了尽可能的“轻微老少皆宜”,这里统一把“眼睛”由竖着的椭圆形改成了圆形,弱化了“萌”和“低龄化”的感觉。



还有一块是颜色上,拍摄视频动态的图标有用到蓝紫色。这个紫色基本符合“更年轻”、“更流行”,但不太符合“轻微老少皆宜”,所以最后放弃了紫色,保留了蓝色。



遵循主绿关键词里的“轻微老少皆宜”,其它优化的点有:微信图标尖角处的圆角调小,删除启动页与黑色"WeChat"字形成对比的绿色圆点。另外还有一些视觉层面美观、和谐、舒适度的优化,比如颜色、留白、圆角大小、字体大小方面的微调。


优化后的微信 Redesign,整体效果如下图所示。



凡事预则立,不预则废。UI 设计如何做到理性最核心的是设计风格,规划、成形和细化都紧密围绕设计风格展开。


最后,尝试总结下“红绿灯”法的优势,主要有四点:精确、周密、稳妥、高效



关于设计风格,传统规划方法一般只有三四个“绿色”关键词。


“红绿灯”法拥有“红灯”、“黄灯”和“绿灯”三种颜色的关键词,从而确保大方向更准确。“红绿灯”法会产生20个以上的红黄绿关键词,从而确保划出来的“发挥范围”更周密,极少有疏漏。


在“成形”这个设计环节,一旦踩到“红线”和“黄线”,规划好的红黄绿关键词都会马上发出警报,从而大大降低“违规踩线”行为的发生次数,确保设计执行环节的稳当可靠。


“红绿灯”法通俗易懂门槛低,需求方可以较为深度参与“规划”环节。需求方在“规划”环节的深度参与,理论上可以降低后期的返工和修改次数,从而确保整个设计过程的高效。同时理论上也能够提高设计师和需求方双方合作的愉快程度。



03 UI 设计:止步于理性吗?


UI 设计,始于理性,但无法止步于理性,还需要超越理性。注意,这里的理性,仅指设计知识的相关理性。


超越理性主要有两点:直觉,其它知识



1 直觉


直觉是指一种能够快速感受和评估设计优劣的感觉。良好的直觉往往快而准。


感知和评价别人的设计时,用到的几乎全部是直觉。审视自己的设计时,也离不开直觉。


在审视自己的 UI 设计时,直觉主要发挥两个作用:第一,囿于知识储备或表达能力,有些地方就是解释不清,这个时候就要靠直觉去感受去判断;第二,直觉往往会作为检视设计的最后一道关卡,也是最重要的一道关卡。


直觉来自哪里?


个人观察是,直觉往往和审美正相关。比如一个设计师,他掌握的设计知识有限,经验有限,对自我的要求也不高,最终的作品往往不出彩。但如果他审美好的话,往往能够分辨出不同设计方案之间孰优孰劣。


如果你想就设计稿征求别人的意见,请去找那些审美好的人。


2 其它知识


其它知识是指设计知识以外的所有其它知识。比如 iPhone 上删除应用前应用图标的抖动,其灵感应该来自生活中的摇头求饶或吓得发抖,抖动的幅度和频率则需要利用物理学和数学方面的知识。


优秀的设计,一定会从生活中汲取大量灵感,并广泛利用社会类、人文类和理工类学科的知识。就拿数学来说,在好的设计中,一定是个常客:因为你需要不停的按计算器,从而计算不同设计元素之间的比例关系和各自的大小。


汝欲学诗,功夫在诗外。遣词造句这些文字技巧只能是写诗的基础,而非关键。写诗的关键在于你对生活、对世事的积累和感悟,在于你的思想是否深刻,情怀是否充足。


写诗如此,做设计亦如此。设计知识只是做设计的基础,而非关键。做设计的关键在于“其它知识”。“其它知识”非本文重点,就不展开了。



结语


UI 设计里的理性,主要是各类设计知识。理性的核心在于活学活用各类设计知识


理性严谨的做 UI 设计,可以简单分成三步:规划,成形,细化。好的开始是成功的一半,一个高质量的规划显得尤为必要。


用“红绿灯”法做规划,并指导成形和细化工作,会更精准、周密、稳妥和高效。


UI 设计,是七分理性,三分直觉。审美越好,直觉越准


优秀的 UI 设计,一定会从生活中汲取大量灵感,并广泛利用设计以外学科的知识。








推荐书单  


[美]Robin Williams《写给大家看的设计书》

[日]佐佐木刚士《版式设计原理》

[日]伊达千代《色彩设计的原理》

[日]小林章《西文字体1、2》

左佐《设计师的自我修养》

左佐《治字百方》




原文链接:https://mp.weixin.qq.com/s/yZVBzTYJxWQ7fk-tjXG8Yg


    • 文章来源:站酷   作者:SnowDesign

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

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

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



界面设计中的那些版式-图版篇

博博

这篇主要说一下版面和图形使用,对高手来说可能有些老生常谈,但对移动端界面设计或许会有点参考价值,用几分钟看看吧。


    作者:王铎(Micu设计)


    这篇主要说一下版面和图形使用,对高手来说可能有些老生常谈,但对移动端界面设计或许会有点参考价值,用几分钟看看吧。

     

    界面美不美,除了构图之外,另一个重要手段的就是如何处理留白,也可以理解成版率。留白就是为了凸显层次、突出内容。

    手持设备屏幕较小,决定了信息显示是有限的。用户有效接受信息并不与界面内提供的信息量成正比,有的时候提供的越多,用户反而真正接受的越少。妄想满屏都是信息是不可能的。用户越来越受不了满屏的信息了。

    让用户接受该接受的有效信息,是关键。

     

    在设计界面的时候,因为内容和页面都比较多,为了保证页面与页面的统一性,首先需要设定页面内容四周的留白。在设定页面的间距后相应的内容图标,图片等的安排就确定下来了。用这样的方法能使调整出来的页面更为条理化。

     

     

    红色色的部分就是内容。在页面中一般会有导航的存在,那么内容区的版面是从导航下面计算的。

    界面四周增加留白。这样的界面很容易集中用户的视线到少数的内容上去,突出了焦点,整体给人一种典雅高级的感觉。

     

     

     


    反之,缩小留白或者不留白,页面会显得更丰富更充满活力。而图片的展示空间会增加,冲击感增强,让界面更显得富更有张力。

    根据页面的内容不同和功能点,适当的调整界面周边的留白非常重要。一般图片本身比较有意境,可以直接采用“出血”的方式,不留白或者少留白。

     

     

     

     

    下面介绍一些版面的小规律、小技巧。

     

    1.取其精华,一块颜色也能定天下!


     

    提取主要的信息,通过对整个页面的颜色进行调整,从而提高版面使用率。将一个或多个功能点作为主信息,提到首页中进行设计,从达到想要的视觉效果。这样处理后的界面设计不仅能显得大气有张力,而且展现出来的信息聚合度高。

     

    在缺少图像素材的情况下,如何让界面显得有张力,整体感强,呈现出来的版面率高。

     

     

    单色背景留白,凸显主要信息。要求图标或者文字,相对简洁,能够很好地和背景色融为一体。再通过线条和规则的图形来分割留白区域,增加层次感。

    做好这些的前提是,设计师要明确主要信息,以及它们之间的关系。 

     

     

    结合产品特点巧妙的运用大色块,将变化的信息用颜色区分出来。让用户最直观的感知信息的变化。

     

     

     

     

    2.多色块灵活分割,加强内容使用率



    图片素材少,还可以采用多色块进行分割,让界面显得不那么单调。

    加强内容使用率可以通过色块(临近色或是互补色)的延伸或是图像的重复来组织页面版式。将图片和色块进行统一化排版布局,整体基调能使页面丰富化。图片与相同大小的色块可以保持界面的统一性与简洁性,色调的一致的统一性和连续性使页面更为整体,这样看起来的页面就像一张图片一样有张力。并且这种方式让用户感觉点击的区域也会增加,从而操作也变得便捷起来。

     

     

     

    3.构图不拘一格,找到最合适的内容版率。


     

    横向和纵向分割,使界面显得整齐、稳定,而斜向分割让界面冲击感强。

    使用不同的构图方式,穿插性地将少量的图片整合在构图的形状中,能让界面变得活跃而富有活跃性。这样的表现方式还能将产品的气质融入进去,淋漓尽致地展现。有节奏感的设计更为取巧地加强了版式率。在界面设计中,图文的穿插可以引导用户的视线,让原本简单的内容变得有趣。在层次上,也可以区分内容的主次性,让阅读更加的轻松。

     

     

     

     

     

    4.简约化桌面或主页,让界面越近越美


     

    常用方式:图标、加大文案字号、序号、数字等来达到加强版式率的运用,提高视觉上的丰富性。

     

    图标表达

     

    人们越来越认同扁平化,一方面是因为扁平化的图标看上去清新简洁,用户理解快。另一方面,与图标搭配的背景更加单纯,要么留白,要么炫简,尽可能减少给用户在视觉上干扰。好的扁平化图标不是简单地删减细节,而是着重凸显有效的信息。

     

    图标是最为直接的表达方式,简单明确的图形,能让用户通过对图标的认识快速找到想要的功能和需求点。图标与文案的搭配有效的降低了阅读时候的疲劳感。从而加强了界面内容的节奏。运用图标的设计条理清晰,功能明确。

     

     

     

     

    信息化图标能给产品增色。有趣的图标设计不仅能很好的将功能点进行区分,也能好的将软件的特性和品牌展现出来。

    把图形融入到界面中,可让内容更为丰富,层次更加的分明。

     

     

     


    5.突出重点文案,调整版面率,让信息更清晰。

     

    调整文字大小将调整版式的使用率,使原本空的界面内容显示的更为饱满,用户阅读起立更为直接。使用较大的字号进行加强页面使用率能让页面显得更为信息。突出重要的引导文案,加强了软件的情景感和带入感。快速引导了用户对功能的理解,从而准确的使用。

     

    在页面中我们可以强调重点数据或功能词等来区分界面中的层次感。让用户的视线更为集中。

     

     

    6.串联图片,让它们讲故事,视图化版面。

     

    这种设计方法更多的是将文案用图形或插图展现出来。在数据页面和引导页中最为常见。

    一段文案一副插图的引导页更为有特色,给用户的情怀感更强。这种设计手法也是最容易体现产品特质和吸引眼球的。图案的易读性高,能在极其短暂的时间内快速传达给用户信息。用图像来讲故事,是设计中最根本的表现方法,也更是最为受欢迎的表达方式。

     

     

     

     

     

     

     

    图在界面中的运用

     

    三种方式:抠,边界关系,残缺

     

    1.切抠弄,制造纯色留白!



    在处理图片素材的时候,常常会碰到图片背景杂乱,产品不够突出的问题。在设计之前我们可以对素材先进行处理,将产品直接抠出来。利用这种方式可以找到产品的形状,越明确的形状越能反映用户对产品的认知度。产品的独特性能快速明确的表达给用户,用户从潜意识第一时间的判断到产品的类型和使用特性。

    下面是一个曲奇饼干的网站,将主饼干的勾出来,进行层次感的区分。在产品介绍中采用了侧面的实物抠图,体现出了曲奇饼干最为真实的厚度。运用碎落的饼干块虚化拉开产品的层次。深色的背景与饼干对比强烈,直接凸显了实物的形状。让用户一目了然,食欲大增。从而增了用户的购买欲望。

     

     

    在很多的电商APP中也常采用抠图,去除多余杂乱的信息,利用产品的形状直接体现不同商品的特点。这样的界面用户阅读起来轻松愉悦。

     

     

     

    2.建立边界,再打破边界,破出重围

     

    如果需要展示的信息较多,采用分割区域的方法,可以使界面显得整齐干净。而当信息较少时,设计师可以大胆选用“局部出血”的方式,建立边界,再突破它,增加层次感和冲击力,以凸显主题。

    一定要记得设定好的内容范围是为了让页面显得整体化,而不仅仅是摆放和拼图。

     

    在网页设计中有时候会见到这种方式,其实在手机、平板等UI设计中我们完全可以套用。

    运用图片的穿插来区分背景和产品或形象的层次感,处理完的界面更加富有生命力。放大需要突出的主形象,把它作为第一焦点展现在用户的眼前,有种强烈的“面对面”感受。

     

    在APP中采用将图片局部突出出来,能拉开信息的层次,将需要突出的图片信息第一时间展示给用户。一方面可以方便和引导用户点击,另一方面在上下滚动的长副瀑布流里,适当地打破平衡,可以丰富页面的节奏感。

     

     

     

     

    在ICON的设计中我们也常用到破图的方法。在统一的圆角矩形中,将表达寓意的图形局部超出,使图标更为有空间感和灵活性。

    采用这种方式设计的图标空间感强,层次感强烈,能使产品形象显得更为突出。

     

     

     

     

     

    在字体中也经常运用到破图的方法,让字体更为生动。在破字的过程中也能引发出不同的创意点。

    大美青海字体设计我把数字9破出了方块。而在优车尚品字体的设计中,我通过品字的破图找到了车的联想,让整个字体设计的更为贴切灵动。

     

     

    3.冲出画面,只保留局部,让产品再大一点!


     

    有时候,我们拿到素材,在处理后发现,图片比较平常,用户一眼就知道是什么。这个时候,可以考虑保留局部的方式,营造残缺美,增加时尚感。不要小看用户的的脑补能力,当然,这种方案还是要与客户或者产品经理及时沟通,残缺美不是所有人动能接受的。

     

    我们将图片进行放大,找出产品特点。选择能撑起整个页面构图的位置,切除不必要的图形,让图片冲出画面!这样处理后,页面显得非常富有张力,激发了用户想看到产品整个形象的欲望,起到产品预热的效果。

     

     

     

     

    在WATCH的预热官网中,设计师将图片放大,裁取有特点的部位进行展示,引导了用户点击观看产品的整体形象,激发了用户更多的去了解产品的特性。

    从版面角度看,局部放大裁切图片,增加了留白,增加了版式率,让整个页面显得饱满,微距的效果使用户与产品更贴切。

     

    这一篇主要理顺了一下版面和图形使用知识,并不全面,大家还是以欣赏为主。看完了能有个留白、破图的印象就不算白看。

    设计大方向上的东西终于絮叨得差不多了,我知道其实大家都懂,就是不知道从何下手而已,下一篇来点小方向的实用东西,欢迎大家留言。

    文章来源:站酷   作者:micu设计

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

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

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


“手把手教你设计”—12个最佳手机APP界面设计教程

seo达人

如何使用Photoshop来设计手机UI界面

1. How To Set Up Photoshop For UI Design

如果你是Photoshop的新手,又在做UI设计,这个教程教你如何使用常用的Photoshop设置来达到更好的效果。本文是以iPhone为实例告诉你怎么在UI设计中使用Photoshop,完全是初学者的教程。

 

2. How to Design an iPhone App in Photoshop

这篇文章将为我们介绍使用Adobe Photoshop为iPhone设计一个简单的3页目录列表应用程序。并且将一步步地指导你完成这些步骤,还涵盖了使用Photoshop设计iPhone应用程序的所有基本原则。

 

3. Design an App Landing Page in Photoshop

在这个教程中,我们可以看到一个应用程序着陆页的详细设计过程。设计师使用Tuts Android应用程序进行演示,强调其功能和优势,利用多个CTA来完善整个着陆页的设计。

 

4. How To Design a Mobile App Signup Screen in Adobe Photoshop

如果你想要设计一个像Facebook或者Instagram这样成功的登录界面设计,那么这个完全是你必看的基础教程,视频中教你如何选择颜色,设计按钮以及详细的步骤来展示登录界面的设计过程。视频虽然是四年前的,但是里面的设计依旧不过时。

 

如何使用Sketch来设计手机UI界面

1. A Step-by-Step GUIde for Starting a New App Design Project in Sketch

开始一个新的设计项目是很难的,无论你是自由设计师,还是在知名的产品公司工作,时常会感到迷茫。本文将一步步的教你如何使用Sketch开始一项新的APP设计项目。

 

2. Food App UI • Sketchapp Tutorial / Sketch 4 Tutorial

视频主要是介绍如何使用Sketch制作一个美食类APP 菜单栏UI设计,简单易懂。

 

3. Sketch 3 for iOS App Design Step by Step

Sketch 3是一款优秀的矢量设计和图形程序,很适合用于设计iOS应用程序。在这个视频中,设计师使用Sketch 3来设计一个iPhone APP用户界面。

From Idea To Reality: Designing An App With Sketch And Xcode 》这篇文章是进阶版的APP 设计教程,从理论到具体的例子讲解,非常受益。

 

4. Sketch App Tutorial – Build a music app landing page in Sketch

Sketch 作为当下主流的设计工具,似乎有超越Photoshop的趋势。本视频介绍的是如何使用Sketch来制作一个音乐APP登录页设计,可以说是手把手的教程,每一步都非常的详细细致,非常适合初学者。

看了前面的音乐类APP登录界面的教程, 你是否也想设计出一个属于自己的音乐APP呢?接下来我将介绍如何通过结合Sketch和原型设计工具设计一款音乐类的APP(Prototype an music app with prototyping tool)

 

TIMING

这款原型音乐类的APP在Mockplus设计大赛中斩获头筹,设计师通过采用Sketch以及Mockplus的结合,做出了高保真原型。这个APP主要体现一种复古的视觉效果,磁带转动的效果是这次视觉上的设计重点。

 

必读的手机界面UI设计好文

1. The 10 principles of mobile interface design

计算机和手机是人们日常工作和生活必备的通讯工具。但在许多方面,手机往往更加强大,手机更加的私人化,与我们的联系更紧密。鉴于移动手机和计算设备之间的许多差异,移动设计与桌面设计的设计大不相同。这篇文章详细的向我们介绍了移动界面设计的基本原则,帮助设计师们开发移动应用程序的独特力量。

 

2. UI Design Do’s and Don’ts

iOS良好的优化了用户面设计,并提供给用户优质且具有吸引力的用户体验。在开始你的iOS设计之前,一定要清楚Apple官网的关于iOS常见的设计原则,来在增强手机应用的可用性和吸引力。更多关于优秀的iOS界面设计,请阅读《iOS人机界面指南》。

 

3. How to use colors in UI Design

颜色可以说在UI设计中至关重要。用的好,那就成功了一半,用不好,可能导致整个应用失败。在你的配色方案中,最好只使用三种主色跳,使用的颜色越多。越难实现平衡。这篇文章不但提到基础的用色知识加上实例解释,还有常用的工具介绍。

 

4. 10 Best APP UI Design for Your Inspiration

每位UI设计师都梦想着做出最出色的界面(UI)设计, 能够脱颖而出的手机界面设计则少之又少。设计师们在设计UI界面时,往往会参考来自不同设计师的设计,这篇文章列出了2017年最出色的的10个手机应用界面设计范例,给设计师们谋福利。

 

总结

移动设计不断地在发展,如果你想跟上这个时代,你需要不断阅读和观看高质量的教程或文章。在本文中,我收集12个最佳教程的示例来教初学者如何学习手机UI界面设计,希望你们能从中受益。

 

原文地址:Mockplus

作者:jongde

 转载请注明:学UI网》“手把手教你设计”—12个最佳手机APP界面设计教程


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

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

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

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

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



10个最新优秀手机应用界面设计实例

seo达人


1). YONO.MP3 mobile app – 音乐软件

*设计师:Anton Shmatko, Green Shark Studio, Pavel Khenkin

*软件介绍:YONO.MP3是一款即可欣赏音乐, 也可收听广播节目, 了解最新时讯和趣事的手机端音乐软件。它会是你闲暇时搜索和分享歌曲,歌手和专辑的理想工具。

*亮点:该款软件采用了一个极具特色的配色方案 — 所有界面整体使用黑红两种颜色的对比, 经典而不失大气。 而局部渐变色的使用, 也让其功能和按钮更加突出,极具层次感。而且, 软件图片, 按钮和图标的层级叠加, 也使整个界面更加的时尚柔和。总之,软件界面设计整体简洁漂亮而不失易用性。

 

2). Watering Tracker App – 生活类软件

*设计师:Tubik

*软件介绍:Watering Tracker app, 顾名思义,就是一款可以追踪盆栽或植物的水分情况,及时提醒用户浇水的生活类手机应用。

*亮点:首先,这种能够监测植物水分情况,通知用户浇水的创意,新颖且有趣。其次,界面背景和局部添加的绿色植物图片使整个界面更加的直观舒适,带给用户好心情。 当然,作为植物监测的工具,同时也设置了显示各株植物水分,湿度,光照之类细节信息的功能区,即点即可了解到植物的具体生长情况,简单易操作。而且,配色方面,黑色背景搭配白色和绿色图片及按钮,符合整个植物主题的同时,也更易于用户接受和使用。

 

3). Listen – 音乐软件

*设计师:CD UXT

*软件介绍:Listen是一款致力于为喜爱不同音乐风格的用户提供独特且愉悦体验的音乐软件。整个界面设计简洁清晰,用户可以简单的通过不同频道(例如最新歌曲,电台,主体和专辑等)和不同场景(例如驾车,运动,工作和约会等)快速的搜寻到最喜爱的歌曲。而且,软件还特别为用户提供了根据不同心情播放不同音乐列表的功能,更具个性。总之,喜欢闲暇时沉浸在自己的音乐世界的你,它会是你最佳的选择。

*亮点:软件整体采用经典的蓝色背景搭配白色字体和同色系图片,更加柔和舒适。一系列插画风格 的场景和频道对应图片,也使整个界面设计更加美观有趣。结合明亮阴影的图标和按钮让软件对应功能更加凸显的同时, 更能易于用户识别使用。 针对不同部件添加的灵活交互,也能够使用户具有更加流畅且愉悦的体验。总之,它是一款以用户愉悦体验为基础而设计的软件原型,值得尝试。(点击这里查看原型详情

 

4). NightOwl Coffee – 咖啡预定软件

*设计师:Queble Solutions

*软件介绍:NightOwl Coffee是一款能够帮助用户根据自己的需要快速订购各式咖啡的手机应用软件。

*亮点:软件整体采用了独具特设的插画风:主页添加的由明亮颜色和各种几何元素呈现的卡通咖啡机,可爱且切合主题。纯色的背景搭配上灰色插画以及黄色图标和按钮,使整个软件界面更加干净整洁,易于用户使用。

 

5). Roomframes app – 管理型软件

*设计师:Adrain Rudzik

*软件介绍:Roomframe app是一款适用于iOS手机端的应用软件,能够帮助用户记录并珍藏他们所旅行过的地方的相关记忆,尤其是他们旅行中所居住过的房间的珍贵记忆。所以,从这方面来讲,它是一款生活管理型手机应用。

*亮点:软件多处使用了框架设计,方便用户根据不同的旅店,工作区和相关新增地点,添加对应的日期,图片和描述。其简单的白色背景,使用户信息更加明显,也易于用户随时回顾或与家人朋友分享这些难忘的回忆。

 

6). iOS App Slide Car – 生活类软件

*设计师:Melany Roa

*软件介绍:iOS App Slider Car是一款专门针对iOS手机研发的应用软件,能够帮助用户分类搜索各式汽车信息,并实现在线交易的一种手机端应用。同时,它也是一款能够帮助用户结交不同汽车爱好者的社交工具。

*亮点:简单纯色的背景,使用户专注于汽车图片,价格,描述和所有者等信息。搜索界面添加各种搜索参数,用户简单点击即可实现汽车信息搜索。总之,整个界面简单,整洁而实用。

 

7). Karoline – 购物软件

*设计师:Varduhi Adami

*软件介绍:Karoline是一款手机端服装购物软件,提供了各类服装的详细信息和购买渠道。

*亮点:软件整体的粉色系配色,柔和甜美,对女性购买者极具吸引力。所有界面以服装图片为主,更易于用户根据喜好挑选。而且,添加的简单且易识别的图标和按钮,方便用户搜索和查询相关服装细节。软件界面丰富,例如主页,我的账号,我的订单,我的购物车,要请朋友,设置,购买等,能够满足用户购买时各方面的需求。所以,如果你有通过手机在线购买服装的打算,它会是不是错的尝试。

 

8).Space – 管理类软件

*设计师:Doeun Shin

*软件介绍:Space是一款能够帮助用户更加有效的管理日常生活的手机端应用。主要提供了两项特色服务:早上,自动结合用户的日常习惯,提供有用的日程管理信息和建议,例如交通和天气情况等; 晚上,通过自动分析用户语音日记,提供符合用户心情的主体和提示音等等。

*亮点:该软件以插画风为基础,添加了各式动画按钮及图片,直观生动。蓝色主题,漂亮舒适,无论早上还是晚上使用,用户都不会反感。而且,软件本身添加多样的功能性界面,例如语音日记,心情日历,日常服务,节日简介等等,简单全面。总之是一款极具吸引力的管理软件。

 

9).QuickBee – 广告类软件

*设计师:Monish Mohanan

*软件介绍:QuickBee是一款广告分类管理软件,提供了生活中各个方面的信息,例如汽车,房地产,求职和教育等风方面面信息。使用者只需创建账号,即可搜寻所需生活信息,了解流行趋势,浏览各类特色广告。

*亮点:软件设计简洁,颜色搭配极佳。彩色按钮呈现多样的生活分类,整洁美观。各式框架呈现流行趋势和特色广告,简洁有序。矢量图标简单易识别。添加多种界面,满足用户各方面的需求。

 

10).Wallet – 理财类软件

*设计师: uixNinja

*软件介绍:Wallet一款能够帮助使用者理财的移动端软件。

*亮点:软件使用黑色,红色和紫色三种颜色的对比和渐变,极具特色,漂亮时尚。简易图标和多色几何图形,是软件界面更加简洁使用,令人印象深刻。

 

结语

这些就是我们所搜集的10款最新的优秀手机端软件UI设计作品。 希望他们不仅能给你新的设计带来灵感,同时也能帮助你把握和预计2018年手机应用UI设计的发展趋势。

 

原文地址:Mockplus

作者:jongde

 转载请注明:学UI网》10个最新优秀手机应用界面设计实例


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

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

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

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

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



语音用户界面设计 - 对话式体验设计原则

博博

文章包括三部分:1.智能语音对话系统;2.了解 VUI 相关知识;3.语音用户界面基本设计原则。

最近在阅读关于智能语音方面的书籍,将最近零零碎碎的笔记重新整理了一番,希望能让读者更加快捷、高效的认识智能语音方面的基础知识点。



智能语音对话系统


语音交互界面是近年来最重要的趋势之一,它不仅可以依托于智能手机而存在,而且可以和智能家居、车载导航、智能电视、智能音响等一系列产品结合到一起。越来越多的人更加频繁地使用 Siri、Google Assistant、Cortana、小爱同学等。越来越多的应用也都已经涉及到智能语音技术。





1、语音和语言有何区别?


我们首先需要了解「语音」和「语言」的区别。


语音是语言的信号载体,语音是人的发音器官发出的,承载一定的语言意义,而语言才承载人类的智慧。通俗的讲,语音是天生就存在的,婴儿刚出生的哭喊声也算是语音。它是人的发音器官发出具有一定社会意义的声音。其物理基础主要有音高、音强、音长、音色四要素构成。而语言则是需要学习不断进化的。在智能语音中,我们需要考虑的是如何确保在复杂的现实环境下,把干扰信息过滤,获取到准确的信息。




2、语音界面之间的关联



唤醒:Amazon Echo 和 Google Home 之类的语音驱动设备不断地在等待唤醒词(“Alexa ...”或“OK,Google ...”)从而进入唤醒状态。


反馈:一旦唤醒,设备会将随后接收到的音频发送到云端的AI平台。 该平台使用自动语音识别(ASR)和自然语言理解(NLU)的组合来识别用户的意图并将其发送到支持应用程序。 


回复:应用程序处理请求并通过文本进行响应(如果支持则提供可视化信息)。该平台将文本转换为语音并通过设备播放。




3、对话系统概述


对话系统:能够与人进行连贯对话的计算机系统,可以采用文本、语音、图形、触觉、手势及其他方式与人进行交互,常以语音交互为主。



而如今的智能设备能够“理解你所说的话并且采取行动”,是两个重要技术结合的结果:一个是自动语音识别(ASR),另一个是自然语言理解(NLU)。


自动语音识别(ASR) — 通过声学模型和语言模型,将人的语音识别为文本的技术

自然语言理解(NLU)— 对用户输入的文本进行语义理解,包括用户意图识别和语义槽填充


对话状态跟踪(DST) — 根据所有对话历史信息推断当前对话状态St和用户目标

对话策略学习(DPL) — 基于当前状态生成下一步操作

自然语言生成(NLG) — 获取结果文本,主要依据模板或深度生成的模型生成用户可以理解的自然语言文本

从文本到语音(TTS) — 结果播放给用户听,将自然语言文本转化成语言输出




4、语音交互设计需要遵循什么原则?


遵循合作原则:「听者」和「说话者」为了能够顺利交谈,必须互相合作。Paul Grice 提出了这个观点,并将其分为以下4个准则。


质的准则:说真实信息,做不到的话不要说。

举例:对用户说:“有什么可以帮您的吗?”,而实际上整个 VUI 系统仅仅能提供查询话费余额。


量的准则:保持对话交流简洁,减少认知负荷。

解释:删除多余的措辞。比如“请您注意听,因为我们的选项可能已经变了”。


相关准则:所说的话需与当前对话有关,不干扰当前任务进行。

解释:比如用户想知道天气,你给他推荐旅游的地方。


方式准则:说话需清晰、明了,不要拐弯抹角。

解释:不要使用让用户难以理解的「专业术语」。







了解 VUI 相关知识


语音交互界面(VUI)指的是为用户提供可进行语音交互的计算机平台,它能够实现自动化的服务并且提供完整的相关流程。而设计 VUI 的时候,设计师需要侧重于用户的语音交互过程,并设计出相应的语音应用系统。由于 VUI 是面向用户的交互界面,因此满足用户的实际需求是至关重要的。




1、语音用户界面 VUI 简史


20世纪50年代:贝尔实验室建立了一个单人语音数字识别系统。


20世纪60、70年代:语音数字系统的这项研究仍在不断拓展可识别的词汇,并且致力于实现“连续语音”的识别。


20世纪80年代:技术进步让语音识别更具实用性,使日常语音的识别成为可能。


20世纪90年代:诞生了第一个可行的非特定人的语音识别系统。简称 IVR


21世纪初期,IVR 系统成为了主流,任何人都可以通过一个普通的固定电话和语音进行股票询价、机票预定、银行转账、处方药品预定、本地电影排片查询以及收听交通信息等。




2、那什么是 IVR 系统?


交互模式的语音应答,简称为 IVR。我们后续简称为:交互式语音应答(IVR)系统


它可以通过电话线路理解人们的话并且执行认为,一般都广泛的应用在运营的客服方面,即使是现在三大运营上的机器客服还是采用了这种语音应答的方式。但是通过电话拨号的方式开始语音的问答还存在很多的缺点,例如只能应用在单轮任务的问答,交互方式比较单一,不能进行中途打断等缺点。


IVR,即语音增值业务,是移动运营商由2002年开始启动的业务。移动的 IVR 分为两大品牌:音信互动和娱音在线,联通的 IVR 品牌为联通。





3、IVR 系统设计与移动设备


21世纪初,IVR 系统已逐渐普及。起初“按键+语音”的混合形式(请按“1”或者说“1”),是很常见的模式,比如10086的查询功能。人们创造了 IVR 系统,希望它可以自动处理一些事物,这样客户就不会总是需要找一个真人来解决问题了。相比与真人客服交谈,很多用户实际上更喜欢使用 IVR 系统,因为他们可以花很长时间反复咨询信息而不会觉得他们是在“打扰”一个人类客服。


移动 VUI 设计需要注意:


1、确定它是否需要一个视觉化的呈现,比如一个虚拟角色。


2、确定你的 VUI 在什么时候允许用户说话?可以被打断吗?是否需要按键功能?




4、VUI 的优势是什么?



速度快:语音输入的方式比手动输入快很多,同样的时间可以输出更多的信息。


释放双手:释放双手与机器进行交互,比如驾驶状态下,通过语音输入完成用户需求,安全和便利。


直觉性:说话更自然,更容易。可以直接通过语音输入的方式来表达你的意愿。


同理心:语音包含了语气、音量、语调和语速,且传递了大量的感知信息,不仅仅是文字那么简单。




5、哪些场景不适合使用 VUI ?


公众场所:开放的环境办公,比如:咖啡馆、图书馆等。环境影响因素较大,不利于用户语音的录入和接收。


不适应对计算机说话:并不是每个人都喜欢对计算机大声说话,即使是在私人空间。


更喜欢打字:许多人习惯每天在手机上花几小时,大部分的时间都是在打字。


隐私安全:比如身份证、银行密码等。GUI 比 VUI 更加适合高效安全输入。




6、哪些场景适合使用 VUI?


使用场景需要腾出双手,比如车载导航、智能音响。


作为家庭的控制中心,打造智能家具居控制的切入点。


语音记录病历,不管对医生来说还是患者来说,都是提高看病效率的很好助手。


帮助用户简单记录、查询、照顾用户的作息时间等。




7、VUI 设计师的工作内容


VUI 设计师思考的是在系统和终端用户间,从开始到结束的整个对话过程。他们思考正在解决的问题以及用户需要什么来达成他们的目的。VUI 设计师在项目中扮演着非常重要的角色。通常会参与项目全程的工作,并与团队合作完成在技术、体验、设计上的优化。



如果 VUI 需要与后端系统进行交互,他们要考虑需要处理的请求。如果流程中有人的因素,比如客服需要交接,那么设计师需要考虑如何进行交接,以及如何培训客服。







语音用户界面基本设计原则



1、对话式用户界面


对话式设计定义:思考如何与 VUI 系统进行一轮以上的交互。


因此,需要设计一轮以上的对话,并思考用户接下来可能会做什么。不要强迫用户展开新一轮对话,而是去尝试了解用户的意图并允许用户继续交谈,同时有必要为用户近期所说的话保留历史记录。





2、多模态界面


与 IVR 系统不同的是,在移动设备上我们可以增加一个可视化组件。


比如在向用户传达信息、确认信息,以及告诉用户什么时候轮到他们说话等。(比如:百度地图的小度,他会告诉用户什么时候可以说话,目前所处的状态,说完之后给予的反馈)


如果有一个可视化组件,则会让移动设备增强优势。允许用户同时使用语音和屏幕进行交互。(手机上虚拟助手,有些虽然以语音交互为主,但是在用户的智能手机上也会有一个配套的APP)。





3、设定用户期望


优秀的对话式设计不仅仅是精心制作的友好提示。Google 交互设计师 Margaret Urban 建议:如果你不能理解答案,就不提问。


“当某个人成功完成了一次语音交互,伴随着脑内咖(endorphin)的升高,用户会获得一种成就感和满足感。此时正是一个绝佳的时机来告诉用户”你做的很棒,要不要再试试这个?”


是否让我们想到了网页登陆验证的时候,需要完成一块拼图,但是你再慢他也告诉你超越全球96%以上的人。


“如果你已经设计了一个设置闹钟的功能,但是你没有提供用户取消设置的方式,这就像给人一条浴巾但是没给他香皂一样。如果你设置了可以完成某项任务的语气,请务必考虑与之相关的任务。”





4、确定策略时需注意的几点


输入确认:必须确保用户感觉到自己是被理解的,同时有助于让用户知道,什么时候 VUI 不理解他们所说的话。


1、确认错误的后果是什么?比如:预定错误的航班?制定错误的任务?播放错误的歌曲?


2、系统将如何反馈?比如:会有音频提示吗?是否有视觉反馈吗?比如Amazon Echo上的光环。


3、是否拥有屏幕?比如:车载导航、手机屏幕、智能手表。


4、选择合适的确认形式?比如:明确确认、含蓄确认、混合式的确认。




5、确认策略的两种方案


显性确认:重要信息,需强制用户确认信息。


隐性确认:让用户知道他的话接收到了,但不需要他们确认。




6、确认信息的方式




三级置信度:


系统将在一定的阈值内,以明确的形式确认信息,拒绝较低置信度的信息,并以隐性确认来确认置信度超过80%阀值的信息。


1、80%以上,使用隐性确认。如果是误识别代价高的话,考虑采取显性确认。

2、45%-80%,使用显性确认,以明确的形式确认信息。

3、45%以下的,拒绝确认信息。


举例:用户:帮我再买一份口香糖。

VUI:(置信度大于80%,使用隐性确认)好的,已经为您再购买一份口香糖。

(置信度45%~79%,使用显性确认)您是想再多买一份口香糖,是吗?

(置信度小于45%)对不起,我没有听清您讲的话,您想买什么?



隐性确认:


1、只使用隐性确认,不要求用户进行操作。

2、将「答案」和连同「原始的问题的一部分」一同回复,让用户知道系统识别到的是哪个问题。

3、当置信度高的时候,也可以不用连同问题,这样更自然流畅。



非语言式确认:


1、仅需行动反馈,而不需要口头响应。

2、通过视觉确认,比如小米智能家居,可以通过语音交互打开灯光、电视、窗帘等。

     a、如果没有延迟,没必要再对其回复。

     b、如果有3-5秒延迟,需进行回复,让用户知道并不是设备没有听到她的声音。

3、使用一个“声音标识”,即简短的、有识别度的声音。这样有助于帮助用户快速知道他们已经到了哪一步。



通用确认:


1、在某些对话式系统中,最好不要询问用户具体说了些什么 - 哪怕是隐性确认。

2、通用确认可以让用户分享更丰富的体验,因为这类反馈能适应用户输入的各种信息,并让对话继续进行。通常人与人之间的对话,也不会句句必回复,也会有 “嗯” “哦 ”“啊” “然后呢”等。 



视觉确认:


1、确认一个项目清单,通过屏幕显示进行沟通会更加有效。人的记忆有限,通常用户一次性不能记住超过大约7个听觉项目。

2、用来确认用户的选择。用户可以通过说话或按下按钮来回复。而 GUI 的反馈指令更加明确。




7、判断你的 VUI 适合哪种类型


目前大多数的 VUI 系统都是“命令 - 控制”模式,这意味着当用户想要说话时,必须给出明确的指示。


1、用户可以随时向系统询问 / 发出命令吗?


2、是否参与一个有明确开始和结束的封闭式对话?




8、命令-控制模式



唤醒系统方式:按键通话(车载导航、Siri等)、直接进行关键词呼叫(“OK Google”“小度”等唤醒词)。


唤醒系统反馈:系统检测到用户说话完成,通常会使用某种非语言的音效进行提示,然后做出相应处理(比如:“啵”的一声或者视觉反馈:声波线、点状动效、设备逐渐发光等)。


系统聆听时间:用户说出唤醒词或按下按钮后,系统保持聆听状态的时长,根据经验来看,10秒 是个不错的起始时间段。



唤醒响应时间与反馈方式


唤醒响应时间与唤醒反馈方式有关,不同唤醒反馈方式下,最佳响应时间不同:


1、当唤醒反馈为"灯光"反馈时,唤醒响应速度越快越好,在200ms时,用户响应舒适度最高(对响应时间评价为刚刚好的用户比例),73%的用户对速度满意。


2、当唤醒反馈为"灯光+音效"时,唤醒响应速度的舒适时间为300ms左右,76%的用户对速度满意。


3、当唤醒反馈为"灯光+人声"时,唤醒响应速度的舒适时间为500ms左右,74%的用户对速度满意。


数据来源:百度人工智能交互设计院智能音响时间测试实验



唤醒等待时间体验感


用户请求及反馈阶段响应时间对等待体验的影响:


1、1250ms以内是用户认为响应速度较优的区间,其中650ms为最佳体验值。在450ms时,少量用户觉得响应速度太快了,用户会感觉到紧迫感和压力,难以接受。


2、在1450ms时,有53%的用户开始感觉响应有延时,但仍能够接受。


3、从2150ms开始,有20%的用户认为音箱响应太慢,不能够接受。我们认为20%的用户不满意,已经不足以被称为一个优秀的产品。


数据来源:百度人工智能交互设计院智能音响时间测试实验




9、对话模式


1、不要强迫他们不断地去表明他们将要开始说话,自然地对话技巧进行话轮转换。


2、通过更精细的设计,使 VUI 系统可以处理一些常见的微妙表达方式。(用户处理完毕说“谢谢”,你可以设置系统忽略这种情况,或回复“不用客气”,而不是提示或者报错。)


3、不要问你都无法理解的反问句。


4、打破话轮转换的情况,用户在系统说完之前就进行提问。


5、在命令 - 控制模式和对话模式之间进行切换。唤醒之后进行自然的对话。




10、对话式标识


使 VUI 更加人性化、更具吸引力,对话式标识是让用户了解交谈进展以及进展情况的重要方式,当系统在对话中使用了一些基本的对话礼仪后,用户的参与度会更高,并且会以同样的方式进行回复。



反面案例:

虚拟助理:你昨晚你睡了几小时?

用户:大约7个小时。

虚拟助理:你昨天吃了几份水果和蔬菜?

用户:大概有4份。

虚拟助理:你昨晚吃药了吗?

用户:吃药。

虚拟助理:再见。


正确案例:

虚拟助理:我会问你几个有关你身体健康的问题。第一个问题,昨晚你睡了几小时?

用户:大约7个小时。

虚拟助理:不错。你昨天吃了几份水果和蔬菜?

用户:大概有4份。

虚拟助理:了解了。最后一个问题,你昨晚吃药了吗?

用户:吃药。

虚拟助理:好的,暂时就这些了,我明天还会再问你的,回见。




11、异常处理


“当你与人类交谈时,永远不会出现不可恢复的错误状态。”

— ABI JONES, Google 设计主管


“你偶尔因为犯错和不知道某些事情导致评分降低造成的影响,比你每次做对一件事情重要百倍。” 

— 英特尔语音助手部经理 Pilar Manchon


如果处理的得很好,错误情况就不会影响用户,你可以让用户回到正常流程,并顺利完成任务。但如果处理不好,用户不仅这次无法完成任务,他们以后都可能再也不用你的产品了。


一个好的设计师应该知道,你不能只设计正常的情况, 你还要对出错的情况做出设计。这对于 VUI 设计来说尤为重要,因为出错情况是家常便饭。



未检测到语音 / 检测到语音,但没有识别


1、什么情况下可以明确说出来?

     a、你的系统只使用语音

     b、用户没有其他的回复方式

     c、必须要用户回复后,系统才能继续进行任务 / 对话


2、什么情况下可以什么都不做?

     a、用户可以通过其他方式进行下一步操作(比如通过按键选择)

     b、就算什么也不做,也不会中断对话

     c、系统没有理解时,用视觉信息提示告诉用户,比如:提示列表等

     d、利用虚拟表情形象反馈,疑问、微笑等动作表达



其他异常处理


1、当出现:语音被正确识别,但系统无法处理

     a、程序对关键属性理解不明,写了错误的回复

     b、没有针对一些情况的回复

解决:对用户可能会说到的所有情况做更完善的预测,通过数据收集来避免此问题


2、当出现:部分语音识别错误

     a、什么也不去处理,因为这不是你想要的结果

     b、匹配错误的行为

解决:可以用 N-Best 列表来智能匹配最有可能的识别结果


3、增强错误提示

     a、当需要用户说话的时候,使用这种增强错误提示策略

     b、必要的情况下,进阶错误行为提示可以更为详细,并提供更多的帮助

     c、如果你正在设计一个可以提供真人辅助的系统,可以为错误数量设置一个阈值,当达到该阈值时,将用户转移给人工助手  




12、新手和专家用户


如果你的用户会定期使用你的系统,那么在设计中就需包含不同的策略。


“务必确保你的目标不是简单的训练你的用户,应当适应用户的行为,而不是用已有的命令让用户感到厌烦。”

— Google 交互设计师 Margaret Urban


我们在 VUI 设计上该如何更好的交互设计?


1、减少冗长指令以及其他引导提示。通过计算 APP 使用次数和频率来确认是否切换模式。


2、缩短解释性提示。但是请务必使用“对话式标识”。


3、启动效应。



什么是启动效应?


指某人受到某种特定的刺激后(例如一个词语或者图像)会影响他们对之后刺激的反应。首先让用户预先知道你会问他们几个确定数量的问题,为后面会发生的事情提供了暗示,用户就会知道如何去准备。比如以下情况:


1、当给人们呈现一个还没完成的草图,随着这个草图越来越完整,人们就越来越辨认出这张图画的是什么。之后,再给他们呈现其他还没完成的草图时,他们会更早辨认出这张图画的是什么;


2、如果当给人们呈现一组汉字,假如里面含有 “河” 这个字,随后让他们写出部首是 “氵” 的字时,这些人回答 “河” 的几率会更大。



谈谈自己对新手和专家用户的理解


01、专家型用户:代表老用户且愿意探索你的产品或服务,有着很大的包容度。并会积极提出各种改进的建议和享受产品带来的惊喜感。


02、新手:什么叫新手,就是刚刚下载你的产品,准备使用的用户,对产品功能都还处于陌生摸索的阶段。他们不会因为你的技术而使用你的产品,使用你的产品目的是完成某项任务。他们有兴趣使用更高级更复杂的产品,但却不愿意接触全新的东西,要想让他们认可,那么产品就必须足够简单。




13、持续跟踪上下文


持续跟踪信息并不容易,但如果不跟踪这些信息,你的 APP 就只能做单轮的对话行为。


指代:用两个不同的词语指同一个东西。比如: “他”  “哪些”





14、帮助和其他通用部分


我们在设计 IVR 系统时,我们会确保每个状态都包含一组通用组件:重复、主菜单、帮助、操作和再见。





15、延迟


产生原因:糟糕的连续性能、系统处理进程、数据库访问


处理方式:告知用户关于延迟的情况(比如:“请稍等,正在查找相关记录”)、非语音和视觉的提示(比如:延迟提示音以及加载状态)、可视化效果(比如:加载中的动态图标)


处理细节:延迟的时长可能为0~10秒,在没有延迟的时候最好也插入几秒的延迟。因为如果在系统说“请稍等”之后,紧接着就继续对话的话,会给用户带来异样的感受。很多设备针对唤醒词采用了本地化识别的方式,这样唤醒的会更快。




16、消除歧义


问题来源:用户只会提供执行命令所需的部分信息,而没有提供所有的细节。


举例:用户可能会询问某地的天气,而很多地方都有叫这个名字的地点,诸如“湖南路”那边的天气怎么样。


解决方案:


1、依靠任何已知的信息来确定答案,而不是再次询问用户。


2、根据上下文线索进行判断。


3、反问用户进行确认,确保系统对用户同一个问题的各种各样的回复形式都有良好的适应性。


4、指令不明确。比如“给胡歌打电话,拨打工作电话还是家庭电话?”,系统以隐性的形式对名字进行了确认,系统对这个名字有很高的置信度,并且仅有一个胡歌。


5、用户回答的信息超初了你的 VUI 系统可以处理的范围时,你可能需要缩小范围消除歧义。




17、设计文档


我们需要制作:示例对话(sample dialogs)和会话流(dialog flow)文档外其他一些情况。例如:在设计过程中,你还需要创建提示列表、完善对话每个状态指定完整的语法规则等等。





18、无障碍设计


“一开始,我就很讨厌屏幕阅读器的工作方式。为什么它会被设计成这样?当以视觉的方式来展示信息没有任何意义时,屏幕阅读器只是简单地将文字转换成音频。所有那些应用花在创造完美用户体验的时候和精力此时都变得没有任何意义,甚至有的给盲人用户带来了更糟的体验。”    — 克里斯·莫里(Chris Maury)





19、典型 VUI 项目交付项内容


示例对话:系统和用户之间可能产生交互行为的预设对话,对话看起来就像电影剧本一样,包括两个主要角色之间来回往复对话。


流程图:展示下一个状态分支的所有方式,不一定要罗列所有的交互或示例对话,也可以是功能的分组、文本的分组等。


提示列表:如果没有屏幕可以使用配音演员或语音合成来播放提示列表。


产品原型:如果这是一个多模态产品,有屏幕、支持触摸交互。




参考文献:

《语音用户界面设计:对话式体验设计原则》-【美】Cathy Pearl(凯瑟 彼尔)

语音交互入门:从概念,原理到如何设计VUI产品 - 杜松

AI时代的语音设计经验漫谈 - 少夫白杰

语音用户界面设计 - 对话式体验设计原则 - walle_x






文章来源:站酷   作者:Sabaku_no_Gaara

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

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

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

【译文】移动应用界面设计7宗罪

博博

本文是移动原型工具Proto.io的设计团队8月份在自家博客上发表的一篇“软文”,通过与移动设计界大牛们的对话,帮助大家了解在进行移动设计时应该特别注意的禁忌,大家可以回顾一下自己团队的应用正在触犯哪些禁忌,想必会有点意思。

【译者注】本文是移动原型工具Proto.io的设计团队8月份在自家博客上发表的一篇“软文”,通过与移动设计界大牛们的对话,帮助大家了解在进行 移动设计时应该特别注意的禁忌,顺便推了一下Proto这个工具。大家可以回顾一下自己团队的应用正在触犯哪些禁忌,想必会有点意思。读完本文,相信你能 找到优化自家移动应用设计的方向。


规则就是用来打破的?这完全取决于规则本身。在移动应用界面设计(后续简称:移动设计)的世界里,大家对美学、手势和动效的看法略有不同。有时一个简单的功能性应用比华丽的应用带来的效果更好,而有时候却恰恰相反。


不过,有些基本规则是人们不愿意去打破的。如果你的移动设计使得用户无法顺利触达关键功能,这显然是行不通的。假使你的文字字号过小导致没人能顺利完成阅读,那么你得回炉重做。浅色背景搭配白色文字?重来吧。

我们试图了解优秀的设计师们心目当中移动设计的7宗罪是什么。经过垂询三组设计专家,我们得到了三个略有区别的结果,看看你是否能从其中找到一致的地方呢。


0c0156e773ac32f875520f0b7ce5.jpg




来自AKTA的意见


Alyssa Burke与Macy Nguyen是AKTA(一个数字体验咨询公司)的设计师,俩人都曾为财富500强的公司以及迅速增长的创业公司效力,参与过原生移动设计项目,为某些机构的顶级项目贡献设计输出。以下是他们认为无法接受的移动设计7宗罪:


1、忽略上下文情境


目标用户的个人档案(年龄、生活习惯、技术潜能等)与他们的物理环境(室内室外,在线离线,早晨晚上等)会影响许多设计决策。移动设计师应该在迭代流程中 充分考虑上下文因素,以降低可用性不足的风险。即使拥有平滑的过渡转场、光滑的按钮和美丽的字体,一些应用也会因为整体界面设计不符合特定用户场景(深色 界面用于户外场景:糟糕的移动设计)而失去成名机会。


2、闭门造车


设计和开发数字产品是一项需要团队协作的工作。即使有项目成员(开发、新人、极客、狂热者、朋友、陌生人、你的哥们儿和设计师潮人)对具体项目内容完全不 了解,将设计工作及早并及时推广到整个项目周期中的不同角色之间也是非常关键的。我们需要让他们了解到必要的上下文信息,并持续保持相关信息互通。与其在 发布后修复问题,不如在项目进程早期预留调整空间。


3、怠慢开发人员


程序员和工程师(以及偶尔酗酒的码农)不仅是你的同伴,而且是技术先导。他们除了知道哪些能够在现实中奏效之外,还能够如你设想的那般确保你的想法得到完 美落地。有些移动设计在技术上行不通,有些或许可行,但这些都需要很多努力或时间在项目中验证。如果不问你或许永远无法确定能否做到。在项目交付时,开发 人员会把你的设计成果实现出来,此刻,他们可能很欣赏你,也可能很讨厌你。


4、低估动效设计


随着物联网逐步成熟,数字界面在人们与周围真实世界的互动中扮演了更重要的角色,界面设计的这一部分需要被设计师更加慎重的对待。人类拥有与生而来的本 能,从所处环境的变化中得到不同的感知与反应。使用合理的界面动效是一种呈现优先级和重要内容的有效方式。在某些情形下的恰当运用,甚至能够引发用户的愉 悦。有兴趣的读者可以了解下迪斯尼动画的12项基本法则。


5、字号太小


比起纸质内容,人们在手机屏幕上进行阅读的精确度和深入度略有不足。正如移动设计拇指触控规则所定义,数字界面的字号最少应该两倍于印刷字号。不同情形适 用不同的字体和设置,尤其当用户试图在移动设备上完成多类任务时。为了避免字号太小,还需要优先考虑按钮形状、图片及交互等界面元素对整体体验有何影响。


6、忽略触控目标


许多移动设计师仍然对用户手指大小不同的现状缺乏重视。一旦涉及行动或者任务导向的触控目标,尽可能的使它简单而且容易点击。为老人设计时要考虑触控时的 抖动因素,同样为儿童设计时需要考虑点击的不准确性。建议为图形资源周围增加留白区域,以便本质上提升触控面积,帮助提升完成任务的速度。


7、死抠平台规范


在Android和iOS平台上统一一套设计方案有一定局限性,也容易对全局体验目标带来副作用。两个平台上有各自用户熟悉的设计模式,设计师不应该只熟悉规范,而应该探索在两个平台上流行的应用。


230656e773cb6ac7255885014da5.jpg




来自Moblico Solutions的意见


我们同Moblico Solutions(一家提供移动关系管理方案的企业,其目标是协助品牌“打造更多有意义的移动瞬间”)的一些员工进行了交流,他们不仅为诸多行业客户提 供了“如何让他们的移动应用体验更棒”的建议,而且掌握移动设计方面的窍门。以下是他们认为移动设计的7大禁忌:


1、在用户设备上占用过多容量只为了体现存在感


当用户收到“磁盘空间不够”的提示时,会马上遍历手机上已经安装的应用并开始选择删除的对象。如果一个移动应用体积很大,占用了过多的容量却并未提供等同的价值会怎么样?后会有期,用户肯定拿你开刀。记得保持应用在体积上足够轻量,这样至少用户不会轻易把你删掉。


2、在应用启动时及要求允许权限控制(推送、地理位置、摄像头等)


回想下,有多少次我们兴冲冲的下载一个应用并准备开始使用时,一个对话框立马跳出来扫了兴?我不关心这个对话框描述什么内容,只想马上关掉它并继续使用应用功能。它是啥?好吧,菜鸟应用!


3、下载后在使用前就要求登录、注册甚至收费


实际上,这条或许应该排为第一禁忌,很难让人忍受。你能对用户所做最糟糕的事情就是:在他们下载你的应用后告诉他们必须付费才能使用。烂,烂,烂,重要的事情说三遍,赶紧删之。


4、设计的移动应用界面看起来像网页


如果这样,还需要移动应用干嘛呢?要说有一件事情可以毁掉一个移动开发者,那就是把网页的体验缩小到移动端并且称之为移动应用。移动应用应该有其具体优势,只提供缩水的网页体验远不能满足用户期望。


5、粗暴投放广告,或者只提供极难点击的广告关闭按钮


当你在滚动浏览移动站点时,只是手指不小心长按了某张图片就触发了浏览器广告,这难道不是让人烦躁的事情?偏偏还提供极小的关闭按钮,谁能点得到?想要点击简直跟赌博一样。尝试点击关闭的时候还总是因为手指触控面积较大误触了广告,真是要了命!


6、消息推送过载


没错,现在你的应用出现在数百万人的手机屏幕上,它有巨大的影响力。不过,在推送之前请三思,扪心自问:推送是否与用户相关?用户是否真的需要它?当然,你可以在你的移动店铺每次上新时都推送一下,但真的至于么?影响力越大,责任也越大,慎重使用消息推送吧。


7、移动账号缺乏单点登录支持


当移动开发者认同并尊重用户不愿意重复劳动的想法时,最好的体验才可能产生。没人愿意为你的应用重新登录一次。我们得接受单点登录的现行趋势,Facebook在这点上非常成功,继续加油吧。


208456e773e232f875520f8802a6.jpg




来自Ideaware的意见


Andres Max是数字创新机构Ideaware(致力于帮助创业团队和财富500强的公司打造有竞争力的移动应用)的创始人。在创建Ideaware之前,Max 是Mashable设计团队的    负责人。经历过为众多行业巨头设计移动产品之后,Max对移动设计7宗罪有自己深刻的见解:


1、用户点击后无反馈


看在上帝的份上,当用户在你的应用中进行点击后请给予及时的反馈吧,否则用户会以为你的应用挂了,并且马上退出。


2、无休止的引导


如果使用自己的手机,我只想快速完成相关任务。别问我各种问题或者让我填写乱七八糟的内容。


3、触控热区尺寸不对


请停止把按钮和输入框做的太小,这不是网页。我的手指需要轻松触及行动按钮,而不是要进行精确到像素级的点击。


4、使用古怪的导航模式


想让用户可以快速熟悉你的应用?那就不要以自己独特的方式来组织导航。Apple的人机交互规范和Google的设计指南就是最好的参照标准。导航设计方面别引入争议,从而给潜在用户一个卸载应用的理由。


5、选取糟糕的配色色系


给眼睛一些休息的空间,你不必采用黄黑色文本那样的出挑配色。


6、留白


移动应用需要很多留白空间,把各种视觉元素进行区分,按钮得加大处理,所有一切都依靠留白来提供视觉缓冲。移动端首屏的概念没有网页那么夸张,所以切忌把所有东西都塞到首屏当中。


7、无休止的推送


为了上帝,请不要每天推送20条消息给用户了。用户在收到几条推送后,就会深深的感觉到想要卸载应用的那股冲动。


3a6956e773f26ac7255885dc59a7.jpg



你心目中的移动设计7宗罪是什么呢?


尽管不同设计师心目中的7宗罪不尽相同,我们依然可以看到不少相似点和共识。最重要的两条是:1、除非确有必要,避免推送消息;2、通过使用符合习惯与直觉的导航,以及提供其当尺寸的视觉元素,让你的移动设计具备可用性。


我们还能想到的一条是:忽略数字原型。在原型设计阶段能够发现很多移动设计问题,以及让它们更具可用性更加出色的宝贵反馈。这也是Proto.io为什么坚持提供强大又易用的原型解决方案的原因。




译者:1688事业部/无线交互/舒舟
文章来源:站酷   作者:阿里巴巴CBU设计

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

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

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


把握“时间”显示的诀窍

分享达人

背景


“时间”作为人机交互界面中经常出现的元素,本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现,关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的,这是出于怎样的考虑呢?今天我们就来聊一聊,如何在产品设计中把握“时间”显示的诀窍,让其在页面中发挥最大的作用。



“时间”元素的分类


按照“时间”元素在页面中的出现场景和所起到的作用,可以大致归为以下几类:


A.事件的关键构成要素

时间作为描述整个事件的重要组成部分,缺失后会对原本所要传达的内容产生严重的影响,进而影响用户的使用预期和结果,比方说用户可能不能以一个较低的价格完成商品购买,或错过了产品发布会的时间。 


B.行为的时间标记

指用户本人作为行为主体或行为的接收对象,在某一动作发生后为其所打上的时间标记,比方说“我”购买商品下单的时间或收到一封邮件的时间。


C.内容的附属信息

用户在使用产品进行内容消费时,时间作为该条内容的附属信息,起到补充说明的作用,比方说一条短视频或新闻的发布时间。


在上面的案例中,我们会发现“时间”在对应场景里所发挥的作用不同,用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时,要根据具体场景和用户诉求判断“时间”元素的重要性和优先级,通常情况下:时间作为事件的关键构成要素>行为的时间标记>内容的附属信息,之后再思考用什么样的设计形式去展示来达到我们的目标。




“时间”的呈现方式和运用技巧

在讨论“时间”元素的设计之前,我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度,类似我们高中物理时学过的“时刻”和"时间间隔“的概念。


拿开会举例子:“下午4:30会议开始”、“下午6:00会议结束”描述的是事件开始、结束的时间点,而“整个会议持续1.5小时”、“会议时间为下午4:30-6:00”描述的是事件过程的时间段;但是,我们在会议开始时也可以这样讲“会议将在1.5小时后结束”。


通过上面的例子我们可以发下,同样是描述一件事情,运用不同的时间点、时间段的方式去表达,意思一样但却传递出不一样的情感,并且两者存在如下的“换算”关系:

1)时间段加上定语会变成时间点(但同样是时间点,“下午6:00”是绝对时间,而“1.5小时后”是相对时间,刚好对应到我们设计时两种时间戳类型);

2)两个时间点之间则表示时间段。

所以,我们在平时表达或设计时,要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点?还是想描述其所持续的时间过程?之后我们再针对不同语境去选取合适的文案和呈现方式。



时间的呈现方式离不开:时间戳类型、时间显示格式、时间颗粒度。其中,时间颗粒度指的是描述时间的最小单位,往往颗粒度越细,给用户传达的确定感越强(如转账时间是12日15:15:20),对用户的激励作用越明显(如距抢购结束仅剩00时01分23.6秒)。


1.绝对时间戳

绝对时间可理解为事物发生时的确切时间,由具体日期(年、月、日)和时间(时、分、秒)组成。使用绝对时间戳的优势是信息传达精准,显得正式,给人确定感和安全感,同时排布规整,便于形成认知习惯;但缺点是内容显示过长不利于阅读,并且占用空间较大。




在时间显示格式的选择上,为了避免混淆,推荐使用文字格式或“-”分隔符来分隔日期,而“/”分隔符在不同国家有不同的展示顺序习惯,容易造成误解,尽量少用。


时间颗粒度的选择依情况而定,一般场景总结如下:




2.相对时间戳

相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时,距当前时间点的时间差值,多用于push通知、信息流产品,侧重强调内容的时效性;而“倒计时”也算相对时间的一种,侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低,不用通过计算来判断时间过去或还剩下多久;缺点是不够精确、正式,并很难衡量两个时间点的临近性。



在使用相对时间是,要注意格式友好。时间单位可随着时间的推移自动改变;数字不要过多,尽量取整;并且可设置其与绝对时间转换的临界点。



总结


在设计界面中的“时间”元素时,要遵循场景贴合、便于阅读理解的总体原则;之后根据场景和目标,再选取合适的“时间”呈现方式(包括时间戳类型、时间显示格式、时间颗粒度)。



当时间作为“A.事件的关键构成要素”时

一般情况下使用绝对时间,并且要看是为了强调某一关键时间节点,还是侧重表达整个持续过程。此外,选用关联场景的文案或者运用倒计时(相对时间)的形式,可一定程度上促进用户更加集中注意力,提升对信息的关注度,并达到特殊的激励作用和转化效果。


当时间作为“B.行为的时间标记”时

该场景通常是为了追求确定感,通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点(段)去查找、回顾相应内容,因此大多数采用绝对时间,时间颗粒度依具体情况而定。


当时间作为“C.内容的附属信息”时

如果所设计的产品供给内容的更新速度快,用户活跃度高,并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性,那么通常会使用相对时间。部分信息流产品(比如新闻资讯类、社区类)会在列表页使用相对时间,在详情页使用绝对时间,时间颗粒度也是依情况而定;并且会随着时间推移,在某一时间节点前把相对时间转换为绝对时间。



 

原文地址:站酷
作者:vivo互联网UED

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

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

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

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


3D to H5工作流应用手册:理论篇

雪涛

前言

设计师需求中 3D 视觉平移到互动 H5 中的项目越来越多,three.js 和 PBR 工作流的结合却一直没有被系统化地整理。

和各位前端神仙一起做项目,也一起磕磕碰碰出了爱与痛的领悟。小小总结,希望 3D 去往 H5 的道路天堑变通途。

本手册主要分为两大部分:

Part 1 理论篇:主要让设计师了解计算机到底是如何理解和实时渲染我们设计的 3D 项目,以及 three.js 材质和预期材质的对应关系。

Part 2 实践篇:基于 three.js 的实现性,提供场景、材质贴图的制作思路、以及 gltf 工作流,并动态讨论项目常常遇到的还原问题。

本文主要面向刚接触 3D 图形学的设计师,仅截取了最常用的理论知识和大家一起学习;部分涉及技术美术或计算机图形学的描述可能不甚严谨,希望大家多多交流讨论哈。

其实无论 H5 开发用到的是哪种 webGL,设计相关的材质制作基本还是基于 PBR 思路进行的,所以这边建议各位亲可以先去阅读一下 Substance 官方宝册《The PBR Guide》。

Part 1 理论篇

设计师在还原 3D 类型的互动 H5 项目的时候一定想过这个宇宙终极问题:为什么 H5/Web 实现的 3D 效果和 C4D 里渲染出来的差异那么大?

其实这是我们对实时渲染引擎(UE、Unity、three.js 等)和离线渲染工具(Redshift、Octane、Vray 等)的差异存在误解:一是离线渲染工具是基于真实光照环境来计算每颗像素的着色,实时渲染如果要实现这种效果需要耗费更多硬件基础和算力去模拟光照(没个好显卡都开不动光追)。

虽然 UE5 的实时渲染技术和硬件兼容性已经让大家大吃一惊,但在实际项目,尤其是需要兼容低端设备的 H5 来说,渲染能力还是相对有限的。二是对于游戏或 H5 互动网站实际应用来说,流畅的互动体验优先级往往高于画面精细度,所以牺牲视觉保性能也是常见情况。

硬核干货!3D to H5工作流应用手册:理论篇

图 1-Octane 离线渲染效果 vs three.js 实时渲染效果:材质细节、全局光照及投影、以及抗锯齿表现差距明显

当实时渲染效果与设计预期差距过大时,设计师能多了解一些基础的计算机图形学,也许就能更好地和开发同学商讨性价比更高的视觉实现和资源优化方案(以及更多 Battle 的筹码)。

1. 着色器与着色算法差异(硬核预警)

首先我们要知道计算机之所以能在 2D 屏幕上画出 3D 的图像,是因为有着色器(Shader)在绘制,它将我们三维空间里的模型与光照信息进行转换,并光栅化为二维图像。在计算机图形学中,着色器是用于对图像的材质(光照、亮度、颜色)进行处理的程式。

常用的着色器分为四种:像素/片元着色器(Pixel/Fragment Shader)、顶点着色器(Vertex Shader)、几何着色器(Geometry Shader)、细分曲面着色器(Tessellation Shader)。

像素/片元着色器与顶点着色器(Vertex Shader)在 webGL 处理过程中都有使用,顶点着色器先将模型中每个顶点的位置、纹理坐标、颜色等信息进行转换装配,再由片元着色器对 3D 信息光栅化并转换成 2D 屏幕信息。(关于着色器差异,感兴趣的同学可以直接跳到附录查看。)

着色器是怎么把顶点中所带有光照、纹理等信息转换并重建在二维图像的像素中呢?GPU 中是透过不同的着色算法来实现的。

一种是获取每个三角形的插值(Interpolate)来实现,这种方法称作 Per Vertex Lighting,但是当三角型很大的时候,插值往往不够精准。此时还可以引用另一种方法 Per Pixel Lighting,计算每个像素的光照信息,获得更好的渲染效果,但是往往也带来更大的计算量。

一般常见计算机图形着色算法有三类:Flat Shading、Gouraud Shading、Phong Shading。这些算法虽然看起来和我们设计师没啥关系,但事实上在后面了解 three.js 材质时,就会发现他们在呈现时的差异。

硬核干货!3D to H5工作流应用手册:理论篇

图 2-Flat、Gouraud、Blinn-Phong 着色法比较 [ F1, ©️Stefano Scheggi ]

平直着色法 Flat Shading

这种着色法认为模型中所有面都是平的,同一个多边形上的任意点的法线方向都相同。着色时,会优先选择多边形的第一个顶点或三角形的几何中心计算颜色。这种着色法实践上的效果很像低面模型,也比较适合使用在高速渲染的场景。值得注意的是,这种着色法难以做出平滑高光效果。

高洛德平滑着色法 Gouraud Shading

这是一种平滑的着色方法,在着色时会先计算三角形每个顶点的光照特性,利用双线插值去补齐三角形区域内其他像素的颜色。这个着色法比起平直着色法增加了插值的细节,而且也比 Phong 着色法渲染单个像素的光照特性的性能要高。

但是在渲染高光时,可能会因为无法获取精确的光照值而出现一些不自然的过渡(或 T 型连接容易被错误绘制),此时可以考虑对模型进行细分或使用漫反射材质。

Phong 平滑着色法 Phong Shading

与 Gouraud Shading 不同的是,它会对顶点的法线进行插值,并透过每个像素的法向量计算光照特性。这种做法能绘制出精致、精准的曲面,但是计算量较大。Blinn-Phong 是 Phong 的进阶版,着色性能更好,且高光弥散更自然。

2. 基本光照模型 Illumination Model

简单了解计算机如何绘制 3D 图形后,再来看看它要如何具体理解我们所设计的 3D 场景。

3D 转换成 2D,也就是 3D 栅格化的过程中,每一个像素的颜色是需要基于它所在的环境计算出来,而基于被渲染物体表面某个点的光强度计算模型就被称为光照明模型(Illumination Model)或光照模型(Light Model),透过计算光照模型所得到表面位置对应像素颜色的过程被称为表面绘制(Surface Render)。

*请注意这里说的光照模型并不是指设计师理解的 3D 立体模型,而是指模型对象表面光照效果的数学计算模型。

影响光照模型的因素有两大方面,一是本身给渲染物体材质设置的各种光学特性(颜色反射系数、表面纹理、透明度等),二是场景中光源光及环境光(场景中各个被照明对象的反射光)。

传统光照模型都是对漫反射和镜面反射的理想化模拟,如果要还原基于真实物理世界的效果,光照模型需要遵循能量守恒定律:一个物体能反射的光必然少于它接受的光。在实践层面则表现为,一个漫反射更强且更粗糙的物体会反射更暗且范围更大的高光,反之亦反。

硬核干货!3D to H5工作流应用手册:理论篇

图 3-基于 PBR 的光照模型需要遵循能量守恒定律 [ F2, ©️Joe Wilson ]

光照模型与着色组合在不同的渲染需求下也会有不同的应用:

  • 真实感渲染(Photorealistic Rendering):目的是基于真实物理世界对 3D 场景进行仿真还原。
  • 非真实感渲染(Unphotorealistic Rendering):也被成为风格化渲染(Stylistic Rendering),会更抽象化地对模型进行重绘。

硬核干货!3D to H5工作流应用手册:理论篇

图 4-真实感渲染及非真实感渲染对比 [ F3, ©️Autodesk ]

真实感渲染 Photorealistic Rendering

考虑到真实感渲染对硬件的依赖,目前 webGL 中使用的一般以简单的局部光照模型为主(只计算光源对物体的光照效果,不计算物体间的相互影响,我们看到的“假反射”通常透过贴图来进行模拟),根据反射形态,经典的光照模型有下列几种:

  • Lambert 漫反射模型:

这种模型的粗糙表面(如塑料、石材等)会将反射光从各个方向反射出去,而这种光反射也称为漫反射。理想的漫反射体我们通常称作郎伯反射体(Lambertian Reflectors),也就是我们熟悉的橡胶材质。

硬核干货!3D to H5工作流应用手册:理论篇

图 5-漫反射模型与其他光照模型对比 [ F4, ©️ViroCore ]

  • Phong 镜面反射模型:

这是一种以实验及观察为合成基础的非物理模型。它的表面反射同时结合了粗糙表面漫反射和光滑表面镜面反射,但 Phong 模型在高光处的表现有过渡瑕疵。

硬核干货!3D to H5工作流应用手册:理论篇

图 6-Phong 镜面反射模型视觉构成 [ F5 ]

  • Blinn–Phong 模型:

是在 OpenGL 和 Direct3D 里默认的着色模型,一种调优后的非物理的 Phong 模型,顶点间的像素插值使用 Gouraud 着色算法,比 Phong 着色算法性能更好,而且高光效果也更平滑。

硬核干货!3D to H5工作流应用手册:理论篇

图 7-Phong 及 Blinn-Phong 镜面反射模型对比 [ F6 ]

  • Cook-Torrance/GGX 光照模型:

如果你用过 C4D 的默认渲染器,那么一定在材质的反射通道设置中见过它俩。

这是相对高级的光照模型,不同于 Phong 和 Blinn-Phong 模型仅仅对漫反射及镜面反射进行理想化模拟,这两个光照模型基于不同物理材质加入了微表面(Microfacet)的概念,并考虑到表面粗糙度对反射的影响,对镜面反射进行了调优,使得高光的长尾弥散更加自然,也是目前 PBR 渲染管线(Unity、UE)中较常用的光照模型。

硬核干货!3D to H5工作流应用手册:理论篇

图 8-Phong、Blinn-Phong 与 GGX 镜面反射模型对比 [ F7, ©️ridgestd ]

  • 次表面散射模型 Subsurface scattering/SSS:

终于有一个设计师们常见的概念了。次表面散射是指光穿透不透明物体时(皮肤、液体、毛玻璃等)的散射现象。现实生活中,大部分物体都是半透明的,光会先穿透物体表面,继而在物体内被吸收、多次反射、然后在不同的点穿出物体。以皮肤为例,只有大概 6%的反射是直接反射,而 94%的反射都是次表面散射。

BSSRDF(双向次表面反射分布函数)是用于描述入射光在介质内部的光照模型,目前也被应用在最新的虚拟角色皮肤实时渲染中;但由于 SSS 材质的计算需要依赖深度/厚度数据,所以 webGL 对这种高级光照效果的还原程度还是相对有限的。

硬核干货!3D to H5工作流应用手册:理论篇

图 9-Unity 中模拟次表面散射光照模型效果 [ F8, ©️Alan Zucconi ]

非真实感渲染 Unphotorealistic Rendering

也就是我们常说的 3 渲 2,非写实渲染风格也是从人们对 3D 场景套以 2D 绘画或自然媒体材质需求而演化过来的。因此非写实渲染技术实际上是不同光照模型+不同着色处理共同作用的风格化输出,目前也被大量应用在动画及游戏中,像《英雄联盟:双城之战》《蜘蛛侠:平行宇宙》都是顶级三渲二大作。

硬核干货!3D to H5工作流应用手册:理论篇

图 10-在不同通道中混合应用真实感渲染及非真实感渲染效果 [ F9, ©️Polygon Runway]

  • Cel Shading/Toon Shading:

卡通着色,一种最常见的以 3D 技术模拟扁平风格的着色形式,通常以极简的颜色、渐变及明确的外框线等漫画元素作为风格特征。

硬核干货!3D to H5工作流应用手册:理论篇

图 11-Blender 中不同类型的 Toon Shader 效果 [ F10, ©️Blendernpr]

日本创意编程师 Misaki Nakano 制作了一个非常有趣的 Toon Shading H5 互动页面,大家可以体验一下不同着色形态下非常模型的视觉表现。点击体验: https://mnmxmx.github.io/toon-shading/dst/index.html

硬核干货!3D to H5工作流应用手册:理论篇

图 12-Misaki Nakano 的 Toon Shader 互动网站 [ F11, ©️Misaki Nakano]

  • Customized Shading:

目前越来越多渲染器可支持设计师及工程师根据项目需求对着色进行定制化处理,以产出更具风格化和艺术化的着色效果。例如工业界插画常用的冷暖着色(Gooch Shading),以及更具绘画质感的素描着色(Hatching)及油画水墨画等自然媒体着色,都已经深入到了我们日常的创作之中。

硬核干货!3D to H5工作流应用手册:理论篇

图 13-在 Unity 中,基于真实感渲染的贴图效果与 NPR 水墨风格化着色效果对比 [ F11, ©️邓佳迪]

3. Three.js 材质着色对比

说完真实感与非真实感渲染差异后,我们再来看看 Three.js 中的材质。

和许多渲染引擎一样,除了原生材质外,webGL 的材质和着色都是可以根据需求进行定制的,但这往往会也带来较高的开发成本及兼容性风险。考虑到 H5 项目的实际应用场景,下表罗列了 Three.js 原生材质的对比,包含了材质特性优势、贴图差异及适用场景,大家可以基于项目需求快速选择并混合使用:

硬核干货!3D to H5工作流应用手册:理论篇

图 15 – three.js 材质对比表

4. 色彩描述与管理 Color Space

虽然着色、光照模型以及材质渲染对 3D 表现有着最为直观的影响,但 3D 工作流仍有一个隐秘而关键的环节——色彩管理。

真实世界中按照物理定律,如果光的强度增加一倍,那么亮度也会增加一倍,这是线性的关系。理想状态下,像素在显示屏上的亮度也应为线性关系,才能符合人眼对真实世界的观察效果(如图 b:横坐标为像素的物理亮度,纵坐标为像素显示时的实际亮度)。

但是显示器的成像由于电压的影响,导致输出亮度与电压的关系是一个亮度等于电压的 1.7-2.3 次幂的非线性关系,这就导致了当电压线性变化时,亮度的变化在暗处转换时变慢,如果显示器不经过矫正,暗部成色也会整体偏暗(如图 c)。目前大多数显示器的 Gamma 值约为 2.2,所以也可以理解 Gamma2.2 是所有显示器自带的一个遗传病。

硬核干货!3D to H5工作流应用手册:理论篇

图 15-红色上曲线=Gamma0.45=sRGB Space;绿色下曲线=Gamma2.2=显示器真实成像缺陷;蓝色斜线=Gamma1.0=Linear Space 真实物理世界线性关系

为了矫正显示器的非线性问题(从图 c 校正回图 b),我们需要对它进行一个 2.2 次幂的逆运算(如图 a),在数学上,这是一个约 0.45 的幂运算(Gamma0.45)。经过 0.45 幂运算,再由显示器经过 2.2 次幂输出,最后的颜色就和实际物理空间的一致了,这套校正的操作就是伽马校正(Gamma Correction)。

而我们常见的 sRGB 就是 Gamma0.45 所在的色彩空间,是 1996 由微软与惠普共同开发的标准色彩空间。当照片素材一开始储存成 sRGB 空间,相当于自带一个 Gamma0.45 的遗传病抗体,当它被显示器显示时,就自动中和了显示器 Gamma2.2 的缺陷,从而显示出与物理世界相符的亮度。

另一个校正原因是因为人眼在接受光线时的敏感度也不是线性的,人对于暗部的感知更敏感,对高亮区域感知较弱,而且人眼感知光强度与光的物理强度也刚好是对数关系。为了在暗部呈现更多人眼可感知的细节,Gamma0.45 的色彩空间中(如图 a),像素的实际亮度也会高于它的物理亮度。

硬核干货!3D to H5工作流应用手册:理论篇

图 16-人眼感知光强度与发射光真实物理强度对比

上面那一大段确实有点绕,但也就说回来为什么建议渲染时使用线性空间(Linear Space)了。因为在计算机图形中,着色器的运算基本上都是基于物理世界的光照模型来保证渲染真实性的,如果模型的纹理输入值是非线性的(sRGB),那么运算的前提就不统一,输出的结果自然就不那么真实了。

而在大多数工作流及渲染软件中,大部分贴图资源都是默认输出 sRGB 的(设计师作图环境一般也在 sRGB,所见即所得),而法线贴图、光线贴图等纹理(纯数值类纹理,只用于计算)又是 Linear 的,这个部分就需要我们根据渲染引擎本身的特性,来判断是否需要对不同的贴图进行不同的“去 Gamma 化”处理了(WebGL、Unity、Octane 等)。

将所有贴图进行去 Gamma 化,统一为 Linear 空间后,再在渲染输出时由引擎统一进行 Gamma 校正,这个时候在显示屏里显示的就是接近真实世界的效果了。

更多色彩空间的实际效果比较,大家可以看下 Unity 的文档:《Linear/Gamma 渲染比较》:https://docs.unity3d.com/Manual/LinearRendering-LinearOrGammaWorkflow.html

回到 H5 所用的 Three.js,它的着色器计算也是默认在 Linear 空间,如果最终渲染时不转化为 sRGB,在设备显示时可能会造成色彩失真。在 three.js 中色彩管理的工作流会根据导入模型 Asset 的差异而有所不同,如果贴图与模型是分别导入场景,则建议可尝试以下流程:

1. 输入贴图数据 sRGB to Linear: 含色彩的贴图(基础材质、环境、发光)设编码为 sRGB(texture.encoding = sRGBEncoding),或将渲染设置 renderer.gammaInput 设为 True,可将原为 sRGB 的贴图转换为 Linear,而原纯数值类贴图(法线、凹凸等)仍旧保持 Linear;这一操作可保证贴图输入数据的正确性与统一性。

2. 刷新材质:当材质编码类型被修改后,需要设置 Material.needsUpdate 为 True,以重新编译材质。

3. 输出渲染 Linear to sRGB: 校正渲染输出值的 Gamma:

renderer.gammaOutput = true; renderer.gammaFactor = 2.2;以供显示屏正确显色。

《Part1-理论篇》就先告一段落啦,如果你偶发失眠,建议可以反复咀嚼延伸阅读的内容。

《Part2-实践篇》会继续完善 three.js 场景、材质贴图的制作思路、以及 gltf 工作流,并动态讨论项目常常遇到的还原问题。

2022,咱们需求再见。

附录

1. 着色器差异

像素着色器 Pixel Shader

也称为片元/片段着色器(Fragment Shader), 为二维着色器。它记录了每一个像素的颜色、深度、透明度信息。最简单的像素着色器可用于记录颜色,像素着色器通常使用相同的色阶来表示光照属性,以实现凹凸、阴影、高光、透明度等贴图。同时,他们也可以用来修改每个像素的深度(Z-buffering)。

但是在 3D 图像中,像素着色器可能无法实现一些复杂的效果,因为它只能控制独立的像素而并不含有场景中模型的顶点信息。不过,像素着色器拥有屏幕的坐标信息,可以依据屏幕或邻近像素的的材质进行采样并增强,例如,Cel Shader 的边缘强化或一些后期的模糊效果。

顶点着色器 Vextex Shader

是最常见的 3D 着色器,他记录了模型每个顶点的位置、纹理坐标、颜色等信息。它将每个顶点的 3D 位置信息转换成 2D 屏幕坐标。顶点着色器可以处理位置、颜色、纹理的坐标,但是无法增加新的顶点。

几何着色器 Geometry Shader

是最近新兴的着色器,在 Direct3D 10 和 Open GL3.2 中被引用。这种着色器可以在图元外生成新的顶点,从而转换成新的图元(例如点、线、三角等),而优势也是在于可以直接在着色中增加模型细节,减低 CPU 负担。集合着色器的常用场景包括点精灵(Point Sprite)生成(粒子动画),细分曲面,体积阴影等。

细分曲面着色器 Tessellation Shader

在 OpenGL4.0 和 Direct3D 11 中出现,它可以在图元内镶嵌更多三角体。为传统模型新增了两个着色步骤(一是细分控制着色,又称为 Hull Shader,二是细分评估着色,又称为 Domain Shader),两者结合可以让简单的模型快速获得细分曲面。(例如,含细分曲面效果的模型加上置换贴图就可以获得极其逼真细腻的模型)

2. 一些术语的简单理解

GL: Graphics Library, 图形函数库。

webGL:Web Graphics Library,Html 5 可接入的 3D 绘图协议/函数库,可以为 H5 Canvas 提供 3D 渲染的各类 API。

Z-Buffering:深度缓冲,3D 图像在渲物体的时候,每一个生成的像素的深度会存储在缓冲区中。如果另一个物体也在同一个像素中产生渲染结果,那么 GPU 会比较两个物体的深度,优先渲染距离更近的物体,这个过程叫做 Z-Culling。当两个物体靠很近的时候(16-bit),可能会出现 Z-Fighting,也就是交叠闪烁的现象,使用 24 或 32bit 的 Buffer 可以有效缓解。

Rendering Pipeline:渲染管线/渲染流水线/像素流水线,为 GPU 的处理工作流,是 GPU 负责给图形配上颜色的专门通道。管线越多,画面越流畅精美。

硬核干货!3D to H5工作流应用手册:理论篇

图 17-渲染管道细节工作流 [ F12 ]

Rasterization:光栅化/点阵化/栅格化,就是将管线处理完的图元转换成一系列屏幕可视的像素,过程包括:图元拼装(Primitive assembly)-三角形遍历(Triangle Traversal)- Pixel Processing-Merging。

文章来源:优设 作者:ISUX


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

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

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


日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档