首页

UI设计掌握的交互知识

博博


云和数据西安中心 2018-06-05 17:38:27

交互设计是什么?

交互设计 Interaction Design 也被成为IXD。交互设计建立起了人与计算机便捷沟通的通道,它的目标是创造可用性和用户体验俱佳的产品。我们在工作之中经常会对接交互设计师和产品经理,他们具有丰富的交互知识和经验。那是不是我们作为UI设计师,就只需要专心做好视觉层面的工作而不需要了解交互设计了呢?当然不是,在视觉设计层面更多地考虑布局和交互原则才可以让我们的界面更友好,视觉设计师是交互设计中非常重要的角色。

用户体验

在工作中经常听到UED(用户体验设计)和UCD(以用户为中心的设计),可见互联网行业非常重视用户体验,而用户体验绝不仅仅是要样子好看。有些设计师只关注视觉层面,认为产品战略等用户体验维度和自己的设计无关,那么就会和产品经理等角色处于不同的世界了。“他们为什么要我这么改?”、“为什么这里文字要浅一点?”有时不理解对方的思考角度就会造成争执。用户体验(User Experience)是用户使用产品的心理和感受,用户体验体现了产品设计以人为本的设计精神。其实早在互联网出现之前就有“顾客先点鸡就先有鸡”、“顾客就是上帝”这种说法,并且西方很多大公司如施乐、联合利华等大公司早在互联网行业出现之前就已经开始进行研究用户体验了,可见用户体验对所有产品是多么的重要。但是让人摸不着头脑的是,用户体验有时非常地主观:因为用户体验背后影响用户的因素有人的喜好、情感、印象、心理反应等,有些人明明有摩拜却要走很远找OFO,也有人只吃肯德基而不吃麦当劳。这些选择并不是优胜劣汰,而是有背后的原因的。要想让我们的产品被人喜欢,我们需要研究用户。

UI设计师必须要掌握的交互知识

用户研究七种方法

但用户可能是几百万人呢!我们面对这样抽象的群体然后告诉自己要以他们为中心设计这多么抽象啊。这么多用户甚至有时用户自己的声音也是矛盾的。我们到底怎么样了解用户的心声呢? 

用户画像

根据产品的调性和用户群体,用户研究团队可以设计出一个用户的模型,这种研究的方式被称为用户画像。用户画像是由带有特征的标签组成的,通过这个标签我们可以更好地理解谁在使用我们的产品。用户画像建立后,每个功能可以完成自己的用户故事:用户在什么场景下需要这个功能。这样,我们所设计的功能就会更接近用户实际的需要。比如我们现在要设计一个女装购物应用,那么我们可以做这个用户画像:小美,在北京国贸CBD上班,21岁,收入8000,喜欢淘宝购物和电视购物。使用我们产品的目的是为了寻找正品时尚大牌服装进行网购。小美因为刚毕业所以一方面喜欢大牌一方面又资金短缺(启发:我们的产品是不是要解决这两个痛点?)小美是时尚OL,审美很高,不喜欢俗气的设计。(启发:界面设计是否考虑不要使用粉粉嫩嫩的颜色而使用大牌的黑白色?)。看,即使小美并不真实存在,但是她指引了我们的产品设计。接下来,我们还可以给小美增加一个头像,在做设计时我们想象这个人就是真实存在的用户,她会对我们的设计有什么看法。当我们完成用户画像之后,还可以接着设计用户故事:小美经常需要在工作场合穿符合工作气质的衣服,也需要在约会时有晚礼服之类的服装,可是小美的收入有限,她眼光较高但是对价格过高的服装无法承担,她使用我们的APP就是为了寻找正品且价格适中的服装。那么,小美在哪里用我们的APP呢?这就要为小美继续设计一个用户使用场景了:小美在开会时可能会打开看看、在地铁里也会浏览、在清晨打开衣柜时也会浏览。基本来说是碎片时间,而且是有着装需求时。(启发:我们是不是需要把字号调大以适应地铁里颠簸的阅读环境?我们是不是需要设计省流量模式免得刚刚毕业的小美花一笔巨大的流量资费?)

UI设计师必须要掌握的交互知识

用户画像

用户访谈

邀约用户来回答产品的相关问题,并记录作出后续分析。用户访谈有三种形式:结构式访谈(根据之前写好的问题结构)、半结构式访谈(一半根据问题一半讨论)、开放式访谈(较为深入地和用户交流,双方都有主动权来探讨)。用户访谈设置时要注意:用户不可以是互联网从业的专业人员、不可以提出诱导性问题、不要使用专业术语。用户访谈适合产品开发的全部过程。

问卷调查

可分为纸质调查问卷、网络问卷调查。依据产品列出需要了解的问题,制成文档让用户回答。问卷调查是一种成本比较低的用户调查方法。问卷调查适合产品策划初期对目标人群的投放,另外注意一个问题最好收集10个问卷,也就是如果你有10个问题那么至少要收集100个问卷才是有效的。要知道不是所有人都愿意耐心地填写问卷,很可能敷衍了事的回答会扰乱我们的判断。

焦点小组

焦点小组一般有6-12人组成,由一名专业人士主持,依照访谈提纲引导小组成员各抒己见,并记录分析。并且在焦点小组的房间里会有一扇单向玻璃窗,用户是看不到里面有谁的。而在里面坐着的通常是开发团队,他们可以清晰地看到用户是如何吐槽他们的产品的,但是他们没有权利直接和用户进行解释。焦点小组需要特殊的房间和设备,主持人也需要训练有素,焦点小组特别能够分析出用户在没有我们说明的情况下如何使用我们的产品和对产品的不满。

可用性测试

通过筛选让不同用户群来对产品进行操作,同时观察人员在旁边观察并记录,可用性测试的要求是用户不可以是互联网从业者而应该是真实产品的用户群体。但是可用性测试一般要有一个可用的软件版本或者原型供人测试才可以,在软件开发的前期不适合用这个方法。

眼动测试

使用特殊的设备眼动仪来追踪用户使用产品时眼睛聚焦在哪里,盲区是哪里。比如一个网站通过眼动测试可以知道用户的视觉会自动屏蔽网站的常见广告位置,这时如果希望提高广告的点击,就需要把广告位放置于用户聚焦时间较长的位置。眼动测试的设备比较专业,通常在小公司较难开展。

用户反馈和大数据分析

根据市场提供的反馈和数据得出客观的判断和合理的推测。用户反馈也是用户研究的一个重点,用户反馈主要是用户通过产品的反馈入口主动向开发者提出的意见。

有了这些方法,我们就能更好地了解用户和接近用户了。但是要注意,用户研究也是有陷阱的。比如:填写问卷和参与调研的用户可能并不是核心用户;提交用户反馈的用户之外可能有更多沉默的用户等。总之用户研究是一个必要的手段,但是仍然需要产品团队来对产品的方向做出决断。

用户如何使用产品

使用场景

刚才我们介绍了用户使用的场景是根据产品的功能和平台决定的。电脑的使用场景是正襟危坐,手持鼠标。而移动端则是随时随地使用,我们的用户可能在地铁里、在厕所里、在吃饭时、在上课中怕老师看到把手机藏在桌洞里、在工作中领导巡视后偷偷瞄、在辗转反侧睡不着的时候没有开灯地浏览等。这时我们要为用户考虑,如果他们在使用我们产品的各种场景中有什么需要,是不是需要省流量、是不是需要调整字号、是不是需要过滤蓝光、是不是需要护眼模式、是不是不方便看视频、是不是需要缓存视频、是不是界面目前单手不太友好、是不是扫二维码时需要个手电功能、是不是需要语音提醒、是不是需要清除访问记录。一个不考虑用户使用场景的产品一定是会遭到吐槽的。很久之前我听同事在吃饭时抱怨过“大爷的,也不搞个提示,早晨在地铁里用4G看流量以为是在家用WIFI,结果看了一集《甄嬛传》花了80块钱”、“哎?你是不是早晨开会时玩游戏了?你的比分都给我们推送了哈哈哈”。

UI设计师必须要掌握的交互知识

我的产品中的用户使用场景表格

操作手势

网页设计所处的电脑端目前主要还是依靠鼠标点击来操作。鼠标点击的最小单位甚至可以是一像素。而移动端不太一样,移动端设备中我们使用手指来操作界面。一般来说,手指点触区域最小尺寸为7×7 mm,拇指最小尺寸为9×9 mm。也就是在我们@2x设计中为88px(或44pt)。这个神奇地88PX在移动端应用很广泛:很多表单单项的高度是88ox、导航栏高度也是88px等等。那您可能会说,也不对吧,有些界面上的图标看上去没有88px啊。是的,但是那只是视觉,我们可以通过增加图标点击区域的方式(比如给60像素大小的图标左右增加22像素的透明区域)来让图标更好点击。千万在设计时不要把操作区域放得特别近,可以把所有点击区域用88px标记看是否有重叠的情况,避免点击一个图标时误点另一个图标。除了点击区域,移动端还可以利用各种手势来进行各种操作的设计。主要的手势有:

UI设计师必须要掌握的交互知识

单点触碰(Tap):点击用来选择一个元素,类似鼠标的左键,是最常用的手势。

拖曳(Drag):点击某个元素然后拖拽进行移动,类似现实生活中移动物体的感觉。

快速拖曳(Flick)速度很快的拖曳操作。

滑动(Swipe):水平或垂直方向的滑动,比如翻阅相册和电子书翻阅的手势。

双击(Double-Click):快速点击一个物体,通常会在放大、缩小操作中使用。

捏(Pinch):两根手指头向内捏,捏的动作会使物体变得更小,通常在缩小操作中使用。网易新闻客户端中正文页面即可通过捏的动作来缩小字号。

伸展(Stretch):两根手指向外推,现实中这种操作会使物体向外拉伸,元素可能会变得更大,通常会在放大操作中使用。网易新闻客户端中正文页面可以通过伸展放大字号。

