首页

斗图-一个新奇的产品设计

用心设计

QQ在很多人眼里是聊天的工具,那么在聊天这个看似简单的领域,究竟还能做什么创新功能?在此分享一下QQiPad版v6.7版本的主功能,同时也是设计侧主导的创新功能——“来斗”的设计总结,希望给大家一些灵感和启发。

斗图绝对不会输的方法原来是这个

iOS 11 设计理念和 3 个设计方向

用心设计

Wayfinding / 寻路 / 空间导引


我们通过「标识系统」在街道,机场,停车场这些场所进行方向和位置的识别,这种导引指示系统被称为「Wayfinding」,词语来自「建筑领域」,由 Kevin Lynch 在 1960 年提出,中文名是「寻路」或「 空间导引」。


iOS 11 设计理念和 3 个设计方向

如何设计一个优质表单界面

用心设计

之前有和大家分享过无线端表单一些设计原则,本周设计群小伙伴@竹溪,也帮忙分析了PC端常用一些设计原则,和设计规范!希望可以帮助到在做BS/CS的一些朋友,也欢迎更多朋友加入我们一起交流设计,研究设计,最近我们也在研究VR的一些设计方向,欢迎交流探讨

设计表单的时候,为什么悬浮式标签体验更好?

雪涛

表单设计中,各种设计模式和技巧已经越来越成熟了。在诸多设计技巧当中,悬浮标签这一设计手法,应该是对于用户体验提升最明显的一种。早在2013年8月的时候,我第一次考虑在自己设计的表单中运用悬浮标签,这个想法很简单,在占位符文本中,借助动画加入一个图标显示,确保用户不会在填写过程中迷失。

垂直电商首页设计-APP设计4

用心设计

淘宝的商品品类(SKU)是以数十亿计的,天猫和京东也应该在数千万的级别。海量的商品品类、鱼目混杂的商家以及参差不齐的商品为消费者的购物带来了极大的选购时间成本。消费者在这样的购物环境中找到适合自己的商品有时并不比大海捞针容易多少,而其中假冒伪劣商品的大量存在更是增加了购物的难度。

垂直电商首页设计-APP设计4

为什么你做的设计总是不耐看?

雪涛

不知道大家有没有这样的情况发生,自己设计的作品,“乍一看不怎么样,仔细一看,还不如乍一看”!

其实不耐看,或者不敢放大看的原因都是细节做的不到位。

最近在做手机OS的主题图标,对细节的感触很大,今天结合主题图标来和大家聊聊,我们可以从哪些方面注意自己的设计细节,大纲如下:

  • 给造型加点细节
  • 多加点质感的细节
  • 不要让图标看着灰灰的
  • 风格特点的运用

1. 给造型加点细节

造型是所有设计执行的第一步,造型做不好,说别的都没用。

那如何能给造型加点细节呢?

打个比方,我们要画一个圆角矩形:

遇到特殊的设计问题时,有一条原则帮了我

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

很多设计中,我们付出20%的精力就可以应付80%的 Normal Case,而剩下20%的 Special Case 却会花费我们80%的精力。换言之,普通情况谁都会处理,而为了应对一些少数派,我们将要付出更多。

Loading 失败时的错误提醒、搜索无少结果时的空白页面、打了车却没车接单……除了这正常流程下的失败反馈以外,最耗时间的是那些特殊流程或所有情况同时在一个页面堆砌出现的情况。

在设计前期,我们就应该尽可能地罗列特殊情况,即便它们出现的概率很低,也应留足设计时间。而应对非常规 Case 时,有一条原则帮了我很多次:

确保多数人体验的前提下,才去解决少数人的问题。

这不是说要为了多数人放弃少数人,还是造例子来说吧。

案例一:重复利用的物流单号

如果你在天猫有过退货经验就会知道,申请退货并得到商家确认后,需要填写退货的物流单号,当商家收货后才会把钱退给你。这里有个奇妙的问题,设计上是否允许多个用户填写同一个退货单号?

