设计达人 http://www.shejidaren.com 爱设计,爱分享。 Fri, 06 Sep 2019 00:00:20 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.1.2 产品原型图画到什么程度? http://www.shejidaren.com/yuanxing-tuhua-dao-shenme-chengdu.html http://www.shejidaren.com/yuanxing-tuhua-dao-shenme-chengdu.html#respond Fri, 06 Sep 2019 00:00:20 +0000 http://www.shejidaren.com/?p=31022 原型的不同阶段

前言:今天和大家聊聊“交互原型”要画到什么程度这一话题,也算是对自己成长的一个总结和沉淀。 不知你有没有这样的经历:为了不让原型看起来丑,会纠结各种细节处理(间距、大小),结果造成工作周期延长、精力损失;为了让原型接近于真实效果,会思考各种精致布局,结果Leader来一句“你现在做这么好看干嘛,这个功能都没确定好”...在各种阶段画出了不合适的原型。

 Part1:原型的不同阶段

其实我觉得画原型和做设计的理念是一样的:没有好坏,只有是否合适 当产品经理/交互设计师没认清当前的需求阶段时,无论你画的好不好看,都会出现一些糟糕的现象:一开始就注重细节处理、在原型需要重点输出时,又忽略功能与逻辑上的思考、在功能未确定时追求精致页面效果... 下面是我对“原型”的理解,所绘制用于表示不同阶段下的需求特征: 原型的不同阶段 1. 想法阶段: 在产品需求的初始阶段,功能概念都比较模糊,大部分想法都停留在脑海和口述上(工作中典型的场景,如团队风暴、需求讨论、会议评审)。需要我们不停地理清概念想法,验证需求的合理性、目标是否正确。 所以这个阶段的强调是:产品雏形 - 将我们的想法、概念需求可视化出来,并加以讨论验证。因此,最合适的方式就是用“草图”表达,快速产出快速修改,能即时看见产品的雏形。 想法阶段 常用“草图”勾勒产品雏形,除了可以表达想法、探索方向外,好处还在于: a. 能提升你快速思考、验证假设、优化设计流程的能力。 b. 能展示你思考问题的过程(设计思维),体现专业能力。 2. 修改阶段 这阶段的产品目标和方向较为清晰,接下来需要优化原有的概念想法,为产品创建一个信息架构、梳理功能逻辑等工作,方便在需求评审会、团队讨论中推动产品功能的进展。 该阶段强调:理清目标 - 根据用户诉求、业务目标、运营需要等不同目标点,逐步梳理出原型上需要展示哪些功能内容(界面布局、信息取舍) 所以对产品经理/交互设计师来说,只需产出一个大体上看得明白、能理清产品功能的‘中保真原型’即可。方便即时修改,向产品定型/高保真原型过渡。 3. 确定阶段 到了这个阶段,产品需求的功能布局、信息设计已全部确定,这时一份全面、严谨的“高保真原型”就尤为重要。一方面可以为视觉同事的UI输出、开发的落地实现等提供依据;另一方面在各种工作场景中,高保真原型都能发挥很大的作用,如交互评审、领导过稿、A/Btest、demo演示等等。 这一阶段强调:细节核对,因为关系着UI输出、界面实现等工作,所以需要注意各种交互细节,以防出现设计、流程上的漏洞。 有2个核对纬度上的检查: a. 规范对齐 若团队内部有设计规范时,一定要对齐字体大小、颜色、布局、间距等视觉元素。且能复用已有样式就尽量复用,避免出现“一个功能,两种样式”的情况,如图: b. 交互走查 高保真原型输出后,需要根据交互自查表,一一梳理原型说明是否存在漏洞,以防出现异常流程和内容状态。 另外,当你想要获得用户反馈、测试你的想法是否为业务、用户创造价值时,尽量使用高保真原型。原因在于:能够产生真实的操作效果、给用户带来“身临其境”的浏览体验。 最后总结一下,不同阶段的原型用途: ·草图:快速表达想法、验证需求、展示思考过程。 ·中保真原型:梳理大体产品框架,继续优化功能。 ·高保真原型:为UI输出与开发实现提供依据、测试用户反馈、制作交互demo、向领导过稿等等。

 Part2:原型和用户体验5个层面

另外我还发现,结合“用户体验5个层面”来看不同阶段的原型,两者是多么地吻合、有理有据: 原型和用户体验5个层面 1. 战略层和范围层 - 草图 产品想要做什么?如何去满足战略目标?在构思把目标和需求转变成功能和内容时,用草图的方式是极为合适的:快速表达、即时验证,能让概念想法马上“可视化”出来。 2. 结构层 - 中保真原型 想法表达后,需要为产品构思一个具体的框架结构,根据业务目标和用户诉求,不断地修改产品功能、信息设计,慢慢完成产品的定型。所以这时候只需产出一个大体上看得懂、方便修改的中保真原型即可。 3. 框架层 - 高保真原型 这是原型设计的最后阶段,产品关系已理清、功能内容已确定。这阶段注重原型的界面细节处理,如梳理异常流程、信息的不同状态、是否对齐规范等等,以便后期的界面实现,所以一份高保真原型就尤为重要了。 4. 表现层 - UI效果图 原型确定后,接下就是UI优化阶段了,这时候产品的最终效果也就出来了。产品的下次功能迭代,也是根据此UI效果图的基础上进行原型优化、修改。

 Part3:交互原型的原则