长按(Touch and hold):手指点击并按住会激发另一个操作。比如朋友圈的相机图标长按可只发文字。但是注意,长按不是一个常态操作,所以一般不太建议用户进行该操作。但长按操作又是有需要的,所以会把删除、只发文字状态等操作隐藏其中。

除了用户使用场景、点击区域、手势,那么还有一个影响我们设计的使用情况,就是用户怎么拿手机很重要。用户可以:单手拿手机、双手拿手机、直向拿手机、横向拿手机。我们需要考虑这些可能发生的特征进行手势互动的规划与设计。比如OFO为了让单手(说不定是左手还是右手)操作方便,主要按钮在下方并且做的很大,左右手都可以轻松点击。而微信的很多按钮也都是大长条,方便左右手的触发。横屏使用场景一般是游戏、视频等,所以一般的APP并不支持横屏操作(微信、支付宝、微博均不支持横屏操作),

格式塔:我们如何认知?

我们发现有些用户在使用设计好的界面时找不到一些重要的功能按钮。“奇怪,分享功能不就在更多按钮里面吗?”、“用户怎么连这个也找不到啊”你也许会说。我们要来了解一下用户是如何认知我们设计好的界面的。在初高中考试的时候您一定见过完形填空这种格式吧,“格式塔”源自德语“Gestalt”,意即“整体”、“完形”的意思。格式塔心理学认为,我们在观察的时候会自动脑补出一些逻辑和含义来,会让观察对象变成一个完整的、整体的、常见的形状。

"研表究明,汉字的序顺并不定一能影阅响读,比如当你完看这句话后之,才发这现里的字全是都乱的。"研究格式塔心理学对我们做互联网产品和设计有什么用呢?掌握格式塔的理论我们就可以让用户按照我们安排的“剧本”来交互和操作界面了。我们可以让用户比较容易地根据固定位置找到提交按钮、我们也可以让用户不经过太多思考在杀毒软件中点击杀毒按钮等。格式塔心理学对于我们做好表现层是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大记忆律两个知识点。

接近律 law of proximity

格式塔心理学认为,人们认知事物的时候,会依靠它们的距离来判断它们之间的关系。两个元素越近就说明它们之间关系更强。但是接近也是有对比的,在复杂的设计中,我们要一边考虑它们之间内部的逻辑关系一边来排版。

UI设计师必须要掌握的交互知识

A组和B组因为接近律而产生不同地阅读顺序

UI设计师必须要掌握的交互知识

距离更近的信息暗示了他们有内在的逻辑关系

相似律law of similarity

认知事物时,刺激要素(比如大小、色彩、形状等要素)相似的元素我们倾向于把它们联合在一起或者认为它们是一个种类。比如,我们能轻易的分辨出拨号页面中拨号键和按键群的区别。

UI设计师必须要掌握的交互知识

相似的元素暗示了他们属于一个种类

UI设计师必须要掌握的交互知识

类似外形的单元会被我们人脑默认为同一属类

闭合律law of closure

就算没有外形的约束,我们也会自动把图形脑补完全。比如半个形状或者有缺口的形状我们不会认为是一条线,而是一个完整的形状。闭合是指一种完形的认知规律。

UI设计师必须要掌握的交互知识

左边的图中我们会认为是圆形有缺口而不是一条曲线

右边的图形中我们会认为是圆形被三条线截断了而不是四个图形

UI设计师必须要掌握的交互知识

界面设计中露出一半内容,闭合律让我们感知右边还隐藏着更多内容

连续律law of continuity

在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线,也就是视觉的惯性。利用连续律我们可以让用户操作界面时不经过思考就点击一个固定的位置。

UI设计师必须要掌握的交互知识

深谙连续律的流氓软件

成员特性律law of membership character

如果我们有很多同样的按钮,如何让某个更重要的按钮突出但是仍然让用户感知还是按钮呢?那就要用到成员特性律了。成员特性律赋予了集体中某一个元素特殊的一些刺激元素从而突出它。

UI设计师必须要掌握的交互知识

独特的外形暗示了它与别的元素有不同的功能

UI设计师必须要掌握的交互知识

拨号页面中拨号键与微博发布微博图标都与其他按钮不同

记忆律:我们如何记忆?

接着格式塔五大律还有专门研究用户记忆的格式塔记忆律。格式塔心理学家沃尔夫对遗忘问题所作的经典性研究得出了格式塔的三大记忆律。沃尔夫实验时要求实验体观看样本图形并记住它们,然后在不同的时间里根据记忆把它们画出来。结果发现实验体在不同的间隔时间画出来的图像都有不同。有时再现的图画比原来的图画更简单更有规则,有时原来图画中显著的细节在再现时被更加突出了。还有的比原来的图像更像某些别的我们都很熟悉的图案了。沃尔夫把这三种记忆规律称之为格式塔三大记忆律:“水平化”、“尖锐化”、“常态化”。

UI设计师必须要掌握的交互知识

哪个图形才是正确的?(图片来源:网络)

水平化leveling

水平化是指在记忆中我们趋向于减少知觉图形小的不规则部分使其对称;或趋向于减少知觉图形中的具体细节。

尖锐化sharpening

尖锐化是在记忆中与水平化过程伴随而行的。尖锐化是指在记忆中,人们往往强调知觉图形的某些特征而忽视其它具体细节的过程。在有些心理学家看来,人类记忆的特征之一,就是客体中最明显的特征在再现过程中往往被夸大了。

常态化normalizing

常态化是指人们在记忆中,往往根据自己已有的记忆痕迹对知觉图形加以修改,即一般会趋向于按照自己认为它似乎应该是什么样子来加以修改的。

UI设计师必须要掌握的交互知识

情感化设计是什么?

了解格式塔会让我们把界面做得符合用户的心理预期,让用户能够明显地找到他应该找到的操作。可是用户好像还是不开心,因为用户觉得界面不好看。您是不是也会陷入这样的矛盾:可用性重要还是美感更重要?怎么样能够让我们设计的界面又好用还漂亮呢?情感化设计由唐纳德·A·诺曼博士提出,指的是设计中情感在所处于的重要地位以及如何让用户把情感投射在产品上来解决可用性与美感的矛盾。情感化设计是在抓住用户注意、诱发情绪反应以提高执行行为的可能性的设计。比如红色且巨大的购买按钮能够无意识地抓住用户的注意、可爱萌萌的卡通可以缓解用户网络不好时的焦虑等等。情感化设计有三个水平,它们是递进关系,分别是:本能水平(重视设计外形)、行为水平设计(重视使用的乐趣和效率)、反思水平设计(重视自我形象、个人满意、记忆)。

UI设计师必须要掌握的交互知识

本能水平

我们都是视觉动物,对外形的观察和理解是出于我们本能的。本能水平的设计就是刺激用户的感官体验,让别人注意到我们的设计。这个阶段的设计会更加关注外形的视觉效果。比如各大电商网站的专题页面设计,更加注重抓眼球和外观的刺激。

行为水平

行为水平是功能性产品需要注重的。一个产品是否达到了行为水平,要看它是否能有效地完成任务,是否是一种有乐趣的操作体验。优秀行为水平设计的四个方面:功能,易懂性,可用性和物理感觉。比如好用的记事本APP等。

反思水平

反思水平的设计与用户长期感受有关,这种水平的设计建立了品牌感和用户的情感投射。反思水平设计是产品和用户之间情感的纽带,通过互动给用户自我形象、满意度、记忆等体验,让用户形成对品牌的认知,培养对品牌的忠诚度。马洛斯理论把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我实现需求五个层次。我认为反思水平的设计就是提供给用户归属感、尊重、自我实现。比如Google每逢节日就会有一些符合节日化的设计、网易严选的空状态也会有品牌感的体现等。

UI设计师必须要掌握的交互知识

淘宝空状态中的情感化设计

情感化设计的表达

UI设计师必须要掌握的交互知识

画面 画面是情感化设计的重点,让错误页面或者空状态都成为一幅可爱的插画。

应景 让用户在我们的产品中体验到一些和真实世界一样的氛围变化。

游戏感 没有人喜欢做任务。试着让用户完成的任务变成游戏吧。比如每次登陆加金币,有足够的金币就可以获得什么称号。

冲突 冲突非常能够勾起人的情绪,营造一个竞争或者对抗的氛围,让用户感觉自己置身在一个比赛或者格斗中一样。

讲故事 给产品和无聊的图像一些故事内容,毕竟没有人讨厌讲故事。

隐喻 用一些大家理解,随处可见的事物表达一些无趣、生涩的概念。

互动 给用户和其他用户多制造互动机会,比如排行榜、推荐等,不要让用户感觉孤独。

交互八原则

当我们了解了产品五要素(产品设计的维度问题)、格式塔心理学(用户如何认知的问题)、情感化设计(如何让用户满意的问题)后,我还要给您介绍一大堆地交互原则。这些交互原则会帮助我们设计出更好用的界面,当然也可以帮助我们讲出这样设计的原因。不拿出一些理论怎么能够让别人信服你的设计,对不对?

费茨定律(Fitts’Law)

费茨定律指的是:光标到达一个目标的时间,与当前光标所在的位置和目标位置的距离(D)和目标大小(S)有关。它的数学公式是:时间 T = a + b log2(D/S+1)。这个定律是由保罗.菲茨博士(Paul M. Fitts)提出的所以得名。菲茨定律在很多领域都得到了应用,特别是在互联网设计中尤为深远。我们利用费茨定律估算用户移动光标到链接或者按钮所需的时间,时间越短越。比如有一个按钮在左下角,我们的操作可以细分为两个阶段:第一个阶段大范围移动到左下方向,然后再做微调到达这个按钮之上。所以这个时间受按钮和链接所在位置与按钮和链接大小影响,也就是说我们在做设计时要考虑光标默认会放在哪里、我们的链接按钮是不是太小了。

UI设计师必须要掌握的交互知识

费茨定律说明距离越短、目标大小越大,那么光标到达目标越快

UI设计师必须要掌握的交互知识