先来看看如果允许,会出现什么非常规情况:消费者AB两人各自在同一个商家C处购买了两台 iPhone,并且商量好分别发起七天无理由退货流程,商家C均同意。然后,消费者A先将手机按要求寄出,获取物流单号一个后填写到退货系统;同时,消费者B直接使用消费者A的退货单号填入系统,但不寄送自己的手机。

极端情况体现在,许多商家的店铺与仓储是分开的,当仓库收到A寄来的手机并确认收货后,店铺工作人员收到系统通知两个退货流程都已收货(其实是同一个单号),若不进行额外确认,就会把钱都退回去了。

再来看不允许重复填写同一个物流单号的情况:很简单,AB两个消费者是好人,但希望节省快递费,就商量好把两个手机放在一个包裹里寄回。此时若规则只允许一个单号只能填写一次,这种做法就无法实现。

错误的设计方法是这样的:用户填写退货单号时,新增一个流程询问用户该单号是否只关联了一个订单,订单号是多少;或者在原有基础上新增一个联合退货的功能,让多个用户合伙拼单退货。

正确的设计方法是这样的:消费者端流程全部不变,允许重复填写物流单号,但必须在后台记录一条单号被使用的次数。对于被多次填写的单号,在商家端告知商家须额外注意,一定与仓库确认好包裹内物品再进行退款操作。

错误方法的错误原因很简单,我们不能为了一些极端情况就去修改主流程,也不能为了少数人的需求就影响所有正常用户。

案例二:互相冲突的 Toast 提醒

天猫客户端的商品详情页中,当点击“收藏”按钮会有一个 Toast 告诉用户“收藏成功”,同样当点击“加入购物车”后,也会有 Toast 告诉用户“加入成功”。这样看好像没什么问题,但若用户点完“收藏”后马上点击“加入购物车”,就会出现两个 Toast 相互冲突的情况——视觉上互相重叠,或后一个 Toast 无法出现。再极端一点,如果出现了一个脑残用户,为了测试反复快速点击两个按钮,甚至会导致代码错误。

为了追求设计和代码逻辑的严密,我和开发同学花费了不少时间讨论对于这种极端情况,要如何设置 Toast 的出现和冲突机制。甚至为了应对极端情况,还需要调整 Toast 出现消失的动画过程与逻辑。但最后,我只设置了2个 Toast 在极短时间内前后触发的交互,也就是新的 Toast 慢慢把旧的推上去,并各自做淡入淡出动画——毕竟两次短促的操作是比较可能会发生的。

什么?你问我那个脑残用户怎么办?不好意思,为了满足所有正常用户的诉求,脑残用户的体验就只好先放一放了……

案例三:神出鬼没的 Loading

我们在客户端上做了一个比较酷的动画,对一个模块长按后可以弹出一张卡片,并在卡片中阅读一些详情(有点像 3D Touch)。问题在于,弹出卡片中的信息是触发卡片后才向服务器请求数据并加载的,正常情况下没有问题,但是弱网条件下,数据加载可能会花费不少时间。为此,第一版我们为这个数据请求设计了一个 Loading 的小动画(好吧,你就当是转菊花)。

这样做的结果是,对于网络非常流畅的用户,他们唤起这张卡片时,会看到一个菊花飞快地闪过,然后才看到数据加载——再流畅的网络下,数据也需要加载时间,哪怕是1ms,都会让菊花快速闪烁。

当然,不要 Loading 也明显不合理。弱网条件下,必须避免用户盯着空白的卡片发呆而不知道系统正在干什么。

所以,合理的做法是,为 Loading 动画的出现时间设置一个延迟:在卡片弹出的200ms内(卡片不可能突然闪烁出现在用户面前,必须有一个进场过程),如果数据加载完毕,则不显示 Loading 动画,直接显示数据。如果卡片进场完毕(200ms后)数据还没回来,则开始显示 Loading 动画。