最后简单说下,原型产出的几个原则:使用灰色图和复用已有样式,避免在今后工作上踩坑: 1. 使用灰色图 原型就要有原型的样子,大面积的彩色布局,很容易让人觉得这是UI效果图(视觉同事可不背这个锅),尤其是在交互评审会上,这种细节更应该注意。 2. 复用已有样式 这个上面已经说了,能复用样式就复用,避免出现“一个功能 两种样式”的情况,否则和视觉、开发同事对接原型时,会造成一定的理解干扰。

总结

以上对交互原型的一些见解,若有描述得不当请多指教,下面是总结文件:


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/yuanxing-tuhua-dao-shenme-chengdu.html/feed 0
22张治愈系四格漫画 永不放弃 http://www.shejidaren.com/22-healing-four-frame-comics.html http://www.shejidaren.com/22-healing-four-frame-comics.html#respond Thu, 05 Sep 2019 04:00:58 +0000 http://www.shejidaren.com/?p=31020 四格漫画-不放弃 -1

最近发现原来有的设计师不仅创造力,还有「治愈系」这个技能,什么是治愈系技能呢?就是当你失落、不开心、被甲方吐嘈、又出飞机稿时,然后看看带治愈系的作品,就可以迅速被治愈。说到这里,可能你还不会相信,那请看看今天小编带来22张治愈系四格漫画,自己体验体验。 四格漫画由Ecyko绘制,如果喜欢他的作品,欢迎关注他的INS: instagram.com/eckyo.me/ 22张治愈系四格漫画:
01. Don't Give Up 不放弃  四格漫画-不放弃 -1

☆我想看看如果我不放弃的话,会发生什么

  02. Not To Quit 不放弃 四格漫画-不放弃 -2

☆如果你累了,学会休息,而不是放弃

  03.Get Stronger 变更强  四格漫画-变更强-3

☆生活不会更简单,只是你变得更强大了

  04. Your Hero Is Yourself你是你自己的英雄 四格漫画-你是你自己的英雄 -4

☆有时候,你要做你自己的英雄

  05. No Doubt 不要怀疑 四格漫画-不要怀疑-5

☆不论什么时候有人怀疑你,都要把那份怀疑当做你自己的力量

  06. Prove Them Wrong证明他们是错的 四格漫画-证明他们是错的 -6

☆怀疑你的人一直都会有,而你只需要证明他们是错的

  07.  I Choose 我选择  四格漫画-我选择 -7

☆我不是由我身边发生的事造就了我,而是我选择成为这样的我

   08. Grateful Heart 感恩的心  四格漫画-感恩的心 -8

☆每天带着一颗感恩的心

   09. The Key To Happiness 幸福的关键  四格漫画-幸福的关键 -9

☆不要把幸福的权力交给别人

   10. Find A Way 找到一个方法 四格漫画-找到一个方法-10

☆生活很难,但是一定要找方法解决,而不是找借口

  11. Good Personality 人格魅力 四格漫画-人格魅力 -11

☆外表美能够吸引人的眼球,但是心灵美才能捕获一个人的心

   12. Just A Little Each Day 每天一点点 四格漫画-Just A Little Each Day 每天一点点-12

☆每天一点点,汇聚起来就是很大的收获

  13.  Enjoy More 多享受 四格漫画-多享受 -13

☆从今天起,多享受生活

  14. Use The Brain 动脑 四格漫画治愈系-14

☆遵从你的内心,但是必须一直带上你的脑子一起

  15. Laugh And Feel Loved 笑并感受被爱  四格漫画-笑并感受被爱-15

☆人生很短,和那些让你笑,让你感受到被爱的人在一起

   16. You Deserve It 你值得  四格漫画-You Deserve It 你值得 -16

☆你配得上那些害怕失去你的人

  17.  Just Focus On Your Goals 专注于你的目标 四格漫画-Just Focus On Your Goals 专注于你的目标-17

☆适应一个人的时候,那些开始陪着你的人不一定会在结束也陪着你

   18. Enjoy The Ride 享受旅程  四格漫画-Enjoy The Ride 享受旅程 -18

☆生活像是一个旅程,而不是终点,学会去享受旅程

   19. My Own Happiness 我自己的快乐 四格漫画- My Own Happiness 我自己的快乐 -19

☆创造一些属于你自己的快乐

   20. Just Be Yourself 做自己  四格漫画-Just Be Yourself 做自己-20

☆我并不完美,但是我是我自己

   21. Find The Way 找到那个方法 

☆那些注定发生的事,一定会找到它发生的方法

  22. Everything Grows You 万事万物使你成长

☆ 你经历的事会让你长大

来源:北美考试精英整理 | 小鱼的屋


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/22-healing-four-frame-comics.html/feed 0
人像LOGO的6大设计技法 http://www.shejidaren.com/renxiao-logo-designs.html http://www.shejidaren.com/renxiao-logo-designs.html#respond Thu, 05 Sep 2019 00:00:57 +0000 http://www.shejidaren.com/?p=31018 人像LOGO的6大设计技法

人像的LOGO设计看上去可很复杂很高级的样子,很多设计师一开始都不敢画人像,但凡事开头难,今天小编给大家分享6个人像LOGO的设计技法,学会后你会发现人像设计原来也不是这么难画的,还有绘制技巧,做LOGO的设计师必学教程。 人像LOGO的6大设计技法 人像LOGO的6大设计技法