费茨定律在网页设计中的使用

UI设计师必须要掌握的交互知识

OFO和苹果音乐APP都将按钮放置手指最容易点击的区域并且按钮足够大

希克定律(Hick’s Law)

希克定律是指一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。它的数学公式是:反应时间 T=a+b log2(n)。在我们的设计中如果给用户的选择更多,那么用户所需要做出决定的时间就越长。比如我们给出用户菜单-子菜单-选项,那么用户可能会很纠结;如果我们简化成菜单-选项,就会减少用户做选择的时间。

UI设计师必须要掌握的交互知识

用户反应时间和选择数量的关系

UI设计师必须要掌握的交互知识

我们应该减少用户的选择

7±2法则

让我们先玩个游戏,请记忆下面的文字,一分钟后移开视线:

挣 多 久 可 猫 风 师 袅 崩 六 酒 望

现在闭上眼睛想一下刚才的文字您能回忆几个?大概是五个到九个之间。1956年美国科学家米勒对人类短时记忆能力进行了研究,他注意到年轻人的记忆广度大约为5到9个单位之间,就是7±2法则。这个法则对我们做界面设计的启迪就是如果希望用户记住导航区域的内容或者一个路径的顺序,那么数量应该控制在七个左右,比如苹果和站酷网站的导航个数。另外,移动端底部Tab区域最多也是五个,而页面中的八大金刚图标也是八个。

UI设计师必须要掌握的交互知识

苹果、站酷、Dribbble等网站导航数量全部是7±2

泰思勒定律(Tesler’s Law)

这个定律是说产品固有的复杂性存在一个临界点,超过了这个点过程就不能再简化了。我们只能将这种复杂性转移。比如我们如果发现页面的功能是必须的,但当前的页面信息过载,那么就需要将次要的功能收起或者转移。

UI设计师必须要掌握的交互知识

Dribbble网站导航将更多功能收起在一个表示更多的图标内

防错原则

一个表单是需要填写完毕后方可提交的。但是用户有时会漏填或者忘记填写,这是用户点击提交会怎么样?很可能有些选项会被清空(比如密码选项基于安全考虑会清空cookies)那么用户还得重新填写。这时解决办法是在用户没填写完之前把按钮设置一个看起来不能点击的样式,用户想提交时弹窗:您还有内容没有填写完哦,然后把用户定位在没填写完的项目,让那个表单高亮。(是不是真的做到以用户为中心啦?)再比如推特只允许用户填写140个字,但用户一写爽了往往会超出140个字那怎么办?解决办法是给他在旁边倒数还能写几个字。看,这些都是我们为了防止用户操作出现错误所做的努力,防错设计就是要减少错误操作所带来的灾难。错误的提示当然需要设计师的设计了。可是也许您不知道有些错误提示含糊,用户并不知道到底错的是哪里,下一步该怎么办。比如仅仅登录功能就可能会有用户名错误、密码错误、网络超时、连续三次输入密码错误、用户名为空等不同的错误,而有些产品仅仅给出“出错了”,那么用户当然会不知所措了。正向的例子比如一次我在登录Google Mail时输错了密码,它提示“密码输入错误,提示:您在1个月前改过密码”。

UI设计师必须要掌握的交互知识

BOO!APP输入密码时卡通会蒙住眼睛,输错时也会有提示

奥卡姆的剃刀法则(Occam’s Razor)

奥卡姆的剃须刀法则主要就是说我们做产品时功能上不可以太繁琐,应该保证简洁和工具化。比如产品中为用户提供了收藏功能是否就不需要喜欢了?提供了喜欢是否不需要点赞了?一定保证功能上的克制。

UI设计师必须要掌握的交互知识

QQ将更多功能收起到了头像和加号图标中

防呆原则

有一个著名的交互书籍叫作《Dont make me think》,翻译过来就是不要让我思考。这句话一直在我做设计时响起:不要认为用户是专家!不要认为用户是专家!有时我们会觉得,点击汉堡包图标当然就是菜单啊!这个按钮长按不就会调出XX功能了嘛。但是我们忘记了普通用户可能并不理解什么是汉堡包图标、什么是抽屉式导航、什么是长按、双指滑动。更何况普通用户并不会研究我们的APP,在他们眼中我们的产品只是众多工具中的一个,我们何德何能认为自己的产品是值得用户花时间学习的?一定要把交互和设计做得简单,并且让用户在别的地方“学习”过。每个页面强调一个重要的功能而不要让用户做选择题。这些都是有效防呆的好方法。防呆和不要让我思考都讲的是我们的设计要自然而然。

UI设计师必须要掌握的交互知识

运动APP KEEP 的页面中总有一个按钮是突出的

防止不耐烦原则

用户是很容易不耐烦的,你还记得你多少次看着视频加载条骂人吗?如果我们需要用户等待载入信息,一定要给一个有情感化的设计提示,避免用户产生焦虑。 比如很多游戏(比如决战平安京、王者荣耀等)加载时都会出现主角跑步的小动画,美团等APP下拉刷新时也会有几帧的动画来安慰用户。动画要好于苹果默认提供给开发的“转菊花”,因为卡通形象更有亲和力。但是好像还不够,用户需要掌控感,“哎?它一直加载,是不是死机了?”为了防止用户没有掌控感,我们可以为用户设计加载条或者加载提示。加载状态条很遗憾很多都是假的甚至是重复的,原因是其实要判断加载了多少M的素材的代码更占资源!我们本来想安慰用户等待加载的时间竟然会变得更长,那当然不行啦。于是很多时候我们会做一个假的加载状态条来安抚用户,我想您一定看过反复加载的加载条吧!加载条下的文案其实也是可以变得非常有情感化设计感受的,比如通常是:加载场景资源、加载素材这样的文案,但是有些APP需要很长加载时间时会给出这样的文案:导演正在准备、女主角准备化妆了、摄像师打开了灯光。是不是更加好玩啦?

UI设计师必须要掌握的交互知识

美团和网易严选的加载动画

总结

交互知识其实关键还要在应用和分析。一方面,我们可以在工作中积累经验,不断地思考如何和同事配合一起研究提高产品在使用时的体验;另一方面,我们也要经常积累一些产品使用时发现的交互。建议大家平时可以收集你觉得不错的情感化设计或者微交互,比如发现饿了么在下雨天送货时会有电闪雷鸣和雨滴的设计;OFO和滴滴打车在不同节日也会把地图找车里的图标换成节日相关的图标;BOO!APP在输入密码时小怪兽会捂住眼睛;WPS在晚上写作时(没错就是现在)会提示你开启过滤蓝光的护眼模式等等。一个好的设计师一定是懂得交互的设计师,也应该是非常细心的设计师,也应该是懂得为用户着想的设计师。

过瘾!这17个海报设计小技巧,果断收藏了!

博博

过瘾!这17个海报设计小技巧,果断收藏了!

图片来源:古田路9号、优秀网页设计、微博

最近设计界有两个段子火了

甲方爸爸说:

“用PS不专业要用photoshop”

过瘾!这17个海报设计小技巧,果断收藏了!

另一个就是

女设计师和甲方爸爸网恋,被骗稿!!

过瘾!这17个海报设计小技巧,果断收藏了!

讲真,大大君我看到这两个段子

默默心疼设计师几秒钟

如果以后还遇到这种奇葩

就把这篇文章砸他脸上

劳资设计一张海报这么难,你的脸够本吗?

过瘾!这17个海报设计小技巧,果断收藏了!

今天大大君我就教大家

17种常见的海报设计技巧吧!

文字分散法则

字体分散的海报设计技巧是我们经常见的一种设计手法,通过将字体拆分重组、改变字体大小、排版来起到吸引目光的效果。

例如下面这些

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

故障效果的设计法则

故障效果的海报设计通常会用把设计的主视觉图形或文字,进行幻影、扭曲、重合叠加等形式去呈现,能迅速将人的眼球吸引过来。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

色彩叠加海报设计法则

色彩叠加法则其实是海报色彩设计技巧中的细分领域,其特色是利用两种或者两种以上的颜色进行画面的切割、重组、渐变、叠加等设计手法,去突出整体画面的主焦点,若色彩搭配好了,会起到非常震撼的视觉效果。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

文字切片海报设计法则

文字切片其实也就是把文字按视觉呈现的需求,进行切割,其设计的优势在于字体呈现较为立体,画面的节奏感强。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

图文叠加的海报设计法则

图文叠加的海报设计法则,多用于电影海报,将人物或者场景与文字叠加,营造一种重复错落的视觉感。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

液态效果的海报设计法则

液态效果的海报设计通常会选择用较为丰富的颜色进行渐变,高斯模糊或者扭曲的形式去呈现,画面的视觉大多以抽象的概念去呈现。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

双重曝光的海报设计法

双重曝光的海报设计用人或者动物与第三方元素进行重合、它最大的特点是利用光与影的结合,打造出比较跨时空的错落感,这种设计手法多用于电影海报。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

单字母的海报设计法则

英文字母的玩法有很多种,叠加,变形、重组等,单个的英文字母同样也可以这样玩,打破画面的单一性,变得趣味性很强。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

正负形海报设计法则

正负形的海报设计其亮点在于利用负空间形成巧妙构图。一张图中隐藏着另一个画面。

大多数的设计师会选用负空间的方式,将视觉中心聚焦在一个比较小的物体上,并在周围留出视觉呼吸空间。将文本置于负空间内,来吸引视线。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

立体海报设计法则

3D视觉效果的海报设计一直都是设计师们比较热衷的表现手法,将字母或者图案加上阴影效果,让主视觉画面凸出来。或者融入几何的图形元素,将平面的主视觉变得立体化。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

文字海报设计法则

文字海报设计包含很多种表现形式,利用满版、留白、S型等排版形式布局画面,让文字代替图形去表达主画面。这也是较为常见的海报设计形式。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

纸质效果的海报设计法则

纸质效果的海报设计其实也属于立体海报的一种,形象和感觉的组合,是纸质效果海报设计的关键。