这样,我们保证了正常用户的正常体验,避免他们每一次操作都为弱网这一极端情况买单。同时,也保障了弱网用户的体验。

最后,再总结一下我们的设计原则确保多数人体验的前提下,才去解决少数人的问题。

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


网页顶部导航栏设计总结

用心设计

网页中的header,一般我们称之为顶部导航栏,这里为了行文方便,以下都简称顶部栏。顶部栏对于一个网站的用户体验来说是至关重要的,因为根据用户的浏览习惯(从左到右,从上到下),当他们进入一个新的网站,顶部栏通常是他们看到的地方。我们都知道用户对于你产品的第一印象是很重要的,因为它会一直伴随接下来的使用过程,而且第一印象无法更改。


网页顶部导航栏设计总结

这7个关键点,是每个产品用户体验设计的重中之重

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

即使你远离设计领域,对于用户体验这一词也不会陌生。用户和产品之间进行交互过程中,产生的一般态度和情感反馈就是我们常说的用户体验。在用户体验设计中,有几个关键性的因素的是设计师所关注的,比如可用性(usability)、工具性(utility)、合意性(desirability)、吸引度(attractiveness)等。如今,用户体验设计和视觉设计几乎达到了同等重要的程度。虽然仍有一些企业和团队在怀疑用户体验设计是否有必要,但是总体上,大家对于它的认可度还是非常高的。

用户体验设计为何重要?

许多公司为了让产品产品的体验和效率更高,而花费更多的时间和金钱。现代商业竞争背景下,事实已经证明,产品和服务的成功很大程度上是取决于用户对于产品的喜爱程度。UX设计旨在通过让产品更易于使用而提高用户的满意度。

有些人可能还认为用户体验设计的核心是视觉设计,其实它的范畴远不止于此。UX设计是一个复杂的过程,涵盖了用户研究,线框图、原型、视觉稿、动画、开发、测试等许多不同的环节和阶段,其中许多环节甚至是并发和交叉的。真正有效的用户体验需要时间来开发,也需要足够的知识来作为支撑,这种复杂的开发体系使得它或多或少地需要超出预期的额外投资。然而,UX设计对于初创和非初创公司而言,同样有益,它确确实实从不同的方面帮助企业创造成功的产品,无论是参与度、可用性还是转化率。

如果你拥有一个复杂的电商网站系统,那么用户体验一定是影响它实际效用的重要因素。内容组织是否系统,导航是否清晰,都会影响到产品的销售,用户的黏度。太复杂、不便捷的产品会让用户流失,这是肯定的。

有数据表明,近年来95%的移动端APP 在上线一个月内就宣告失败而退出。这很大程度上是因为激烈竞争之下,没有足够优秀的用户体验来留住用户所造成的结果。结合现有的研究和我们自己的经验,我们在今天的文章中总结出了优秀产品的7个关键的用户体验设计要素。

1、有效的可用性设计

现如今,“简单”一词和无聊的设计并无关系,而是成功产品设计的关键性要素。在Don Norman 的《设计心理学》系列教材中指出,良好的设计通常都会具有易于发现和易于理解两个特性。用户期望他们所使用的产品是简单明了的,能够让他们不花费太多精力就可以搞定,也可以从中获得自信。而这些都是用户体验设计的工作范畴以内。

用户体验设计师的目标是为数字产品创造一致的体验,让用户能够安心使用。有效的用户体验设计能够通过网站和APP为用户循序渐进、有效地展示内容。而UX设计人员则可以通过数据分析和案例研究,消除不必要的设计、搞定问题、去除隐患,提升产品的可用性。UX设计师还能通过不同环节的引导服务来帮助用户更加快速的熟悉产品,让用户感到贴心而不会紧张。

2、驱动用户深度参与

参与度是衡量用户有效行为的度量,而它也是产品价值的重要体现之一。每个企业都希望有高素质的用户参与到产品建设当中来,而他们也知道,最终还是要通过创造优秀的用户体验来解决这一问题。