1. 块面概括法

块面概括法不难理解,就是通过黑白色块表达人物特征,对细节处理要求并不严格。这种技巧在人像类LOGO中是最常使用,并且难度最低适用度最广的技巧。可以看到无论是中式、现代、美式风格的使用这种技巧都是可以轻松表现。 人像LOGO的6大设计技法-1 线面提取法 我先示范一种难度最低的设计方法,线面提取法。不难理解,所谓线面提取就是找到合适的无版权风险的参考直接提取线稿或者面稿,调整为LOGO。这边的案例是大米品牌,品牌名为[子路负米],人像类的调性是适用于农产品行业属性的。 人像LOGO的6大设计技法-2 非常简单,思路就是寻找适合于这个主题的参考。可以是古代书籍插画、版画、壁画、雕刻、雕塑...等等。选择一个合适的参考,进行线稿提取优化调整。 人像LOGO的6大设计技法-3 在进行线稿提取后,最好能够多结合几张不同的参考素材,综合调整得到具备一定原创度的方案。当然如果参考素材是甲方提供确认可以直接使用的,那直接提取倒也无妨。 人像LOGO的6大设计技法-4 线稿提取调整后,为了增强整体性以及原创度,我将纯线稿调整为线面结合的形式,这种技巧点主要在于线稿保留块面区分出的重要线条,比如手臂与身体部分,裤腰带与腿部。然后底部填充颜色,将分割线部分线稿反白处理即可。形象主体部分处理至此基本结束。 人像LOGO的6大设计技法-5 搭配一个合适的字体设计,结合整体稍微排版。这个方案就基本完成了。是不是特别简单? 人像LOGO的6大设计技法-6 阈值调整法 阈值调整法就是上一篇教程最后使用的方法,这边我们详细讲一下实操部分的细节。先看一下最终的方案效果。 人像LOGO的6大设计技法-7 使用阈值调整法时很重要的一个点就是,你不能使用单张阈值结果作为参考。而是要多次调整不同的阈值,得到不同的部分,最后进行拼接结合得到最终方案。 人像LOGO的6大设计技法-8 以[SIMONSON]方案为例,我们多次调整不同的阈值得到不同部分比较合适的参考,图1适合整体脸部大轮廓,图2适合提取帽子部分,图3则是适合提取下巴部分。将阈值调整后的几张图都拖入ai进行图像描摹处理,最后结合即可。 人像LOGO的6大设计技法-9 以帽子部分的提取为例,图像描摹后,整体比较粗糙,所以我们需要简化锚点优化线条,并非直接拿来就用。可以看到优化后的帽子部分与直接描摹的区别是非常明显的。同理,我们将其他部分优化好后,拼接得到最后的方案。

02. 块面阴影法

块面阴影法其实是在块面概括法的基础上增加阴影层次部分,让人像部分的层次感更丰富,整体效果更饱满。 人像LOGO的6大设计技法-10 可以看到块面阴影有单色的形式,双色、也可以有多种颜色组合。但是总的来说一般颜色在3种以内整体会比较易于控制,并且主色与点缀色需要明确。我们示范一个案例。 人像LOGO的6大设计技法-11 依旧以[SIMONSON]为例,这边我们为了降低学习的难度所以用吸色制作色板来示范,等积累到一定的量后大家可以尝试自己配色。吸色时,注意逻辑要清晰,哪些属于皮肤的亮部、哪些属于暗部;以及不同材质部分应该如何搭配。在这边我选了非常接近的案例作为参考,大大降低了难度。 人像LOGO的6大设计技法-12 仔细观察一下亮面与暗面部分细微的差别,造型的层次就是通过这些细节得到提升的。那么如何判断暗面与亮面呢?很简单,从原图片的参考就可以得到答案。回到上面的阈值调整后的图片,那么亮部与暗部的对比是非常清晰的。举个例子,鼻子部分的亮部是非常明显的,这个亮部让鼻子的层次明显提升。记住这个点,也就是对于亮部和暗部的判断。细节优化法部分会再次涉及。

03. 细节优化法

实际上细节优化法与块面阴影法是殊途同归,都是为了提升人像LOGO图形的精致度与层次感。我们看一下下面几个运用了细节优化法的案例。 人像LOGO的6大设计技法-13 比较简单的细节优化法就是优化锚点,简化锚点,在保证人像造型的识别性的基础上,能简化就简化,让线条更简练干净。而另一种呢,是添加线条层次,也就是类似画画时,你有了基础的线稿后,开始排线,区分出亮面暗面,强调出层次感。 人像LOGO的6大设计技法-14 我们以增加排线这个为例做个示范,分析案例可以得到,排线的效果有多种,有等宽粗细、有粗细变化...等等。那在没有美术基础的时候,我们如何去排线呢。依旧是与上面的技巧相同,我们需要区分好亮面,灰面与暗面。排线呢主要就是排在灰面处,而暗面在块面概括时我们已经基本做好。 人像LOGO的6大设计技法-15 如何实现排线的端头多种变化呢?可以在描边中选择[变量宽度配置文件],不同的配置所得到的结果是不一样的。在下面的示范中选择的是第一种效果。 人像LOGO的6大设计技法-16 可以看到线的排布按光的方向,由疏到密,并且线主要排布在了灰面。案例做了比较粗略的示范,感兴趣的同学可以按这个方法做得更加细致。