过瘾!这17个海报设计小技巧,果断收藏了!

而纸张给人的感觉是质感和厚重这两种形式,所以画面的呈现因围绕这两种形式进行展开。

过瘾!这17个海报设计小技巧,果断收藏了!

照片切割法则

照片切割也就是和文字或图形进行重合、叠加、打散的表现手法来增加海报设计的层次感。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

透明效果海报设计法则

海报设计中,如果画面的颜色太过单调,可以将部分块面用较为鲜艳的颜色进行突出,这种表现形式通常适用于海报中文字较多的处理方式。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

复古风格的海报设计法则

复古风的海报设计通常会选用颜色饱和度较低的颜色,搭配毛笔字体或肌理的触感进行呈现,这种设计手法,大多会用于电影海报或者艺术展览之类的范围。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

插画风格的海报设计法则

插画风格的海报设计具备很强的讲故事能力,无论是小清新的画风还是较为夸张的插画手法,都能将整个画面变得生动活泼了很多,这也是很多设计师最常用的海报设计的表现形式。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

渐变的海报设计法则

渐变色系的海报设计,用很多种颜色进行巧妙融合,画面分为简洁和个性两种形式呈现,视觉冲击力很强。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!


微信赞赏浅析

博博


人人都是产品经理 2018-06-06 18:13:32

今天上午,微信对于赞赏功能进行了升级和宣传,他的赞赏对象由公众号变为了作者。由于大量公众号的用户活跃度长时间处于衰退期,此次“赞赏”功能升级最终目的无非是想敲醒沉睡内容生产者。本文主要从它赞赏功能的升级来谈谈微信公众号。

从“赞赏”功能升级浅析:微信公众号如何挽留内容生产者?

6月6日上午微信对“赞赏”功能升级进行宣传,其最大的变化是从赞赏对象由公众号变更为作者,今后免费转载也有可能获得赞赏收益。同时支持恢复iOS端打赏,其打赏金额直接到赞赏者微信账户期间不收手续费。仿佛在呐喊“创作者们快回来吧”

根据企鹅智库《2017自媒体趋势报告》中数据显示显示:自媒体每日新增信息越来越多,加上用户碎片化信息消费方式,使阅读具有较大的随机性而缺乏粘性,不仅很多已关注的公众号信息不一定会打开阅读,打开阅读的概率以及完整读完一篇文章概率都依次递减…..

现在来看看目前的整个微信公众号主线流程:

一、核心业务

从“赞赏”功能升级浅析:微信公众号如何挽留内容生产者?

蓝色部分是整个微信公众平台核心的发动机,由内容生产者输出内容通过微信公众号作为媒介传递给用户,用户反过来以留言点赞打赏来反馈给作者,促进整个微信公众号体系正常运转。

从本次赞赏升级上看,无非是给闭环的最后一到流程增加多了一环“打赏”,这是对原创作者最大的鼓励,值得一提的是今后免费转载也有可能获得赞赏收益,支持和激励原创作者。

下面看看公众号另外2个核心业务。

二、运营加速器 1 号

从“赞赏”功能升级浅析:微信公众号如何挽留内容生产者?

内容生产者的优质内容由公众号信息流进行分发,可从而获得了打赏收入,且符合一定的资格可开通流量主获得额外的广告收入,一定程度上也了激发和鼓励作者提供持续优质内容输出。

同时微信公众号提供原创保护机制及转载和白名单操作,订阅号app的上线也为作者提供更便捷的操作及互动,促进整个内容生态高速运转。

三、运营加速器 2 号

从“赞赏”功能升级浅析:微信公众号如何挽留内容生产者?

根据用户使用场景,不断优化给用户更良好的体验去浏览查看,增加用户黏性和激发活跃度,期间不断收集意见反馈,促进整个内容生态高速运转。

四、猜测后续变化及趋势

  1. 继续丰富订阅号app功能,本次赞赏账户的各种操作,应该很快会在订阅号app里发布上线,此外编辑和发布可以使用视频目前订阅号app也不支持,想必在短视频上继续发力,该功能少不了。
  2. 丰富内容生态,在原有的“公众号消息列表”、“看一看”、“搜一搜”、“群聊及朋友圈”后继续扩大公众号文章出口。
  3. 从争夺用户数量到争夺用户时间,作者的收入不仅仅只有打赏和广告点击,可能后续纳入付费阅读,最大化协助内容创作者持续生产高质内容。
  4. 仅仅按公众号首字母排序远远不够,优化公众号列表分组管理,至于由用户手动分类还是由微信公众号进行分类在此不展开陈述。
  5. 公众号和小程序持续发酵流量互补。

2018年下半年的网页设计趋势

博博


人人都是产品经理 2018-06-06 16:08:27

逐渐热起来的6月,这3种设计趋势将会流行起来……

这个6月,将流行的3种设计趋势

设计趋势最有意思的地方在于,它总会有一些微妙的变化,而每一种趋势的沉寂和回归,总会伴随着不同的转变,甚至会创造出一些全新的设计模式。温度回升进入夏季,这个六月的网页设计趋势都不是全新的东西,都是熟脸,但是仔细看看,会发现在细节上又略有不同。

接下来,我们看看6月流行的这3种设计趋势:

1. 全屏大图

超大的全屏图片在网页设计中已经不算太新鲜的东西了。不过,如果你仔细查看近期的这些使用高清全屏大图的网页设计,会发现设计师们开始越来越多地将其他的元素从整个首屏设计中剥离,让位于背景的图片展示性更强,将屏幕填充得更加彻底。

全屏大图以外,不再有独立的导航区域或者其他的元素,所有的前景元素都位于图片的笼罩之下,网站的一体性更加明显。由于前景元素的缺乏,整个背景图片承担了更多的视觉展示的作用,只有最好、最引人瞩目和有趣的图片才更加契合这样的设计。

下面的三个网站设计案例均是如此,导航等功能都隐藏在大图背景当中,通过汉堡图标和其他的方式来引导用户点击或者吸引用户。所以,图片的素质必须非常的过硬才行。

这个6月,将流行的3种设计趋势这个6月,将流行的3种设计趋势这个6月,将流行的3种设计趋势

而这种设计手法所面对的问题也很具体,比如说大图背景所带来的对比度和识别度上的可用性问题,前景元素和背景图片之间在视觉上的冲突等等。

其他的设计元素,比如线条和「查看更多」和箭头等元素,能够在视觉的引导上起到一定的作用,类似这样的设计细节能够很好的缓解一些上述的问题,不过需要设计师仔细斟酌。

2. 全新分屏设计

我们曾经在设计趋势相关的文章中多次提到分屏设计,而分屏式设计也多次作为月度设计趋势出现在同系列的文章当中。

分屏设计的好处在于它本身可以很好地呈现两方面的信息,并且能够针对不同尺寸的屏幕进行响应。无论是在桌面端屏幕上还是在移动端界面上,都能一次获取两种不同的信息。用户不会错过重要的信息。

不过在的网页设计作品当中,分屏设计本身在功能和形式上并没有太大的变化,不过在处理方式和细节上和以往不尽相同。

首先,这些设计保留了分屏设计的基本思路和精神,也就是将屏幕分为两个部分来呈现信息,但是在划分区域的时候,设计师换了新的思路。Reach Digital 分屏采用的是对角线方向的不对称分屏,黄白双色对比强烈,而同样采用对角线分屏的 Cap GunCup Creative 则使用了更为简约的黑白配色风格,Weima 这个网站则采用了传统的左右分屏,但是分割的比例是按照3:1来划分的,这种分割方式更加有趣。

这个6月,将流行的3种设计趋势这个6月,将流行的3种设计趋势这个6月,将流行的3种设计趋势

分屏设计的好处在于它可以应对多种多样的设计。无论是小型网站,还是大量的内容,分屏的设计都可以让用户参与进来。分屏式设计为用户提供了两种不同的选择,不难理解,功能也很直观。

3. 低透明度色彩叠加

在图片和视频上叠加色彩也不是什么新鲜的玩法,它是非常受欢迎的设计手法和趋势。这种设计技法让设计师可以更轻松地创建层次分明的效果,可以通过色彩叠加来创建更为统一的视觉效果,控制对比度,营造氛围和情绪。

这种设计当中,透明度的控制是极为关键的一个步骤。通常,设计师不会让色彩叠加层透明度太低,这样用户就可以一目了然地看到背景的图片信息。不过,在今天的这几个案例当中,用户需要仔细分辨才能看清背景中被盖住的内容,因为色彩叠加层的透明度不高,对背景图片的遮盖力很强。对于这种设计趋势,我们可以简单分析一下:

  • 这种设计看起来是很酷的,低透明度让背景以纹理的形式呈现,更加富有深度,创造出吸引人的视觉效果。
  • 这种设计趋势不适合传递背景信息,因为低透明度确实很难让背景的细节清晰地传达出来。

那么,这种设计趋势是否值得追随呢?这个就要具体问题具体看待了。

不要使用这种趋势来呈现关键性的图片信息,如果你仅仅只是要借助图片搭配色彩叠加来强化层次感、增加信息量,那么另当别论。

在下面的每个案例当中,前景的元素都足以传递出清晰的内容和信息,彩色叠加层后的图片内容更多是装饰性的。图片虽然都提供了一些附加的信息,但是这些信息都不是关键,它们更多的是强化视觉。

这个6月,将流行的3种设计趋势这个6月,将流行的3种设计趋势这个6月,将流行的3种设计趋势

这是一个适用范围相对较窄的趋势,如果你想使用的话,同样需要控制好透明度。

结语

跟随设计趋势是一个非常有趣的事情,它可以让你的设计保持新鲜,让你的设计在激烈的竞争中脱颖而出,它同时可能还存在一些风险,需要你在使用的时候仔细衡量。


UI设计改稿经验总结

博博


UI大课堂 2018-02-01 00:00:39