UX设计有一个热门的解决方案是游戏化设计。将游戏化的元素应用到非游戏类的使用场景中来。游戏化设计让网站和APP拥有更多有趣的元素,吸引用户,提升参与度。游戏化设计的具体方法和策略有很多,设置任务、发放奖励都是很常见的手法了。挑起用户的好奇心和激情,他们会坚持不懈地执行任务,在你的网站和APP中花费更多的时间。

3、产品的独特性

很难说市场上到底有多少APP存在,但是绝大多数的应用和网站在起步的时候,就已经失败了。当你要开始投放一个APP到市场的时候,可能已经有好几十个同类的产品已经存在了。所以,企业和开发团队一直在寻求让用户选择他们产品的原因和方法。UX设计师能够通过分析目标受众的需求和实际市场状况,来判断和预测用户对于自己产品的反应。如果你想给别人带来愉悦的体验,满足用户的需求,并且力图让自己的产品拥有足够的特性从竞争中脱颖而出,那么你的产品就具有了同其他产品区分开来的独特性。

4、省钱

UX设计的成本并不低,但是相比于修复可用性的问题,它的花费依然很低。基于用户研究,UX设计师能够准确地挑选出功能组合,并且规划用户的交互过程,排除可能存在的问题。通过对目标受众的研究和测试,分析和改进整个产品的流程与细节,而这些过程对于产品开发和运营的补充,相比于在产品上线过再根据反馈进行调整,要省钱省心得多。

5、用户忠诚度

用户的口味越来越刁钻了。令人不快的体验会让他们很快不耐烦,然后迅速和你的APP说拜拜,然后再也不会回来了。用户的忠诚度要维持起来并不容易,你需要创造足够优秀的产品,要让人喜爱、沉迷,还得足够快速地帮用户排查问题。这种局面下,用户体验设计的价值无疑是不可估量的。如果你的产品能够始终保持令人舒服愉悦的体验,用户习惯了就很难转向别家了。另外,别忘了,快乐的用户更喜欢向朋友推荐你的产品。

6、高转化率

采取设计者预期行为的用户所占总人数的百分比就是我们常说的转化率。最典型的转化率就是购买产品的用户数所占打开电商网站的用户总人数的百分比。用户体验设计师通常会掌握一系列的分析技术,来帮助产品提高转化率。通过深入分析用户行为和用户离开产品的原因,找到痛点,解决问题,从而提高转化率。

7、积极的品牌体验

品牌识别不仅仅取决于视觉形象设计,还和体验息息相关。许多用户在第一次使用产品的时候,会记住品牌给他们的感觉。这种第一次的体验对于用户和品牌本身都至关重要,如果处理不好,可能会失去不少潜在用户。良好的UX设计可以保证品牌拥有积极而良好的用户体验。提供用户喜欢的产品,可以提升品牌的认知度,因为用户不会忘记他们喜欢的东西。

结语

优秀的用户体验设计对于企业无疑是有利的。很多时候,它的价值并非是一眼可以看出来的,但是事实上,优秀的用户体验是成功产品中不可剥离的组成部分。令人信服的UX设计能够节省资金和精力,这比起投资解决低质量的产品要来得有效得多。更重要的是,现代产品一旦初次互动不利,后面想要扭转过来就很难了。

 

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

史上最详细 iPad 插画入门教程

用心设计

iPad 在很长一段时间内对于笔者来说,都是看视频玩游戏的工具。但由于手机更易携带且功能接近,iPad
就逐渐被我忽略在了角落里安静地吃灰。直到 iPad Pro 发布,我突然意识到了 iPad 是可以画插画的,即使是我的旧 iPad
也可以老树逢春。于是我怀揣着「旧物利用」的环保理念开始了 iPad 插画的研究之路。下面我把总结的入门经验分享给大家。(教程适用于所有版本的
iPad 哦)。篇幅可能有点长,be patient, 好伐?

史上最详细 iPad 插画入门教程

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档