04. 块面几何法

块面几何法则是延续了细节优化法而得到的结果,锚点简化优化到一定的程度就变成了几何化。自然而然就得到了这么一个结果。 人像LOGO的6大设计技法-17 案例中所有的线条和造型都是非常简洁,几何化程度较高,那这种方案的技巧点是怎么样实现的呢?我们再来做一个案例。(有点累了,虽然年轻,但是一夜这么多次还是有点乏了。) 人像LOGO的6大设计技法-18 当两个案例摆放在一起时,是不是有种豁然开朗的错觉?我在画这个图形时,就是把左侧的原方案调整透明度垫底,用几何化的线条去表现每个部分,最后再根据亮暗面位置增加左侧的暗面。 人像LOGO的6大设计技法-19

05. 线条概括法

实际上线条概括法可以用第一个方法来实现,线稿提取调整即可。但是更简单的方法就是通过块面几何化之后进行面与线的转化。 人像LOGO的6大设计技法-20 上面所有的线构成案例如果结合进面的形式那么最终的效果是完全不一样的。我们依旧做一个案例来看一下。 人像LOGO的6大设计技法-21 是不是一对比就看明白了,要的就是这个效果。所以当你以后需要做线构偏卡通方向时,如果无从下手,那么就可以顺着这个思路从头到尾捋一遍,最后再结合一个合适的排版,就得到了一个新的方案。 人像LOGO的6大设计技法-22 人像LOGO的6大设计技法-23

06. 创意结合法

所谓创意结合法就是基于之前几个方法得到了基础的人像造型之后与不同的图形进行结合,进而得到创意度更高的人像LOGO。掌握好前面的几种技法后,实现这种方案的难度实际上并不大,只要融入的图形是契合整体形态的就基本可行。 人像LOGO的6大设计技法-24

总结

人像LOGO的6大设计技法-25 细心看了的同学肯定发现了,六个技巧是由浅入深的串联关系。那实际上要实现这么多种不同的人像LOGO类型,首先必须处理好第一种方案,当我们得到块面概括比较优秀的基础方案后,无论是增加阴影,几何化,线条转化都是可以比较快速实现的。 作者:小刺猬(微信号:ziyou-design)


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/renxiao-logo-designs.html/feed 0
如贵族般的酒吧LOGO与室内设计 http://www.shejidaren.com/bar-logo-and-interior-design.html http://www.shejidaren.com/bar-logo-and-interior-design.html#respond Wed, 04 Sep 2019 00:00:57 +0000 http://www.shejidaren.com/?p=31016 如贵族般的酒吧LOGO与室内设计

作为优秀的品牌设计公司,仅仅做名片、LOGO、海报、画册VI等平面设计是满足不了大企业的需求,需要加入建筑和室内设计,这才算是更完整、统一的品牌视觉形象。今天小编分享的kissmiklos工作室做的酒吧品牌设计就是其中一个例子,从LOGO到室内设计均由该设计工作室包办。 ​CAT是一家以猫为主形象的酒吧,先来说说该酒吧的LOGO,小编第一眼看上去,只感觉是一个普通的扁平化卡通LOGO(眼界太低),却不知道这样的“卡通”设计还能和如此高端的酒吧融合,值得一提这家酒吧的室内设计如贵族般的感觉,进去就是一种享受,来一起欣赏这种贵族般的设计,无论是UI或是室内设计师,相信这能给你带来新的灵感。 如贵族般的酒吧LOGO与室内设计 这家酒吧被称为「CAT」,所以品牌的视觉设计中必须要有猫的形象在里面,猫的形象可体现在壁画、摆设、以及其它装饰上。 01 设计师收集了很多和猫有关的模型、插画、照片等等,经过考虑后挑选一些图像重新绘制、室内还加入了动物雕像,最终目的是设计一个吸引人的、令人难以忘记的外观。 02 03 04 05 06 07 看了上面的设计,你会发现这个室内装饰上有很多流行的元素,壁画的创意、表情严俊的雕像、现代雅典的家具摆饰,无一不让这酒吧变成贵族的住所。 同时还有发现一个有趣的LOGO动画,当没有酒的时候,它就很不开心哦。说到LOGO设计师没有分享制作过程,但可以看出使用了对称设计以及一些隐藏的黄金比例。 08 09 10 11 12 13 14

总结

使用猫作为酒吧主形象确实很有现代时尚品牌象征,CAT酒吧非常重视品牌视觉设计,从室内设计到平面设计的细节融合得非常好,霓虹灯、无处不在的猫形象以及舒适优雅的摆设,即使不是酒吧,是不是也想进去享受? 设计师想要获得更大的提升就先要开阔自己的眼界,以后找灵感不能局限于平面广告和UI设计,建筑、摄影等领域都应该去了解。


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/bar-logo-and-interior-design.html/feed 0
ProtoPie视频教程全集,UI动效原型进阶之路 http://www.shejidaren.com/protopie-shipin-jiaocheng.html http://www.shejidaren.com/protopie-shipin-jiaocheng.html#respond Tue, 03 Sep 2019 00:00:39 +0000 http://www.shejidaren.com/?p=31012 ProtoPie视频教程全集,UI动效原型进阶之路