提到这个话题有两层不同的讨论方向,在工作中对公司项目进行设计改版和利用业余时间进行自由主题的改版练习。这次我们主要以后者为出发点进行讨论,其目的是为了给部分设计师在利用自己业余时间上面探索出一个新的方向。在工作项目中进行UI设计改版分为团队发起和自我发起,这个我们下一次一起来讨论。

UI设计师的自我提升来源于多方面的综合体现,工作项目中的实战经验、团队协作的互补学习、项目沉淀与反思、碎片化阅读的查漏补缺、业余时间的自我驱动、阅读带来的知识沉淀等等。如何充分利用自己的业余时间是被很多初入行业的设计师所忽略的,一晃三五年过去了,却发现自己找不到更多的作品用来丰富简历,很快便进入了瓶颈期。

面对未来的自己可能会出现这样的情况,我们一起提前探讨一下这个话题,以 UI设计改版为突破口展开我们的话题,希望带给即将入行和刚入行的设计伙伴儿一个新的方向。

目录

1、UI改版的目的,从不做无意义的事情;

2、制定时间规划,是为了治疗懒病;

3、如何挑选改版产品,再也不是选“美”了;

4、体验,这是你的第一次深度探寻;

5、功能梳理,理清流程好开工;

6、竞品分析,做好知己知彼;

7、素材采集,打开禁锢的思维;

8、体验,走了一圈才发现你可以更好;

9、交互设计,实现你心中的更好;

10、设计风格推导,符合产品的设计趋势运用;

11、界面设计,碎片化积累;

12、审核,寻找导师;

13、调整优化,不放过任何一个细节;

14、包装,整理设计思路;

15、分享,设计交流。

正文

1、UI改版的目的,从不做无意义的事情

工作中的项目参与对UI设计师的专业提升是非常重要的,由于很多公司都处于高速发展的阶段,项目的周期很紧张,都希望每个支援板块能够具备更高的效率,推进项目更快的完成迭代上线。在设计板块,很多成熟的平台也是愿意花费更高的福利待遇引进资深及以上级别的设计师支持项目的运转,那么设计师的进阶之路便是你在职场中稳中求进的关键。

在真实的场景中,有一部分设计师也存在着以下情况:

  • a. 项目参与度低,没有更多的机会发挥自己的专业;

  • b. 公司产品迭代缓慢或者视觉支持较小,空余时间较多;

  • c. 没有机会在项目中尝试一些新的设计语言;

  • d. 自学 UI 中,没有真实项目能够发挥;

  • e. 增强设计效率和产品设计思维等能力。

如果你拥有以上的情况之一,利用自己的业余时间进行 APP 设计改版将会给你带来更多的提升空间,不但可以通过练习增强自己的设计效率,也能体验更加丰富的产品设计。在改版中也能不断加强一些交互或者产品的思维,可以让你在以后的工作项目中不局限在视觉层面,具备更多的产品思考,做出更合理的设计。

UI设计改稿经验总结

2、制定时间规划,是为了治疗懒病

如果你想要改变现状,也拿出前所未有的热度值,那就趁热打铁吧,制定一份时间表是必须的,千万别忽略它的重要性,如果你不按照这个时间计划去推进,可能这个热度值将会被懒宝宝不断地熄灭^_^。

制定时间规划不仅可以合理的利用好自己的业余时间,也能更好的按照这个规划表去逐步的推进这次改版项目,把一个大的事项拆分为若干的小事项,每天推进一部分,一次改版设计很快就在不断的推进中被完成。

APP 改版时间规划表大家可根据自己的习惯设置,表格形式还是简单的文字记录都可以,进度把控需要结合自身情况而定,确保其有效性。

UI设计改稿经验总结

3、如何挑选改版产品,再也不是选“美”了

面对应用商城里面海量的 APP 产品,你是否有点不知所措,如果选择一个自己从来不玩的 APP,改版的时候对产品的服务模式、功能架构、交互逻辑等都是比较陌生的,需要一定的时间进行学习。如果选择一些大型的产品,由于其自身的设计团队就是非常的专业,你很难从中发现可以优化的点,即使勉强进行改版,也会发现自己设计得不如原版的好,进而打击自己的自信心。

通过上面的分析,我们在挑选改版产品的时候,需要结合自身的一些情况先做出一定的预判,然后再去挑选现阶段相对比较符合的产品进行改版练习。

a. 挑选自己接触过的直接产品或者间接产品;

b. 对 APP 里面所提供的产品或者服务比较认可或者没有一定的排斥感;

c. 挑选无论是视觉层面还是交互层面都有一定优化空间的产品,别轻易尝试精品;

d. 如果身边有朋友使用过的产品优先考虑,因为可以成为你调研数据的来源;

e. 选择阳光积极型的产品,不做传递负能量或者违反规定的产品;

f. 初次尝试 APP 改版设计,从轻量级的产品入手,可以控制练习时间和自己的驾驭度。

UI设计改稿经验总结

4、体验,这是你的第一次深度探寻

当你确定自己改版的 APP 对象以后,我们就开始做一次体验吧,这是你的第一次深度探寻。体验情况根据设计师对该产品的熟悉程度而定,你需要通过不断的进行操作把自己从小白用户升级到专家级用户。

这个过程需要你对产品有一个很深入的了解,不只是熟悉主流程操作逻辑,对一些偏冷门的功能操作也要非常的熟悉,如果是需要注册使用的产品,一定不要忽略注册会员以后的体验。最终达到的级别是你可以向身边任何一位朋友轻松的进行推荐和演说,能够通过你的讲解让他轻松地学会使用该产品。

UI设计改稿经验总结

5、功能梳理,理清流程好开工

当你对改版 APP 进行第一次深度体验之后,利用思维导图软件绘制出整个产品的功能结构图,思维导图软件种类很多,大家自行选择,我常用的是 MindNode。第一次进行功能梳理无需进行增删处理,真实还原产品现有功能即可,其目的是整理自家“仓库”,做到心中有数。

在进行功能梳理的时候,如果遇到操作复杂的功能需要备注信息,以便自己后期预览时能够快速理解其含义。如果是第一次做功能结构图越详细越好,这将有助于你充分理解每个功能传达的含义。

UI设计改稿经验总结

6、竞品分析,做好知己知彼

深度体验完改版 APP 之后,做了功能结构图,此时你对所需要改版的 APP 以及这个行业的产品都有一定的认知,此时你再去体验直接竞品和间接竞品必然是以一个专家级用户的水平去探寻。在体验过程中需要结合改版产品的功能进行对比,可能第一遍体验无法很好的进行对比,所以需要至少体验 3 次以上才能很好的得出对比的结论。

体验产品时需要注意的几个维度:

  • a. 不要急于进行总结,先进行至少 3 次以上体验;

  • b. 先看整体布局再分析局部细节;

  • c. 重点功能交互形式需要提取出来进行对比;

  • d. 主界面的各版块布局设计需要进行对比;

  • e. 配色分析,作为改版时的配色优化指导;

  • f. 图标和组件库的分析,找出细节的优化方向。

进行竞品体验时,尽可能多的找出差异化的设计形式,作为改版 APP 优化的指导方向。由于作为 UI 设计师进行 APP 改版练习更多是视觉优化为主,交互优化为辅,所以我们需要在相同模块上面找出更多不同的设计样式,作为视觉优化的方向。

如果你自身交互能力较好,也可以以交互优化为主,视觉优化为辅,这个可以结合自身情况选择。在进行竞品体验的时候也要根据优化目的的不同,着重的转移体验的重心。

UI设计改稿经验总结

7、素材采集,打开禁锢的思维

通过竞品体验你会总结出改版 APP 各个模块的差异化,相同的功能模块各自产品的交互形式、布局样式、视觉风格都存在各自的差异。此时,你对改版 APP 中的很多设计都一个初步的优化清单,你需要再深入一步,因为竞品的设计样式不一定就是值得借鉴的,我们需要寻找更多的灵感,打开自己禁锢的思维。

通过国内外的一些设计平台、素材网站等我们可以去采集更多的设计样式作为灵感借鉴,日常的一个采集收藏习惯也就变得尤为重要了,作为一个优秀的 UI 设计师,我们需要养成这样的习惯。个人平时经常访问的设计平台有站酷、UI中国、致设计、Dribbble、Behance等,采集收藏灵感会经常用Pinterest和花瓣,都是一些大家经常访问的平台,所以不是别人知道你所不知的优秀平台,而是你没有他的良好习惯。

UI设计改稿经验总结

8、体验,走了一圈才发现你可以更好

采集完一些灵感素材之后,我们又回到体验改版 APP 的起点,走了一圈之后你会发现改版 APP 中很多你可以入手优化的方向,比起第一次体验,你会更加有信心能够做出一个不一样的设计作品。再次进行产品体验的时候,你需要带着脑海中处理相同功能板块的不同设计表现形式进行思考,寻找出更好的设计表现形式来解决这个功能模块。

在构思优化样式的时候,可以绘制一些简单的草图,以防后期进行交互输出的时候遗漏灵感细节。在进行设计优化的时候先从灵感库中寻找较为符合的样式进行思维嵌套,然后再发散思维,融入自己原创性的思维,形成自己的原创思路。

UI设计改稿经验总结

9、交互设计,实现你心中的更好

通过前期的准备工作,我们即将进入重要的设计部分,大家不要忽略前期的准备阶段,只有思路成熟且清晰,后面的设计工作才能更加顺畅。

作为 UI 设计师最终输出的必然是高保真的视觉稿,那么交互原型设计是为了快速的把自己的思路展现出来,所以不局限于原型软件的绘制,哪怕是纸上的草图绘制也是可行的方案。最终的交互稿是给自己看的,所以能看懂就能达到最终的目的。

如果你考虑后期进行作品包装展示时,希望能展示出交互思维,那你花点时间适当的对低保真交互原型进行绘制也是不错的选择,也能锻炼自己原型制作软件的操作能力^_^。

UI设计改稿经验总结

10、设计风格推导,符合产品的设计趋势运用

在开始进入界面视觉设计时,我们需要对整体 APP 设计做风格推导,这将直接关系着最终界面呈现的效果。如果你是一位对行业趋势关注的设计师,各种设计趋势呈现在你脑海中,你需要进行筛选,结合改版产品的属性选择合适的设计语言去表达,切不可为了趋势而牺牲产品定位。

在进行风格确定的时候,颜色的选择也占据一定的因素,我们可以选择改版 APP 现有的主色进行优化,也可以进行推翻重选。如果是重新选择配色方案,我们可以通过情绪版的方式在身边朋友或者各种群里进行。也可以与竞品形成视觉差异化,选择一些形成对比的配色方案,方式很多,大家根据自己的条件和思路自行展开。

确定好配色方案之后,我们需要考虑设计的表现形式,无论是何种设计形式都需要符合产品的属性。比如大标题、大圆角卡片、大投影等设计表现形式会在视觉层面带来不错的效果,却需要考虑信息量的因素,如果本身改版 APP 就属于信息量很大的产品,在选择时就要综合考虑。根据 APP 的风格定位,比如文艺类、娱乐类、儿童类等,那么设计的风格也会对产品风格定位起到一定的影响。

UI设计改稿经验总结

11、界面设计,碎片化积累

当你打开设计软件进行界面设计的时候,剩下的就是“满血复活”的激情,为了能够充分利用好业余时间,我们需要把数十个界面分配到具体的日程中,的利用碎片化的时间进行积累。规定自己一天完成两个界面,就要严格执行,只有这样你才能具备超强的战斗力。

提到界面设计很多设计师会纠结在软件的选择上面,总会问老司机们你们用什么软件,其实软件的选择并不是问题,它只是一个工具,用的顺手即可,现在很多软件都能带来最终的目的。随着很多轻量级的软件不断丰富多样,软件的操作也更加简单便捷,只要你充分的利用互联网资源,软件的学习只是熟练度的问题,设计的思路与技巧才是需要更多的学习、研究和总结。

UI设计改稿经验总结

12、审核,寻找导师

历尽艰辛你收获了希望,一套 APP 改版设计作品初步完成,接下来你需要寻找到一位导师,俗话说当局者迷,你自己构思出来的东西需要得到验证,寻找一位资深的设计老司机给你指点作品,将会给你的成长带来很大的帮助。他们会站在更高的专业角度给你指出一些优化建议,也能使你的作品更加成熟。

导师在哪里?

  • a. 可以是身边的同事,别以为导师一定是大神,旁观者的意见都是具有一定的思考价值;

  • b. 通过一些设计交流群寻求意见,建群的意义其实就是交流设计(可是现在演变为畅谈人生了/(ㄒoㄒ)/~~);

  • c. 通过设计平台寻找那些活跃的老司机,只要是真诚的设计交流,他们都会乐于分享;

  • d. 机缘巧合下加上的大神微信或者QQ,平时要注意不要群发小广告去骚扰他们,他们关键时候会乐于给你专业性的指点;

  • e. 相信你能找到更多的方法,寻求帮助。

UI设计改稿经验总结

13、调整优化,不放过任何一个细节

通过不同形式的意见反馈,我们即将面临一次调整优化,在众多的反馈意见中,我们也不能盲目的进行修改。我们要做有思考能力的设计师,去分析这些修改意见,遇到意见相左的修改建议要结合自己前期的调研进行把控,因为提意见的人不一定能像你一样熟悉产品,可能存在一定的主观性。

选择性的进行修改,也要保持自己的自信度,适度的自信可以增强你对作品的信任度,我们不能总是质疑自己的能力,只要保持不断努力学习的心态,有时候也要相信自己的专业能力,相信自己就能给作品带来自信度,你的需求方才能被你的专业意见所引导。

UI设计改稿经验总结

14、包装,整理设计思路

作品包装总是会被很多设计师所忽略,在进行作品展示的时候也比较随意,没有充分利用作品包装的优势传达出作品自身的价值。我们将作品展示出来进行交流时,需要通过适当的包装把作品更好的一面清晰的传递给读者。

在进行作品包装的时候,可以加入自己的设计思路辅助传达出作品背后的故事,让读者更容易走进你的作品。通过包装把原本单调的独立界面进行解剖,利用整体布局、局部提炼、细节展示、文案描述、思路整理等形式,让作品呈现效果更加丰富多样。

作品包装中一些简单的设计技巧:

  • a. 作品包装设计中的版面布局需要舍得,适当加大留白会给版面更强的呼吸感;

  • b. 局部提炼,对界面设计中的一些视觉表现力强的样式提取出来独立展示,丰富作品的细节展示;

  • c. 精心挑选样机,让作品展示效果更佳,有时候也可以自己绘制更加简练的样机模型;

  • d. 设计组建选择性展示,增删挑选的组建让布局更加整体,视觉效果更加协调,整体组合形成块面感;

  • e. 利用对比突出重点,不要使整体布局都处于平面化;

  • f. 装饰元素的运用,可以利用辅助图形、短线等进行设计装饰;

  • g. 加强头图设计的视觉表现,提高读者的注意力。

作品包装设计分为平台型作品包装和作品集包装,也是需要我们设计师加以重视的一个板块,以后我们单独进行这方面的研究分享。

UI设计改稿经验总结

15、分享,设计交流

此时,你已经完成了这次 APP 改版之旅,恭喜你击败了懒宝宝,相信下一次你会具备更强的自我驱动力。完成一次作品你可以选择封印在冰冷的硬盘,也可以选择分享给更多的设计朋友,大家互相学习和讨论,个人比较倾向于后者。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

博博


天极网 2018-06-04 18:18:17

5月31日,小米在发布会上推出一代操作系统——MIUI10。近日,小编顺利通过了MIUI10的内测申请,于是将手里的小米5第一时间更新,一起来看看官方给新系统定义的几大更新亮点吧。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

首先,在更新MIUI10内测版之后,老旗舰手机小米5焕然一新,变得流畅许多。此次新系统主要是针对全面屏做的设计,具体表现在状态栏和多任务的排版上,UI设计结合了Andrid P和iOS风格,整体比较清新。在点按之后,图标会变成蓝色,开关按钮采用了翻页的形式,而且可以容纳的数量也比以前多了。虽然在风格上进行了大量的修改与整合,不过最终还是没能逃脱“苹果味”。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

小编觉得MIUI10最大的变化就是多任务面板,之前的MIUI9、MIUI8等版本均为横向布局,而此次MIUI10变为了纵向布局,交互方式上有些变化。官方宣称这是可以在一块屏幕上看到更多的多任务。其实就是迎合了全面屏的理念,而又不想太过抄袭苹果的多任务,最终就出现了这样的产物。说实话,小米5上的MIUI10多任务面板不是很好看,但是使用效果还不错,多任务左右滑动是关闭,长按就有分屏,锁定和设置三个按钮。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

接下来是本次新增的驾车模式和小爱同学。之前MIUI9也有语音助手,不过稍显“智障”,并没有太多实用性。MIUI10上,小爱同学增加了训练计划,可也设定提问他要回答的答案,实用性大大增强。驾车模式应该是广大司机朋友最关注的功能,全新的驾车模式在小爱同学的帮助下,可以做到边开车边回复消息,同时还能保证开车的安全性,非常实用。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

再来说说小编遇到的问题吧,因为是MIUI10内测第一批版本,BUG多也是可以理解的。刚小米5升级MIUI10后,虽然操作确实很顺滑,不过头疼的BUG使得系统整体性没那么强。有几个BUG甚至把传统的16:9手机当成18:9的手机来显示。需要提升的地方还有很多,比如消息通知会跑到下面来,就像有虚拟的刘海,还有充电的时候电量小圆圈也只能显示四分之一,还有改不了热点的名字和密码。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

最后总结一下这几天的使用体验,MIUI10系统的外观设计与流畅性自然不必多说,提升蛮大的。最让小编印象深刻的还是杀后台情况,3G内存的小米5在MIUI9系统下杀后台现象非常严重。在MIUI10下,这种情况改善了许多,使用时没有以前那么“虚”,强烈推荐老旗舰手机升级。另外,小编发现“小爱同学”贯穿在了MIUI10中,许多地方都能见到AI智能的身影,相比MIUI9“聪明”了许多。总的来说,内测版MIUI10的升级非常到位,焕然一新的UI设计以及交互方式,提升颜值的同时也提高了档次。

从月薪3000到月薪30000,设计师更该专注什么

博博

从月薪3000到月薪30000,设计师更该专注什么

SODO学堂 2017-09-11 19:17:47

从月薪3000到月薪30000,设计师更该专注什么

又是一篇长文,但有用

花5min读完,你会有收获

我知道很多人看了这个题目可能是冲着“月薪3000到月薪30000”来的,想看看一个人的成功背后的故事。但是今天恐怕要说,一个人的成功有TA自己的机会和运气,而方法论才是更重要的。

让自己成为一个更值钱的人才是要紧事,任何一个职业都一样。

所以,今天就来说说,怎样让自己成为一个“更值钱”的人,以及想要充实自己,你应该抓紧每一个周末甚至平日的时间做点什么。

01

关心收入之前先确保自己有能力

总有人在后台也好,在知乎也好,在各种能私信的地方问我:

“我学的是xx专业,现在在哪里哪里做着一份如何如何的工作,工作了1年多,我怎么才能让自己快速增加更多的收入呢?”

一般说来,本着切合实际的原则,我也会告诉他们:“工作才1年多,最重要的是要先稳定自己的设计水平,持续有高质量的输出,然后积累自己的作品,增加自己的设计能力。然后再关心所谓的赚钱和收入。”

简而言之,先有能力,再谈机会和收入。

从月薪3000到月薪30000,设计师更该专注什么

所以,这么看来,这些人应该优先转化一下自己思考问题的出发点,比如下面这样的问题会更具体、更符合实情:

“我应该报什么样培训班,应该快速获得什么样的专业能力,才能在工作中有赚更多钱的可能?”