前言:本期主要向大家分享ProtoPie视频教程全集,适合UI设计师和交互人员学习,开始ProtoPie入门至进阶的UI动效原型进阶之路吧。 UI动效使用越来越常见,通常要到UI交互动效的主要目的就是向客户、上司或团队更友好的展示设计方案。这样做的好处不仅能更清晰表达方案,让观看者有一向身临其境的体验,同时也更容易打动他们,提升过稿率。 ProtoPie视频教程全集,UI动效原型进阶之路 交互动效的工具其实还有很多,较早时有Axure、Pixate,后来的Origami、Hype、Flinto、Principle等。有的还使用Keynote来实现简单动效,这些软件都有各自的优缺点。笔者体验过Pixate、Flinto、Principle这几款交互动效工具,但并不太理想,有很多效果实现不了。所以最终推荐使用ProtoPie来实现动效设计。 ProtoPie动效 ProtoPie 和其它交互工具对比,它有着自身的几个优势:支持更多触发条件,诸如 3D、陀螺仪、声音、震动、设备间交互、变量等等。同时,自带原生中文,支持 macOS、Windows 双平台,对交互设计师来说,这些功能非常合适。 ProtoPie优势 从界面中我们可以看到,ProtoPie的界面相对还比较简单明了,包括对象 触发 反应(行为)都可以在界面中一目了然。 ProtoPie界面

点击图片查看大图

ProtoPie视频教程

我们推出了一门课程:《ProtoPie动效原型进阶之路》,由腾讯设计团队录制,全课共12课。适合从零开始学习ProtoPie的设计学习,从入门到进阶了解交互动效的制作。  
ProtoPie视频教程第一课:ProtoPie 介绍、界面与基本操作   ProtoPie视频教程第二课:与Sketch协作   ProtoPie视频教程第三课:滚页与滑页   ProtoPie视频教程第四课:对象坐标与热区范围   ProtoPie视频教程第五课:条件判断   ProtoPie视频教程第六课:转场与自动加载   ProtoPie视频教程第七课:播放器与变量   ProtoPie视频教程第八课:文本输入与表达式   ProtoPie视频教程第九课:照相机   ProtoPie视频教程第十课:联动   ProtoPie视频教程第十一课:范围   ProtoPie视频教程第十二课:监听

ProtoPie的课程素材

ProtoPie的课程素材已经准备好,包含视频教程和Sketch源文件。 都可通过「设计达人」公众号后台回复“动效”直接获取。 感谢观看!


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/protopie-shipin-jiaocheng.html/feed 0
Booking酒店预订APP UI设计改版案例 http://www.shejidaren.com/booking-app-ui-and-ux-case-study.html http://www.shejidaren.com/booking-app-ui-and-ux-case-study.html#respond Mon, 02 Sep 2019 14:10:06 +0000 http://www.shejidaren.com/?p=31014 Booking酒店预订APP UI设计改版案例

前言:今天和大家分享APP的UI设计改版案例,Booking.com是一个国际级大型酒店预订网站,在国内外也很受欢迎,本文将从使用场景、竞品分析、用户研究、动效设计、界面优化等多个方面来讲述 Booking APP 的改版过程。 Booking酒店预订APP UI设计改版案例

项目背景

Booking.com缤客是一家荷兰初创公司,并已经发展成为全球最大的旅游电子商务公司之一。 在Booking上,旅客可以选择世界上任何一处的住宿地点,包括公寓,度假酒店,民宿,五星级豪华度假村,树屋甚至冰屋等等。每天,通过平台预订的房间数超过155万。无论是商务旅行还是休闲旅行,人们都可以快速轻松地预订到理想的住处。

竞品分析

自从Booking发布以来,许多竞争对手都采用类似的商业模式疯狂跟进,抢占市场,并且在某些方面比Booking本身做的还好。 在调研的前期阶段,我去搜集了一些竞争对手和类似的平台,分析UI,用户体验,用户体验地图,信息架构和关键功能。但是我并不会花太多时间过于深入的去分析这些产品,因为我希望将重点放在Booking这个产品本身的诉求上。 项目背景

使用场景

在之前的调研过程中,我发现了许多不同的使用场景,经过汇总归集,我集中关注以下3个场景: 场景1:用户知道其行程的日期和目的地(默认场景) 场景2:用户明确了日期但对其旅行的目的地不清楚 场景3:用户知道目的地但不确定其旅行日期 APP使用场景

典型用户

在进一步的研究中,我明确了4位具有不同需求和不同目标的典型用户,这些数据对于改善不同用户的体验非常有用。 这个分析的目的是通过梳理最佳的用户流程并提升产品体验,来为不同需求的用户提供最好的用户体验。 APP用户研究分析 数据来源:在线研究和用户访谈(30个用户样本)

用户反馈

收集用户评论,从中我收到了很多有价值的反馈,这些评论中没有特别明确指出是可用性或功能性的问题。我将这些反馈分为4类(译者注:对反馈的问题进行提炼整理): 1.预订被取消 2.App的Bug 3.投诉的处理效率 4.反馈的进度 毫无疑问,最相关的是预订被取消的问题。太多用户会注意到不合理的费用或与房间的主人取得联系时遇到困难。 Booking酒店预订APP UI设计改版案例

用户访谈