“工资1w+的设计师,做出来的东西是什么样?我怎么才能尽快做出同样的设计?”

但其实,这样的问题我也并没有一个一概而论的答案,不同公司的规模不同,大平台和小公司所需要的能力、技能、水平都不同。

举个例子,一般大公司的设计师职位划分可能是非常细致的,每个人就干小范围那一类活儿;小公司就比较杂了,可能设计稿你要做、市场沟通你要做,还要懂一些运营知识等等。

像是1w+这种以薪酬来论能力的情况并没有统一标准的答案,和公司、行业、环境、城市、专业、竞争力等等很多因素都有关系。

这里给大家一个建议,如果你想知道一定收入的设计师达到什么样的水平。可以去招聘搜索网站按照薪资去排查搜索,会出来一批公司的list;然后再相应去找每一家你感兴趣的公司的官网或者电商网站(某宝之类)看具体出来的是什么感觉的设计,这是最简单也直观的方法

所以,下次问类似问题的同学,应该知道怎么办了。

02

不要为了多那一点收入而耗光自己的精力

我发现有很多同学都很迷茫一个事儿。大家似乎都想快点赚到更多收入:“作为设计师是不是可以利用私人或周末时间接点私单?这样还能认识更多的人,有额外收入,还能积累到更丰富的设计经验?”

有这种想法的人应该挺多的,毕竟设计师1-3年内都很少能让自己攒下什么钱,社会加注给每个人的经济压力都很大,也无可厚非。

但是,我个人的看法是,如果你想要“吃更大的蛋糕、做更大的事情”,那么不要为了多那一点点收入,而在这个阶段因为接私单而耗费掉自己太多的额外精力。

从月薪3000到月薪30000,设计师更该专注什么

为什么这么说?

一般有这种想法的人,基本上都处在设计水平中等偏下的位置,也有一点设计项目的经验了,也有那么些稿子了,但是每一个项目做的不算出彩。知识不够扎实、资源不够丰富、人脉半上不下,又一心想要赚多点钱,所以才想着跑去接私单。一般,还只能接廉价的私单。

但是基本上都会面临被私单逼疯的境地,具体表现为:

1. 因为廉价私单单主逼格不高,所以瞎指挥的情况较多,改稿无数是常态

2. 改稿会经过反复沟通协调,又耗费掉大量时间,沟通不善的情况也较多

3. 廉价私单越多,品味会越来越差,陷入丧失信心还没时间充电的焦虑中

总之,如果你想保持个人精进,最好还是抽出时间来充电和充实自己,不要想着眼皮子底下那一点点收入。心态的差异与专注执行在哪儿,是造成月薪3000→4000还是月薪3000→30000的本质原因。

03

让自己更专注在这些事情上

既然坚持走在设计的道路上,那么真正保持让自己有核心竞争力、让自己可以持续创造更多财富的做法,大家可以参考并尝试以下几个方面:

观察优秀人群,学习并模仿

如果你和我们一样不是天生自带尚方宝剑含着金汤匙出生的人,就不要在起跑线上幻想自己可以很快靠做图成为“设计界的马云”。最好还是踏踏实实稳中求进,这样比较不会带来那么多消极情绪。

正常说来,在一个人的社交圈中,周围总有人的水准是高于自己,也有低于自己的。而你要关注的就是设计水平和能力高于自己的人,用心观察和留心他们的习惯,感受自己究竟还有哪里可以进步,学到这些人的长处并且活用。

不要光是说想学习然后只是放嘴炮,要踏实地付出行动。一般说来,值得被学习的方面有:

执行力强多于嘴炮

期待并拥抱改变

自我驱动力做事

积极乐观热爱光做

关注设计行业信息

说到这个,又想起来周末有个同学私信我问什么是“时尚管理”,是不是从国外学习这个专业毕业之后就能进品大公司,在品牌强大的背书下挥斥方遒。

我记得我跟她说:“有人觉得自己在圣马丁服装设计专业一毕业就能成为约翰·加利亚诺,怎么会如此天真?

后来我真诚地建议她“多去看一些行业信息,比如BOF,这样你至少能对这一行究竟是哪一行、做什么事儿、市场行情啥样有最基本的了解和判断。”

不知道不可怕,可怕的是单纯地活在自己幻想的世界里不肯去了解真相。

选择一个方向,坚持越久越幸运

很多同学觉得学设计也不一定非得只做高级设计师,听说学设计还有很多其他的出路,比如做设计培训行业的老师、注册账号做设计类自媒体、自己设计自创品牌、做freelancer到处走穴等等等等。也不知道到底哪个算是真正滴适合自己,于是每一个为期半年,都试一试,不成功就换下一个。

不过试的越多越发现,似乎都没成功,哪个试到一半都觉得就那样,总是会有各种各样的问题和自己最理想中的状态有区别。

在这个跳槽说跳就跳的年代,脚踏实地去慢慢积累的人正在越来越少。

但没有100%理想状态的工作的,培训参差不齐容易入坑、自媒体竞争惨烈千篇一律、自创品牌需要人脉财力持续支持、自由职业者要面对强大的自控力和专注力考验……不论选哪个都会有自己赚钱的方式也会遇到自己的问题

你需要做的,只是选定一个方向。愿意多点点耐心在一个方向上积累和沉淀自己,别把精力分得太散,先做好手头上的事儿再说。

知道自己哪里最强、哪里

设计师应该都听说过要保持自己的核心竞争力,要让自己的活儿做得原来越精良,越来越好。但是只有这一点我觉得还不够,你应该在明确自己的核心竞争力之外,还知道自己的的差异化竞争力在哪儿。

比如,同样是UI设计师,你的UI界面做得好是你的核心竞争力,此外,你有产品设计学习基础同时又超级会做总结,写文案你也不在话下,那么,你的差异化竞争力就包括了“ID设计基础、会做总结、会写文案”3项加分点。

当你明白了这一点,你也知道原来做好设计本身之外还有好多可以精进可以学。

总之,多去想想该如何提升自己的设计能力,保持的优势,同时尽可能深耕下去走得久一点,做到这些,你的收入自然如水到渠成般地增值翻翻。

2018年的20个最佳网站设计启发你!

博博


番茄匠APP 2018-05-18 15:07:48

美丽的获奖网站

1. Feed

奖励:Awwwards当日的场地(6/6/2015)

Feed不仅是一个有趣的概念,它还有一个令人惊叹的执行过程,它挑战了我们对网络上的可能性的理解。通过动画和视频的创意融合,该网站让用户沉浸在非常吸引人的体验中。作为一个非典型的网站,它还包含几个独特的可用性元素,其中包括一个导航,可以作为滚动进度条加倍。

2018年的20个最佳网站设计启发你!

2. crypton.trading

奖项:Awwwards当日的场地(4/3/2018)

认识你的机器人会计师crypton.trading。

Crypton.trading是比特币等加密货币的交易中心,它使用人工智能来预测货币价值的变化并确定关键的购买和销售机会。该网站因其开发和设计而被评为高,因为它逐渐向更多的下游游客滚动,更多地解释了开发者的方法。

这个屡获殊荣的网站让熟悉技术的访问者在主页上出现Crypt的问候时感到宾至如归,每次只有一封信。

2018年的20个最佳网站设计启发你!

3. ETQ

奖励:Awwwards当日的场地(5/19/2015)

ETQ采用非常简约的电子商务方式,在精简的网站上放置大量引人注目的产品视频。简单,平坦,基于颜色的背景伴随着强大的印刷术,有助于将注意力集中在用户到达的地方:鞋子。

2018年的20个最佳网站设计启发你!

4. Mikiya Kobayashi

奖励:Awwwards当日的场地(7/4/2015)

Mikiya是一位产品设计师,拥有简约的作品集,通过强大的摄影和微妙的动画展示了他的作品。他的全部网站最初是用日文创作的,然后翻译成英文,这有助于展示他设计的国际可扩展性。

2018年的20个最佳网站设计启发你!

5. Inside Abbey Road

奖项:最佳音乐网站,2016年威比奖

谷歌通过这个高度互动的网站将它从公园打出来,让用户可以进入Abbey Road Studios。辉煌的声音设计,导航机制以及混合了通常的“Google风格”的视觉效果都有助于吸引访问者访问这个制作精良的网络媒体资源。

2018年的20个最佳网站设计启发你!

6. Citrix: The New Mobile Workforce

奖:每日网站(11/23/2017),最佳网站图库

这个网站致力于红牛与基于云计算软件公司思杰的合作,这是非常了不起的。

新移动员工队是思杰旗下的一个网站,它使用全景摄影技术向观众展示思杰如何支持红牛车队的新赛车。即使你不是赛车爱好者,该网站的巧妙动画也可以解释复杂的汽车技术,这一点很难忽略。

2018年的20个最佳网站设计启发你!

7. The History of Climate Change

奖励:Awwwards当日网站(6/23/2015)

按照Luc Jacquet的脚步,Wild-Touch将带您参观关于全球气候变化历史的视觉和教育之旅。历史媒体和独特动画的混合有助于讲述故事。

2018年的20个最佳网站设计启发你!

8. Beagle

奖:每日网站(4/19/2015),最佳网站图库

比格尔以一种简单易懂的方式在视觉上和逐步地讲述他们产品的故事方面做得非常出色。这对许多创业公司来说是一个重大挑战,特别是当他们将新概念引入现有市场时。人们想知道,“你的产品是什么?它是如何工作的?为什么我在乎?” 比格尔回答所有这些问题,同时展示他们的产品并强制用户购买。另外,他们是实际上正确实施“滚动劫持”的几个网站之一。

2018年的20个最佳网站设计启发你!

9. Southwest: Heart of Travel

奖:最佳视觉设计 - 审美,2018年威比奖

当西南航空想要证明其客户不仅仅是一个美元符号时,该公司创建了一个网站,其设计使用客户航线的形状进行组装。

这个名为“旅行之心 ”的网站甚至允许游客在他们计划参加的旅行中创建自己的作品。这样,西南航空的网站就是他们最忠诚的乘客的产品。