基于30个用户样本,我试图获得进一步的用户反馈,从中注意到以下的几点事实: 1.与其他平台相比,booking的平均价格通常更高 2.产品过于突出好评,用户很难发现一些真实的差评 3.当房屋主人接收到用户的回复时联系用户也很困难 我想引用一段话,来总结这里面遇到的问题,这段话也蛮有意思的,它说的是: “与其他应用比较来看,套路显得有点多,会让你觉得一切看起来都蛮划算,总是想多卖一些东西给你。”

用户痛点

总结之前的分析,我提出了以下几点观点: 1.没有一个完美的解决方案能够满足所有用户,用户需要尽可能多的掌握有用信息。 2.没有的功能没有太多考虑到个性化需求。 3.可以改进UI并使用户更加集中于他的目标,而不是完全“以推销为中心” 4.优化用户与房东之间的联系问题

解决方案

从用户痛点出发,尝试找到合适的解决方案,来提升产品体验。 主页 总的来说,我对首页进行了大手术。主页的搜索功能已经完全重新设计,减少过多的干扰信息。 导航 :我设计了一个新的导航栏,剥离出“已保存”功能,这样用户就可以快速找到自己所收藏的商品。此外,我也优化了“交易”的模块,后面我会详细的说说这块的改动思路。 其它功能 :至于之前的版本,我保留了最新搜索和相关推荐的功能,重新设计界面以改善UI的可用性。 Booking APP 主页界面设计 社交功能 如今,社交网络在用户的生活中扮演重要的角色,那没理由在booking中做的这么差。我搞了一个新功能,允许用户关联自己的好友并查看他们最新的选择,包括他们的评价(喜欢/不喜欢)。我已将此功能放置到主页的下方,因为我希望在将其推广到其他模块之前收集更多有关它的数据。 Booking APP 社交功能 搜索功能  把这个功能分解为多个步骤。在输入第一个词后,即使没有指定日期或其他信息,也能显示相匹配的酒店。此外,我也加入了语音搜索,使搜索更容易。基于之前我对不同用户角色的定义,搜索的结果将根据最后的信息进行推荐: 1)1名成人 ——背包客 ——酒店 2)2名成人——度假夫妇——酒店,宾馆或B&B(某种酒店形式) 3)2名成人 儿童——家庭——民宿公寓或酒店 4)1名成人 商务选择——商人——酒店 Booking APP 搜索功能 列表页面 列表页针对易用性方面做了整体的优化: 1)我将筛选功能从3个按钮更改为2个按钮以减少用户的操作步骤——将它放在页面底部,方便使用 2)我添加了标签功能来更好的区分属性类型 3)在第一时间向用户展示物业的主要设施特点。 注意:根据不同的用户,可以智能突出显示不同人正在寻找的不同信息。 4)我将报价的方式转换为“单晚”而不是“总价”,以便在不同商品之间进行比较 Booking APP 列表页设计 详情页 我列出许多可以在详情页面中加入的修改。将总价格突出显示,以免有些隐形消费用户可能会被忽略。 增强了一个与评论相关的次要功能,允许用户通过不同标签筛选它们。 Booking APP 详情页设计 交易功能 在优化开始时,我确定了操作场景2—— “用户还不知道自己的目的地”作为优化方向。为了提供更好的用户体验,我增加了一个新的功能,用户可以在其中找到不同目的地的区间。利用筛选功能,用户可以选择最适合其需求的区间(区间 - 大陆 - 国家等...) Booking APP 交易功能 动效原型 最后,我还设计了一个整个项目的动效原型,把之前所有重设计的页面串联起来。 Booking APP 动效设计

结语

由于时间限制,分析和结果是基于我的个人经验和少量数据,需要进行深入分析和其他测试,以便完善和验证解决方案。 原文:https://medium.muz.li/booking-com-ux-case-study-7ffb39e54791 作者:Filippo Rovelli 译者: 鹿崎(ID: 彩云译设计)


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/booking-app-ui-and-ux-case-study.html/feed 0
用iPad Pro创作的手绘插画,还混合着科技风格哦 http://www.shejidaren.com/ipad-pro-illustrators.html http://www.shejidaren.com/ipad-pro-illustrators.html#respond Mon, 02 Sep 2019 00:00:47 +0000 http://www.shejidaren.com/?p=31009 用iPad Pro创作的手绘插画,还混合着科技风格哦

今天分享来自圣何塞的艺术家 Samuel Rodriguez 的插画作品,此系列作品使用了 iPad Pro 平面电脑来绘制创作(看来 iPad 还是很强大的)。今天的作品主题很有意思,插画师在手绘人物的基础上加入了现代科技感的元素,让作品显得与众不同,也许这就是「数字插画」的特色吧。 这样的绘制方法能很好的激发插画师的创意灵感,如果单纯的绘制人物,就会像画素描画一样枯燥乏味,Samuel Rodriguez 的绘制方式就如同天马行空,想象什么就画上去,边享受边自由自在地创作。 用iPad Pro创作的手绘插画,还混合着科技风格哦 插画师:Samuel Rodriguez INS主页:instagram.com/samrodriguezart 想让手绘插画带点科技的气息?今天分享的混合风格插画就科技感十足啦,如果你也有 iPad Pro 也可以动手试试哦,希望你也喜欢这类的创作。
01. 01 02. 02 03. 03 04. 04 05. 05 06. 06 07. 07 08. 08 09. 09
感谢阅读!


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/ipad-pro-illustrators.html/feed 0
设计方案输出如何做得更好? http://www.shejidaren.com/sheji-fangan-shuchu.html http://www.shejidaren.com/sheji-fangan-shuchu.html#respond Sun, 01 Sep 2019 00:00:49 +0000 http://www.shejidaren.com/?p=31007 设计方案输出如何做得更好

设计师制作完项目设计稿后都需要输出设计方案,很多时候设计师以为自己设计的作品已经非常美观,从视觉表现到细节元素、交互设计等等已经没多大问题,可以是在实际输出项目方案后,总是要反复地修改,到底是为什么呢?自己的软件操作已经非常熟练,设计的视觉效果也不差,到底如何提升自己才能有效输出设计文案? 设计方案输出如何做得更好 本文从What/How两个部分循序渐进地阐述如何输出清晰有效的设计方案,希望给大家一些建立系统性设计思路的启发,帮助大家更好地输出设计方案,为决策设计方案提供更有力的参考。 What/How设计思路

WHAT: 什么是清晰有效的设计方案

首先我们需要对清晰有效有一个整体的认知。所谓清晰,从字面上理解是指看得很清楚、明朗,设计层面来说就是方案能做到方向明确,方案明了。而有效字面上指的是有效果,有效力,从设计层面来说就是输出的方案可以解决存在的问题,能达到设定的目标以及可以切实落地。 清晰和有效的考量维度是不一样的:清晰更多是针对设计这一环节,在于不同方向/方案的差异度和侧重点;而有效则更多需要联合设计上下游(用户/产品/开发)。对于优秀的设计方案来说两者相辅相成,缺一不可。 接下来我们来详细拆解什么是清晰和有效。 WHAT: 什么是清晰有效的设计方案

1.清晰 - 方向明确,方案明了

很多设计师对方案输出的数量有个认知误区,认为设计方案越多越好,可以给老板、合作方更多选择,往往不假思索地用大量的时间输出所有可能的方案,并拿出来让别人评审,认为把所有的可能性列出来就不会错,这正是对方案清晰性缺乏认知的表现。 在设计最初期,不要着急动手输出界面,先结合目标(近期目标和远期目标)综合考量,系统性地思考有哪些途径达到目标,确保所有实现手段的方式都有考虑到,并且可以整合途径一致、方向近似的方案。对差异性不大的方案进行合并划归,才能在合理范围内整理出具有不同思考维度与目标侧重的提案方向。前期规划思考的深度决定了方案的广度,只有清晰的思考方案才会创造无限的可能。 设计师方案输出 用案例来让大家对清晰这个定义有更具象的认知: 相册小程序Logo这个需求的目标是需要突出相册元素,并强化品牌识别度。 这是设计师输出的Logo提案初稿,虽然输出了28个方案之多,但没有设计思路的规划,想到哪就画到哪,很多方案是重复的,还有一些方案在设计初期就应该Pass,设计的整个细致度也不够充分。 Logo需求 于是设计师对设计方向重新进行规划整合,按照输出形式重新规划了分类。 按照分类筛选出四个可以继续优化的方案。并且拿着四个不同方向的方案去汇报。最终确定D方案。 我们重新回顾一下这个需求,28个方案 VS 4个方案,设计师需要的不是尽可能输出多方案的能力,方案越多可能表示你在错误的道路上越走越远,需要的是通过前期系统的思考能一次把方案做对的能力。

2. 有效 - 解决存在的问题、能达到设定的目标、可以落地的方案