2018年的20个最佳网站设计启发你!

10. Woven Magazine

奖:每日网站(4/4/2015),最佳网站图库

Woven是一个在线刊物,为艺术家,工匠和制作人员提供赞美。对我而言,他们代表了一种确认,即出版物可以(也应该)拥有美观且引人入胜的网站,内容易于阅读。这个网站没有像弹出窗口和突兀的广告这样的分心,而是关于内容本身的体验。

2018年的20个最佳网站设计启发你!

11. JOHO's Bean

奖励:当日FWA(2015年8月8日),网站奖

JOHO's Bean的网站有令人难以置信的图像,交互性,讲故事,视觉设计,最重要的是音响工程。这些都聚集在一起,创造出一个引人入胜,情绪化和引人入胜的网站,讲述咖啡豆之旅的故事。

2018年的20个最佳网站设计启发你!

12. NOWNESS

奖项:最佳文化博客/网站,2017年威比奖

Nowness可能是当今互联网上最酷的众包视频博客。那真是一口......所有这些意味着什么?

NOWNESS的“众包”性质是其获奖者的一部分。这意味着其大部分内容来自独立广告素材 - 这是企业发布内容的一种日益流行的方式。NOWNESS也是一个视频博客,这意味着它的所有博客内容都是视频格式。总之,这些品质有助于使Nowness成为各个品牌努力讲述的故事的迷人中心。

2018年的20个最佳网站设计启发你!

13. Virgin America

奖项:最重要的行业演变,2014 UX奖

在一个已知航空网站充斥着主要可用性问题的世界中,维珍美国公司拥有推动可用性,可访问性和快速响应设计的最佳网站之一。事实上,它被命名为第一个真正快速响应的航空公司网站,这是该行业的一个新的先例。

2018年的20个最佳网站设计启发你!

14. World of SWISS

奖项:最佳用户界面,2015年威比奖

另一家航空公司?发生什么事?!是的,瑞航的航空公司建立了一个令人难以置信的身临其境的网站,讲述他们的故事,并描述与他们一起飞行的感觉 - 而且他们的工作太过繁重,无人理睬。强大的视觉效果和动画将用户介绍到网站的不同部分,这些部分除了通常的销售和市场营销信息外,还包含了今天如此常见的信息。

2018年的20个最佳网站设计启发你!

15. Reductress

奖项:最佳幽默网站,2018年威比奖

在互联网上嘲笑别人并不难,我们在网上阅读和消费的东西很多都是为了娱乐。但是对于大量观众来说,很难一致地做到这一点。Reductress是一本讽刺杂志,其头条和一般阅读体验是幽默部门的 - 使网站本身成为一个高质量的财产。

2018年的20个最佳网站设计启发你!

其他酷网站设计

16. Minimums

Minimums采用非常大胆的方式展示他们的内容,利用基于网格的网站设计,大字体和全幅高质量图像。他们的网站是如何正确执行网格结构,同时在设计中保持良好的视觉层次结构的一个非常好的例子。

2018年的20个最佳网站设计启发你!

17. Guillaume Tomasi

作为蒙特利尔的摄影师,Guillaume Tomasi建立了一个真正适合他的独特而令人敬畏的摄影作品。他超现实的照片风格与简单,平坦,空洞,简约的组合设计并列,将所有的焦点放在作品本身上。

他独特的系列导航加上艺术画廊风格的作品介绍和完美的滚动互动让人联想到真实画廊的体验。

2018年的20个最佳网站设计启发你!

18. The District

这家品牌代理机构认真对待它的形象,它应该 - 为客户处理所有媒体渠道。该地区的网站,是通过一些你见过的最美丽的艺术品和摄影的旅程。

当你探索网站时,这些挑衅性的瓷砖变化很快,而且他们看起来更加奇特,对你学习过去的工作越感兴趣。

2018年的20个最佳网站设计启发你!

19. Tej Chauhan

Tej Chauhan通过这个有趣的网站将印象派艺术品变成了商业模式。该产品开发人员主页上的每张图片都会滑出以覆盖上一张图片,从而为您现在在您面前看到的物体提供很少的背景信息。

但是,是不是缺乏正确的背景知识,让你想了解更多?标语“近期未来的纪念品”表明这些物品是他们产品线的一部分 - 这是您将这些创新物品带入您的生活的机会。

2018年的20个最佳网站设计启发你!

20. Amanda Martocchio Architecture

一家建筑公司可能并不专注于网站开发,但其网站仍应展示其对视觉上令人愉悦的设计的承诺。这个华丽的网站让阿曼达·马托基奥把它放在心上。

Amanda Martocchio Architecture喜欢它的作品并不是什么秘密- 它网站主页上的每张图片都是公司设计的房屋的迷人镜头。该网站标出了每个房屋的滚动条件,以及各种建筑物的各种角度。

2018年的20个最佳网站设计启发你!

Dribbble 界面设计灵感 33

博博


UI设计爱好者 2018-05-03 16:58:07

作者:设计达人(ID:shejidaren888)

这次 Dribbble UI 灵感主要精选网页、APP 以及一些后台管理界面,每个精选出来的界面设计的赞数都是几百+或者几 K ~

PS:当你看中某作品时,你可以点击作者名称来查看该设计师更多作品。(微信公众号不支持外链,只能点「阅读原文」来查看所有链接)

Dribbble 界面设计灵感 #33

Dribbble 界面设计灵感 33

个人主页设计 by Mike

Dribbble 界面设计灵感 33

CRM 管理系统界面设计 by Divan Raj

Dribbble 界面设计灵感 33

EverDo 应用界面 by Jakub Reis

Dribbble 界面设计灵感 33

接上,EverDo 界面的一些表单元素 by Balkan Brothers

Dribbble 界面设计灵感 33

随机实验 by Nick Franchi

Dribbble 界面设计灵感 33

Coindesk by uixNinja

Dribbble 界面设计灵感 33

一套 UI 素材:Planguru by Patryk Pustol

Dribbble 界面设计灵感 33

酒店 APP 后台(iPhoneX) by Divan Raj

Dribbble 界面设计灵感 33

B3Sound 网站着陆页设计 by Outcrowd

Dribbble 界面设计灵感 33

Smart Security Camera App by Ionut Zamfir

Dribbble 界面设计灵感 33

Iterable 插画草图 by Ramotion

Dribbble 界面设计灵感 33

后台界面 by uixNinja

Dribbble 界面设计灵感 33

Dating 应用项目 by Divan Raj

Dribbble 界面设计灵感 33

Benti by Jakub Dziedzic ♠️

Dribbble 界面设计灵感 33

Surf Guide Mobile Swipe Distort by Nathan Riley

Dribbble 界面设计灵感 33

C / Sen Design Lab by Mike | Creative Mints

Dribbble 界面设计灵感 33

Chripcase 后台界面 by Goutham

Dribbble 界面设计灵感 33

Raika Plant by Nicola Baldo

Dribbble 界面设计灵感 33

网页聊天应用界面 by Michal Parulski

Dribbble 界面设计灵感 33

网页版的音乐 UI by Giga Tamarashvili

Dribbble 界面设计灵感 33

Music UI by Giga Tamarashvili

Dribbble 界面设计灵感 33

Blockсhain revolution by Dmitrii Kharchenko

Dribbble 界面设计灵感 33

USB Types by Gal Shir

Dribbble 界面设计灵感 33


23个使用大背景的全屏网页设计作品

博博


UI设计爱好者 2018-05-07 11:31:09

在2013年的时候使用全屏背景或者大图片的网页开始流行起来,到了今年,还是经常看到这类风格的页面出现,可见这个趋势还是很流行的,值得运用。

一张大图再配合一个优秀的排版布局,这样一个美丽的页面就形成了,比起视差网页、动效网页成本低了很多,但视觉效果还是能令人满意的,下面精选一些优秀的大背景网页设计作品给你欣赏,也行会给你带来更多灵感哦!

这于高清图片素材建议大家去设计导航里面的免费图片素材上查找。

Nike – Geç Kendini

23个使用大背景的全屏网页设计作品

查看网页

Edwin Europe

23个使用大背景的全屏网页设计作品

查看网页

Esprit Cox

23个使用大背景的全屏网页设计作品

查看网页

Feed

23个使用大背景的全屏网页设计作品

查看网页

Truth Labs Portfolio

23个使用大背景的全屏网页设计作品

查看网页

Natural Food & Beverages

23个使用大背景的全屏网页设计作品

查看网页

La Plus GRANDE Cave À Bière Du Monde

23个使用大背景的全屏网页设计作品

查看网页

Ice And Sky : The History Of Climate Change

23个使用大背景的全屏网页设计作品

查看网页

Fivefootsix

23个使用大背景的全屏网页设计作品

查看网页

For Better Coffee

23个使用大背景的全屏网页设计作品

查看网页

Brdr. Krüger

23个使用大背景的全屏网页设计作品

查看网页

The Boat

23个使用大背景的全屏网页设计作品

查看网页

Beagle – Better Proposals

23个使用大背景的全屏网页设计作品

查看网页

Webdesign Agency Weblounge

23个使用大背景的全屏网页设计作品

查看网页

Words Can Save

23个使用大背景的全屏网页设计作品

查看网页

Well Storied

23个使用大背景的全屏网页设计作品

查看网页

Fabrica

23个使用大背景的全屏网页设计作品

查看网页

Alexander Engzell Portfolio

23个使用大背景的全屏网页设计作品

查看网页

Cartelle Amsterdam

23个使用大背景的全屏网页设计作品

查看网页

Printemps Du Polar

23个使用大背景的全屏网页设计作品

查看网页

Ashworth GOLF/MAN

23个使用大背景的全屏网页设计作品

查看网页

HBM FiberSensing

23个使用大背景的全屏网页设计作品

查看网页

The | Marmalade

23个使用大背景的全屏网页设计作品

日历

链接

个人资料

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

存档