很多设计师拿到产品需求会立即动手,认为满足了产品这个角色提的需求便是好的设计输出,或者把方案出的天花乱坠,当产品或者其他角色提出不同意见就会觉得他们不懂什么是好的设计。这些现象大多是因为设计师在项目前期没有正确思考和评估这个需求本身需要解决什么问题、方案能否达到团队共同设定的目标,以及方案是否能平稳落地这三个维度。 有效 - 解决存在的问题、能达到设定的目标、可以落地的方案 解决存在的问题—从问题出发 我们在实际输出方案的时候,不能从产品经理的需求文档开始,而是要把考量维度更前置,从项目现有的问题出发。这个问题的搜集包括外部用户的反馈,内部团队的声音,但需要注意的是用户的反馈不一定是真正的问题,需要做到筛选和甄别。比如新发布一个版本可能会碰到的一个情况是很多用户打一星反馈说界面太难看太丑,这种属于用户感受,我们可以再深挖一下用户觉得丑的原因,是不是改变了太多用户习惯,但又没有给用户真的带来更好的体验和更多的收益。 能达到设定的目标—从目标启动 问题还需要结合目标一起考虑,解决问题的思路并不完全等同于目标,目标是大家一起制定的未来产品的发展方向。比如我们新发布的版本里面新加了一个Tab改变了用户习惯,大批用户投诉,但如果这个新Tab是符合我们目标的,我们不能为了短期解决用户投诉把这个Tab下掉,应该继续观察用户在这个使用过程中碰到了什么问题,解决实际操作中碰到的问题。 用案例来让大家对问题和目标有更具象的认知: 我们需要优化QQ空间的为空界面,首先我们梳理下现网存在的问题,风格整体比较老旧,很多图形表意不明确,新出模块就会有新风格,所以存在很多不统一的地方,空间整个业务有一百多个为空界面,导致开发也不清楚到底应该怎么用,用什么,所以很长一段时间是处于乱用的状态。 解决存在的问题—从问题出发 接着我们梳理了这次优化的目标: 1 界面统一,用户能对表意感知明确(解决现网问题) 2 强化QQ的品牌 3 做成基础组件,保证复用性 4 低成本开发 确定了优化目标以后我们没有马上急于尝试风格,而是先遍历了所有为空异常页,整合了所有场景最后梳理出八种情况,这八种情况可以覆盖所有的为空场景,梳理整合场景是目标1、3、4能实现的前提。 然后我们基于这八个场景来输出设计风格,要低成本开发,所以这里没有考虑加动画,用企鹅剪影结合具体的场景来表意,不仅强化了品牌,也能做到表意清晰明确。图形定好以后我们马上也输出了规范,Push给对接的开发同学方便调用。 在输出方案过程中,始终都要紧紧贴合问题和目标,避免无效设计。 能落地的方案—技术可以实现 在输出设计方案的时候,设计师需要考虑到开发成本是什么,需要消耗多少资源去实现这个需求,最低成本达到目标的路径是什么。如果有些方案开发成本很大却收益价值却很小,我们就需要斟酌它是否仍有执行的必要。避免一味的追求设计效果不去对齐成本、人力,最后也只会是设计的自嗨。 用案例来让大家对清晰这个定义有更具象的认知: 产品提了好友生日推送礼物的需求,目标是想用生日这一比较温情的场景去设计专门的祝福页,用来提升写操作和大盘活跃。我们需要设计送给用户的礼物卡片,从实现手段的难易规划了三个方向: A 手势交互但开发难度大: 3D手势交互动画 B 趣味动图且开发成本适中:局部小动画 C 静态但开发成本低:全静态视觉,复用已有开发流程 最后团队对齐了人力成本,决定采用方案C,把设计精力放在本身卡片的表现上。

HOW: 如何输出清晰有效的设计方案

那如何才能输出清晰有效的设计方案呢?设计方案归根结底是思维方式的具体体现,输出清晰有效的设计方案最核心的点在于体系化的思考方式,我总结了一下几点: 1 拓宽边界 拓宽边界需要设计师站在更高的视角和有更广的视野,把设计从表现和执行抽离往前后延展,在整个设计过程中往前去挖掘需求和规划产品结构,往后做到把控和沉淀,能站在上下游各维度去Review整个项目,只有站在更全局的视角审视,才能跳出片面设计的维度。 2 转换视角 从不同的视角看待问题,学会拆解问题和解决问题,从产品/开发不同的角度来全盘看整个产品,分析这个需求的投入产出比是不是足够,是不是能达到目标(包括设计目标和产品目标)。设计、产品、开发从来都不是对立的,都是不同角色为了整个产品发力。 举个例子,产品同学觉得输出的方案不好看,是在用感性表达,我们可以尝试继续拆解不好看背后的原因,比如是不是核心内容不够突出、担心按钮转化率等,一开始就抱着产品不懂设计这种想法是没有办法解决问题的。 还有一个就是用户同理心,很多时候我们不能只站在设计师和产品的角度看待用户反馈的问题,比如新功能内部团队觉得很厉害,但实际门槛太高,用户根本不知道怎么操作,而我们长期体验这个产品反而忽略了产品的易用性。 3 结构思维 我们在启动项目的时候,不要单点去看要在某个页面要做什么改动,而是从问题入手,和产品同学对齐好目标,结合设计理念,最后找到发力点在哪里,循序渐进,这样很大程度上能避免项目的反复,对设计流程的准确把控也是输出优秀设计方案的基础。 举一个日常生活的例子帮助大家理解,比如我的问题是长得丑,我的目标是要变得更年轻漂亮,我的理念就是改善体型和优化五官,最后找到具体的发力点比如晚上不吃晚饭,去美容院打美容针、学会怎么化妆等。 4 认知创新 有些新设计师对设计创新的认知还停留在是去做一些创造世界、改变世界的事情,认为创新就是把原项目进行翻天覆地的改变,初入职场会觉得负责的业务和项目都很小,没有什么意思,其实创新的维度有很多,包括设计工作流程的优化、还有从小的问题点着手去深挖和思考,找到合适的解决方案并打磨细节给用户创造惊喜。摆正心态才能做对事做好事。 5 及时复盘 完成项目以后需要不断的总结方法,遇到的问题,除了技法层面的提升,更重要的还包括思考层面的提升。学会去总结之前踩过的坑,避免重复性的问题,比如你的输出一直存在层级不清晰的问题,那么你需要关注后续输出的界面里大模块之间以及元素之间的层次是否还存在这个问题。可以犯错误,但是尽量避免总是犯同样的错误,这样才能加速成长的脚步。

写在最后

进入互联网公司工作之前,我们对设计的理解更多停留在表现层面,所以对好设计的判断标准更多是好不好看、喜不喜欢。当进入互联网公司后,随着工作经验的积累,我们会发现设计不只是狭义地使用软件绘制图形,背后需要很强的逻辑和系统思考的能力、结构化的思维、沟通能力等,需要我们不断的学习补齐自己的短板,及时转换职场心态。 来源:腾讯ISUX https://isux.tencent.com/articles/systematic-thinking


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/sheji-fangan-shuchu.html/feed 0