首页

UI界面超逼真!Magic Leap One曝光2款虚拟现实新应用

蓝蓝设计的小编

据悉,Magic Leap近日将公布关于Magic Leap One的2D和3D用户界面,有关媒体还在该公司的开发人员文件中发现了包括Landscape和Immersive在内的应用程序。

一看就懂,详解大厂ui设计制作规范步骤

博博

一看就懂!详解大厂UI设计规范制作步骤

小小设计控 2018-07-30 09:34:38

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


小小设计控 2018-07-30 09:34:38
一看就懂!详解大厂UI设计规范制作步骤

一、提取设计原则关键词

一看就懂!详解大厂UI设计规范制作步骤

1. 提取一级关键词

一看就懂!详解大厂UI设计规范制作步骤

第一步,先要去提取出关键词,这个关键词怎么来,有几种方式获取,第一个从整个公司战略出发,任何一个产品一定有他的战略,品牌战略,商业战略。举个例子,假设我们是 eaby,公司今年战略是全球化,高品质,正品,那么这个就是一级核心关键词,所有的设计语言一定要和公司战略结合起来,可以理解为战略关键词是整个设计语言顶部金字塔。

二、运用情绪版提取二级关键词

一看就懂!详解大厂UI设计规范制作步骤

有了一级关键词后,需要去思考,那么什么样的设计能给人全球化的感受呢,什么样的感觉能有高品质,正品应该传递什么样的感觉呢?此刻需要用到第二个方法就是情绪版,通过情绪版去把符合这些关键词感受的图形具体化。

三、高品质特征是什么?

下图是一组日本的花茶设计,那么在这组设计中,设计师是如何体现高品质呢?

一看就懂!详解大厂UI设计规范制作步骤

△ 首先包装很精美耐看,设计简约

一看就懂!详解大厂UI设计规范制作步骤

△ 做工精量,整个产品包装,都是在富士山脚下

一看就懂!详解大厂UI设计规范制作步骤

△ 采摘环境很透明,值得被信任

一看就懂!详解大厂UI设计规范制作步骤

△ 整个品茶的过程也特别让人向往,很有仪式感

一看就懂!详解大厂UI设计规范制作步骤

△ 整个的设计很完整,很有设计感在里面

一看就懂!详解大厂UI设计规范制作步骤

通过以上案例拆解,我们能对这个高品质的关键词有更加进一步的理解,高品质原来在情感层面是一个这么抽象的感觉,但是很多同学会问,那么这二级词汇也很抽象,如何靠这个来做设计,很难去理解及表达,别着急,还有下一步。

1. 高品质设计表现形式?

关于高品质在视觉形式上如何来体现了,哪些设计感觉能代表高品质呢,这个时候就需要我们去寻找一些设计参考,这些案例要能代表高品质。

一看就懂!详解大厂UI设计规范制作步骤

△ 清晰的有品质的图片

一看就懂!详解大厂UI设计规范制作步骤

△ 牛皮癣,不精致不可取

一看就懂!详解大厂UI设计规范制作步骤

△ 优雅的排版和留白,文字清晰,杂志感受

一看就懂!详解大厂UI设计规范制作步骤

△ 图文密集,缺少版式不可取

一看就懂!详解大厂UI设计规范制作步骤

△ 精致的布局,栅格的体系,给人品质感

一看就懂!详解大厂UI设计规范制作步骤

△ 缺乏版式及设计感

一看就懂!详解大厂UI设计规范制作步骤

△ 有设计细节的

一看就懂!详解大厂UI设计规范制作步骤

△ 无细节不可取

一看就懂!详解大厂UI设计规范制作步骤

△ 合理的配色,简单清晰

一看就懂!详解大厂UI设计规范制作步骤

△ 山寨的配色不可取

一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤

△ 设计的延续性和完整性

2. GOOD CASE

一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤

3. BAD CASE

一看就懂!详解大厂UI设计规范制作步骤

四、设计分层

以上就是我们从一个战略关键词逐步推导到一级关键词,到二级关键词,到设计手法,以及对应设计表达,推导的一个全过程。

  • 本能层:清晰的,有设计感的,做工精致
  • 行为层:完善的,值得信任的,用心的
  • 精神层:让人向往的,值得期待的
一看就懂!详解大厂UI设计规范制作步骤

五、总结

以上大概为一个设计关键词的全部推导过程及到设计手法的确定,也是设计语言里面最难的部分,后面的关键词也是类似的思考方法和思路,最终通过推导我们需要得出每个关键词的情绪图,以及对应设计特征,最终需要在界面中展示的形色字构质,一个完整过程。

一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤

比如国际化,同样通过前面思路,我们需要去思考国际化如何在设计中体现,去提炼出代表国际化的象征物,如地标,国旗,邮戳,货币等等,包括如何在界面中融于国际化元素,以及人物和节日场景。

结语

希望大家可以通过我这期的分享,能够详细理解到如何从公司战略层提取到核心一级关键词,到二级关键词,以及对应的设计手法,对应到形色字构质,大家可以依据此方法去拿你现在手上的界面去做一次体系化的推导。

最后,依据推导出来的原则,以及对应的设计手法去做概念,去在界面中运用,最终完成设计语言第一步,设计关键词和设计手法定义。

图片素材作者:Tran Mau Tri Tam ✪



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



如何创建人物插图——2018年世界杯版

博博


如何创建人物插图——2018年世界杯版 

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


五步创作2018世界杯超级球星插画


2018年世界杯赛正在如火如荼地进行,为了以示庆祝,我们挑选了来自多个国家的25位超级明星,给他们创作人物插图,送给广大球迷们。在创作过程中,Leo Natsume&Daniel Nyari给了我们很多灵感,非常感谢!


为了准确地画出每个球星的面部结构特征,一开始收集材料的时候就要收集的全一些。我们要从照片中提取每位球星的准确特征,这样最后做出来的插画才能“形神兼备”,才能非常生动。

让我们一起来看看设计思考的过程吧。



    

第一步


观察人物要从不同角度来看——正面,45度和侧面轮廓。此外,我们还需要收集不同面部表情的照片,比如冲刺的时候、休息的时候、微笑的时候等,才能更了解人物。做设计,我们不仅要看到“形”,还要看到“神”,多了解人物的个性和习惯有助于我们做出更有灵魂的设计创意。





第二步


接下来,我们要根据刚刚从不同角度做的人物分析总结一般面部结构和特征。我们以梅西为例,他留着经典的复古发型、大耳朵、小而有神的眼睛。当然,为了保持插图最终的统一性,所有人物的视线水平需要保持一致,并且应该根据人脸的长度和宽度以及发型进行调整。






第三步


通过前两个步骤之后,现在我们已经有了人物的主要图像了。现在,可以开始考虑人物的种族,肤色,发型和制服的颜色了,这样有助于做出原汁原味的人物视觉。同时,我们必须调整整体色调来调节亮度和饱和度的差异。





第四步


这是最关键的一步。完成以上所有操作后,就可以根据前面步骤中收集的照片选择每个球星最具特色的面部表情。例如,梅西微笑着轻轻抬起头的样子最吸引人,我们就选这个表情。







第五步


这是最后一步,我们将做细节的调整,包括人物的整体图像结构、颜色对比度、面部元素之间的比例等。然后再添加其他内容,如条纹、耐克/阿迪达斯徽标和其他此类细节。最后,将设计草稿缩小200%,以确定某些地方的设计是否足够亮。





经过上述五个步骤之后,我们的球星插画就出炉啦。我们一共设计了25位球星插画,挑选部分比较好的展示一下。And,祝大家看世界杯愉快!



























作者:Queble

翻译:熊小熊

原文链接:https://uxplanet.org/how-to-create-character-illustrations-2018-world-cup-edition-8a709dcfd589


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



最流畅手机UI排行榜:小米第四、华为第二、最大黑马诞生

蓝蓝设计的小编


安卓手机发展到现在,除了硬件方面受到大家关注之外,很多消费者在选择手机的时候,都会注重这款手机搭载的系统,也就是手机UI。就目前的情况来看,很多厂商的产品都有自己的特定UI,这些UI都是基于安卓系统深度打造的产品。

设计基础!不简单的设计

蓝蓝设计的小编

色彩跳跃、文字流畅、精美的设计,会不会让你有一种爱不释手的感觉呢?即使你对其中的文字内容并没有什么兴趣,有些精致的广告也能吸引住你,这就是平面设计的魅力!它能把一种概念,一种思想通过精美的构图、版式和色彩,传达给看到它的人。

重复与突变在产品设计中的应用

涛涛

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

重复可以使画面秩序化、整齐化,形成和谐、富有节奏感的视觉效果,更加有利于人们加强对画面的记忆。

一、设计中的重复是什么?

在平面设计中,重复构成是常用的一种构成方法,通过重复可以使画面达到和谐、统一的视觉效果,并能加强给人的印象,也可以达到一种有规律的节奏感和形式美感。

排版的四大原则:对比、对齐、亲密性、重复,重复在排版中也占据了一席之地,可见它在设计中分量是不可小觑的。

格式塔原理:接近性、相似性、连续性、封闭性、对称性、主体/背景、共同运动,格式塔原理中的对称性就是重复的一种表现方式;格式塔原理中的相似性算是重复中自带的一种突变。

1. 重复

重复是设计中最基本的形式。在同一设计中,相同的形象出现过两次或两次以上就形成了重复。

在产品设计中重复的元素有大小、形状、配色、间距、组件、圆角值;在交互层面重复的元素有位移(方向)、旋转、缩放、不透明度、相同属性交互要一致。

在产品设计的前期设计师需要输出界面设计,为了方便下游前端工程师更好的规范和适配,也要保证产品后期上线产品视觉稿的高度还原,这就要求设计师输出一整套产品的视觉和交互规范。

重复配色

在 app store 的页面中使用了相同的颜色进行提醒,方便用户快速查找和点击,整体的蓝色又给人理性的感觉,看到付费app 的好评数可以看出是因为产品好才推荐你进行理性消费。

重复大小

INS 主页第一排头像相同大小进行重复排列,与内容的人物头像有大小对比之分;INS 搜索页采用了九宫格布局,为了重复中有变化它把右边的四个方格合并成一个内容展示区域,推荐好的热门视频。

重复间距

Airbnb 界面中的间距非常规范,首页大体采用了谷歌里面的8px 原则,每个间距之间的规范很多1:2的比例关系。好的比例规范会给界面带来简洁大气的感觉。

重复组件

(如图标注)INS 界面中用了统一组件,相同的圆角和高度规范又给画面增加了统一性和连贯性。

2. 突变

在相同的形象重复出现时,尝试去改变某一形象的形状、颜色、大小、不透明度等来丰富画面时我们称之为突变。

格式塔原理中的相似性也是重复中突变的一种形式。

在产品设计中我们运用的突变的目的很简单就是为了让其更加突出,多用于区分当前状态、选中状态和默认状态。

banner轮播

banner轮播图上面的提示状态会根据当前状态和默认状态进行区分,把当前状态进行变化从而进行凸显出来。

导航栏分类

导航栏分类上面的提示状态也是根据当前状态和默认状态进行区分,把当前状态进行变化从而进行凸显出来。

按钮

在登录注册页面中,我们会通过大的色块凸显登录按钮,引导用户快速登录进入到 app 里面。也减少了用户的思考过程,符合大脑的惰性。

但是在很多 windows系统中,卸载软件时会跟你玩文字游戏,会用非、否、不是等诱导你作出错误的判断。

feed流

feed流是产品中持续更新并呈现给用户内容的信息流。feed流在产品展现形式有列表、瀑布流、卡片形式。

站酷首页 feed流里面会把内容分为作品和文章,之前版本中的作品和文章的样式是一样的,新版本中重点是推作品,当文章出现时通过改变文章的排版进行区分,重复里面又带有变化。

3. 节奏感

多少元素排列可以形成节奏感,一般来说是3个或3个以上,两个你不能说是节奏感只能说它是重复。当3个或3个以上整齐的排列就会形成一种节奏感。

左右滑动

(如图来自uistar)界面中三个书籍整齐的排列在一起,可以通过左右滑动来获取更多的书籍。在使用左右滑动效果时,应考虑元素的数量,尽量不要超过10个以上。

列表页

(如图来自uistar)列表页面整齐的排列在一起有一定的节奏感,通过改变 icon 的配色来丰富画面。

4. 韵律

元素在排列的过程中有形状、颜色、大小、不透明度等有规律的变化就形成了一种韵律感。在动效上主要还是通过位移、放大缩小、旋转、不透明等变化来制作界面动画。

最美有物

最美有物app 的画报界面中,通过改变每个界面的大小比例有序的排列在一起,通过上下滑动可以快速浏览标题,进行查找翻阅,整个过程很流畅,整个界面有流动性和韵律感。

图表

图表在设计的时候通过不同颜色来区分不同的时间段,线条错落有致的排列增加了界面的韵律感。

配色

△ 来自Prakhar Neel Sharma和crisssamson

这两个作品都是通过色彩按照红橙黄绿青蓝紫规律运用到界面中的背景和列表中,增加了画面的丰富感和韵律感。

重复在动效中如何运用才会有韵律感?

界面动效中主要分成当前状态动效变化和转场动效变化,界面中的元素a1对b1、a2对b2、a3对b3信息对等,能帮助界面做出很有韵律感的动效。

二、总结

重复可以使画面秩序化、整齐化,形成和谐、富有节奏感的视觉效果,更加有利于人们加强对画面的记忆。

重复、突变、节奏感、韵律几种不同的方式都是存在于产品当中的,几种不同的美感可以同时存在的,只不过它适应不同人群的审美能力,审美能力高一点的更喜欢一些变化,审美能力相对基础更喜欢简单的重复。

所以画面中不断出现同样的元素这叫重复,而在很多重复里面突然出现一个变化这叫突变,相同元素整齐的排列在一起这叫节奏感,而这些元素在排列的过程中有形状、颜色、大小、不透明度等变化就形成了一种韵律感。

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

2018年Behance 上最值得关注的20个设计趋势...

博博

2018年Behance 上最值得关注的20个设计趋势...


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


对于2018年的设计趋势,众说纷纭。作为大型设计社区的behance终于按耐不住,多名设计师预测了2018年20大设计趋势,下面就和兴元君一起看看到底是哪些吧!

1 未来感

无论何时,我们都对未来充满了幻想与期待。更先进的显示技术、更的出行方式,那些若梦幻离的景象总是令人兴奋,未来感的塑造总会唤起人们心中对科技的无尽渴望。

2018年Behance 上最值得关注的20个设计趋势...

2 简约舒适

少即是多,这是亘古不变的真理。简约意味着简洁,以简约主义的白色为主,优化功能,强调空间感。

2018年Behance 上最值得关注的20个设计趋势...

3 深度感

为传统的平面元素增添厚度,是 2018 年的设计大势。一点阴影,赋予了元素另一个维度,为交互体验打开了一扇窗。空间造就了深度,深度成就了空间。

2018年Behance 上最值得关注的20个设计趋势...

4 响应式图标

在未来,越来越多的面向移动体验,而日渐修长的屏幕让纵横之别不容忽视。无论哪种情况,图标都必须适应新的环境。因此,响应式图标设计对设计师而言至关重要。

2018年Behance 上最值得关注的20个设计趋势...

5 插画设计

任时光奔腾如梭,但历史总是惊人相似。太长时间的同质化,让突出个性的呼声愈喊愈震。这些年尚未发力的插画,在今年一定会得到大家的关注。

2018年Behance 上最值得关注的20个设计趋势...

6 动效设计

雨木林风,荷伴涟漪。我们无时无刻都在被运动吸引,技术的不断革新,为动效的使用铺平了道路,越来越多的产品也随之使用动效。大势所趋,永不停息!

7 微交互

上下拨动,左右平移;点按有悦,长停则变。 优化体验,塑造品牌,微交互无处不在

2018年Behance 上最值得关注的20个设计趋势...

08 演示动效

这种动效只供展示,引导用户使用。特别是在启动页、空状态,演示动效能极大的激发用户使用兴趣,帮助用户完成特定操作。

2018年Behance 上最值得关注的20个设计趋势...

9 明亮渐变

扁平化大行其道多年,多少让人有些审美疲劳,渐变得以重新回归。不同以往的是,鲜艳、明亮、酷炫,是当下渐变的特点。

2018年Behance 上最值得关注的20个设计趋势...

10 三维效果

3D 始终是我们不容忽视的力量,蛰伏多年,一直在寻找爆发的良机。且在这多年的隐忍中,聚集了越来越多的力量,让本就可怕至极的力量变的愈加摧枯拉朽。

2018 年,它不一定会发力,可一旦契机出现,就会势不可挡。

11 金属质感

现实和虚拟的界限愈加模糊,较为容易 “欺骗” 视觉的金属质感重新博得设计师关注。

2018年Behance 上最值得关注的20个设计趋势...

12 上个时代的彩色图案

也许是怀旧情怀的需要,也许是那年的少年已肩扛重担。那些年在玩具和衣着上图案重新焕发出新的活力。

2018年Behance 上最值得关注的20个设计趋势...

13 傻大粗黑

这一点毋庸置疑,在较长的一段时间里它都不会被取代。更令人欣慰的是,无衬线字体也开始展露头脚,让字体的选择进入了一个新世界。

2018年Behance 上最值得关注的20个设计趋势...

14 字体设计

在一切归于冷静之后,那些精雕细琢,能彰显差异性的东西重回王者之地,字体设计也得以荣膺桂冠。

2018年Behance 上最值得关注的20个设计趋势...

15 粒子背景

沉浸体验,是所有设计师的不懈追求。不喧宾夺主突出主体,不太阿倒持取悦用户,正是粒子背景的魅力所在。

16 拆分页面

一分为二,各司其职;化繁为简,相辅相成。划分页面空间,重新定义区域,图像与文字分离,构建信息结构。信息越是爆炸,越需要化繁为简

2018年Behance 上最值得关注的20个设计趋势...

17 艳,更艳

从性冷淡到大胆用色,恍然间抛开了对过度的恐惧。越是过度,愈是讨喜,任何大胆的设计都会被称赞和鼓励。

2018年Behance 上最值得关注的20个设计趋势...

18 单色图标

色彩纷呈,渐幻若璃;界面之中,唯我独素。色彩艳丽的今天,唯有图标坚守其道。不跟风任吹,不随波逐流,这种坚持换来了舒适与愉悦

2018年Behance 上最值得关注的20个设计趋势...

19 混合图标

线与面合,白与艳合;合则一派,不合则灭。在不同风格争相出现的今天,也是一种不错的尝试。

2018年Behance 上最值得关注的20个设计趋势...

20 新造型主义

作为新造型主义的奠基人,皮特·蒙德里安曾这样说过:对自由和平衡(和谐)的渴望是人类天性。通过理想的绘画形式将宇宙真理物质化、几何化

简化,井然有序,色面完美。率真的纯粹原色相互对立与平衡,凭借两种否定,黑与白分割构图。

2018年Behance 上最值得关注的20个设计趋势...

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


商品展示列表——大图、多图、图文列表该如何选择?

涛涛

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

Image title

Image title

Image title



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


移动端搜索功能设计:3个阶段解析搜索流程设计要点

博博

移动端搜索功能设计:3个阶段解析搜索流程设计要点


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

移动端搜索功能设计:3个阶段解析搜索流程设计要点

人人都是产品经理 2017-01-04 18:08:02


这篇文章笔者想和大家聊一聊有关搜索功能的设计,搜索功能是每个内容型APP的核心,它的易用性决定了用户是否能从APP里快速找到自己想找的内容,那么决定搜索体验好坏的关键点又是什么呢?这里我总结了两点,“操作的易用性”和“结果的准确性”。看似简单的两点却有很多的学问,笔者把搜索的交互流程划分成三个关键阶段,“搜索前、搜索中及搜索后”,接下来将从这三个阶段逐一分析整个搜索流程中的相关设计。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

搜索入口——依据功能权重来判断入口的表现形式

在不同的APP或者不同的场景下搜索入口有着不同的表现形式,具体的表现形式取决于产品对搜索功能权重的定义,如果说在某一场景下搜索功能是用户常用的核心功能那么他在界面上所表现出来的权重就要高些,反之则低些。下图是常见的搜索功能的入口形式,他们的权重从左到右依次降低,笔者将对他们一一进行分析

移动端搜索功能设计:3个阶段解析搜索流程设计要点

方式一:如下图APP Store的搜索入口

如下图APP Store的搜索形式,搜索放在标签栏上作为一个独立的功能模块,它的功能层级是最高的。不管用户操作到哪里都可以随时进入搜索页面,这样的搜索入口通常用在搜索场景非常多的内容型APP上,方便用户在任何时候快速进入搜索页面。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

方式二:搜索框外漏在nav bar

如下图是京东app的搜索入口,它将搜索框外漏在nav bar上,这样的形式有着两个设计的关键点:

移动端搜索功能设计:3个阶段解析搜索流程设计要点

关键点一:搜索框外漏在顶部导航条上

搜索框直接外漏在导航条上是为了突显该功能,这一功能往往是用户在该页面非常核心的操作任务,类似天猫京东这类电商型app,通常情况下用户都是带着明确目的来购买东西的,那么他们采取的最快最直接的方式就是搜索。

关键点二:在向上滚动界面时,搜索框一直悬停在顶部

这样做的场景是这样的,在用户滚动页面寻找内容时,可能并不能找到自己想要的内容,搜索框一直悬停一是为了暗示用户可以进行搜索,二是为了让用户在想搜索时快速触发搜索

方式三:出现在NAV BAR下面,默认隐藏或显示

如下图是微信在聊天页面和通讯录页面的搜索入口,初始化状态时聊天页面的搜索框是不出现在用户的可视范围内的,当页面下滑时搜索框才出现,而在通讯录页面里搜索框是默认出现在用户的可视范围内的。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

分析:微信在最近联系人和通讯录上搜索框的默认状态不同,这很好地诠释了这两种场景下的搜索功能的权重。最近联系人页面上的搜索入口显得更加隐蔽,因为在这个页面下用户产生搜索的场景很少,把其隐藏简化了界面的元素,提升了界面的美观性。

方式四:通过点击icon触发搜索

如下图是淘票票的搜索的入口,通过点击右上角的搜索icon进入搜索页面:

移动端搜索功能设计:3个阶段解析搜索流程设计要点

分析:在界面权重上,这样的方式相对于以上三种方式来说显得较弱一点,因为在这样的场景下用户使用搜索的概率并不是很高,如果把搜索外漏就会占据更多的屏幕空间,破坏界面的权重等级和美观性。

总结:依据用户的需求场景,搜索入口放在不同的位置,如果说在该页面搜索是一个主要的功能,我们就应该去突显它,提升它在界面上的权重,反之则减轻它的权重。

搜索中间页——运营的重灾区,用户搜索行为的关键点

搜索中间页本来应该是一个轻量化的页面,用户在这里输入内容进行搜索即可。但随着运营需求的扩张,这个页面逐渐成为了一个运营重灾区,多了很多推荐的内容。笔者将从“输入框提示信息、搜索分类、搜索历史、搜索推荐、搜索输入、搜索建议”等方面分析一下这个页面的设计。

1. 输入框提示信息

搜索框内的提示信息通常是提示用户当下可以搜索什么样的内容,如下图bilibi的搜索提示,告诉用户可以进行“视频、番剧、UP主或者AV号”的搜索,这样的提示信息对用户也是一种良性的引导,给用户提供了一个心理预期,同时也对用户随意输入关键词造成无结果的伤害体验的可能进行了限制。例如一个房产APP,搜索框内提示输入楼盘或小区名,如果没有这样的提示有的用户可能就会去输入价格去筛选房源,这句提示语很好地降低了这样的风险。

但随着人们对APP使用的熟悉,用户在这里的认知负担基本消除,运营人员逐渐抢占了这块地方,这句话变成了内容的推荐或者产品的Slogan,这些推荐的内容可以是运营人员手动维护的也可以是依据用户的购买和行为习惯进行推荐的。如下图右边是淘宝的搜索提示,搜索框的文案变成了“红人最爱潮牌名服”,这就是运营人员在为特定内容进行导流。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

2. 搜索分类

在内容型APP中搜索时通常会对内容进行分类搜索,这是为了帮助用户更地找到相关内容,分类的操作可以发生在搜索前也可以发生在搜索后,如下图是“淘宝、微信、网易云音乐”搜索分类的方式,笔者将分别对他们进行分析。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

淘宝是将搜索分类前置,默认搜索宝贝,点击后弹出浮层进行切换。这样的方式存在一个明显的缺点就是由于该入口所占空间位置不显著,会导致用户感知太弱。 这样的方式通常用在用户大多数情况下只搜索某一分类的内容,如淘宝这样,用户大部分的搜索场景都是在寻找宝贝。

微信默认搜索所有内容,将分类通过通过三个很显著的入口放在搜索框下方,当点击某一分类时跳转到该分类的搜索界面,同时搜索框的文案以及搜索界面的内容发生相应变化,提示用户搜索范围被改变。这种方式通常用在这些分类搜索的场景都很常见时,它的缺点在于,从界面表现形式来看,这三个分类更像是三个功能的入口,他们与搜索框联系得不是很紧密,很多用户最开始使用时并不知道点击这些分类是进行搜索范围的限制。经测试3个从未使用过该功能的用户,他们都认为点击朋友圈后就是进入朋友圈,点击文章后就是显示所有文章。

网易云音乐是将搜索分类进行后置了,在下文关于搜索结果的展示我会分析它的优劣势。

3.搜索历史

搜索历史记住用户的足迹,方便用户快速向以前搜索过的内容进行转换。设计上我们需要注意的一点就是需要把搜索历史和搜索推荐区分开来,在位置上,尽量让搜索历史靠近搜索框(如下图),因为从认知心理学上来讲,越靠近搜索框的内容越能表示它是搜索历史。在表现形式上,搜索历史和搜索推荐尽量采用不同的表现形式。搜索历史伴随的交互操作有删除单条或者清空搜索历史

移动端搜索功能设计:3个阶段解析搜索流程设计要点

4. 搜索推荐

这里的搜索推荐通常有三种来源:

  1. 按照用户的搜索热度进行推荐;
  2. 运营手动配置;
  3. 按照搜索行为进行计算和推荐;

它存在的目的主要有两个:

  • 一是挖掘用户的潜在需求,让用户更快地找到想找的内容;
  • 二是作为运营位为特定的内容导流。

建议:

  • 不要漏出太多的推荐内容,毕竟它带有一些运营和广告性质,用户的接受度并不会很高
  • 在界面上让推荐内容和搜索历史有明显的区分,方便用户在形式上一眼就能区分出搜索历史和推荐内容
  • 尽量推荐一些对用户有真正价值的内容

5. 搜索输入

受移动端操控方式的限制,在输入内容时存在两个明显的痛点:“修改内容”和“输入速度”。

关于修改内容:当用户想更改语句中一部分文字时,将光标移动到想要更改的地方是一件很难的事,点击操作真的很令人发狂,通常情况下我宁愿重新输入。但是针对这一点搜狗输入法做了一个很人性的交互,当用户按住键盘左右滑动时就能移动光标(如下图)。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

关于输入速度:很早之前偶然间发现了UC浏览器在输入文字时的一个交互功能,如下图所示,当输入文字后,用户可以将搜索建议的词语直接加入到搜索框中然后继续输入文字。这样的需求场景在很常见,比如我想搜索“交互设计师的前景”,当我输入交互二字后就会有“交互设计”的搜索建议,点击搜索建议后面的箭头将这个词直接加入搜索框,然后就出现了“交互设计师的前景”的搜索建议,点击搜索建议后进入搜索结果的页面,这个过程中我少打了很多字,对我的搜索速度有很大的提升。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

6.搜索建议

当用户输入内容后,搜索框下面出现了众多的搜索建议,这些搜索建议是为了帮助用户快速向目标进行转化,如下图是京东的搜索建议,当我输入画框后,一系列画框的搜索建议就出来了,它还有一个亮点就是在此提供了细化筛选条件,画框后面紧跟了“长方形、实木、正方形”等关键的筛选条件,为用户省去了到结果页进行筛选的步骤。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

搜索结果——背后的逻辑决定了用户是否能找到准确的内容

搜索结果是搜索过程中最关键的点,结果的准确性确定了用户体验的好坏,笔者将从“搜索结果的形式、搜索结果的操作、搜索结果的分类、搜索结果的排序”等方面来对搜索结果进行分析。

1. 搜索结果的形式

搜索结果一般分为两种,一种是所见即所得,用户输入内容后出现在搜索框下面的搜索建议就是搜索结果,这种搜索通常出现在一些轻量化的APP中,因为搜索建议对应的就是唯一的搜索结果,如下图微信的搜索一样。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

第二种形式就是一个关键词对应了多个搜索建议,每个搜索建议又对应了多个搜索结果,当用户点击搜索后进入了一个专门的搜索结果页,如下图京东的搜索一样。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

2. 搜索结果的操作

依据用户的需求目的,在搜索结果的列表上我们可以外漏用户大部分情况下会采取的操作,比如说视频类网站,用户搜索到某一内容后,最常采取的操作就是播放,我们就可以把播放按钮外漏,缩短用户的操作路径(如下图爱奇艺的搜索结果页)

移动端搜索功能设计:3个阶段解析搜索流程设计要点

3. 搜索结果的分类

通常的分类方式是TAB切和卡片,以下是微信和网易云音乐的分类。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

这两种方式有各自的应用场景,TAB切主要应用在搜索结果有固定的几种分类,并且通常的情况下搜索结果都有很多的内容,如上图的网易云音乐,每一个分类都有很多的搜索结果,如果它采用卡片式的瀑布流布局,用户需要不停往下翻才能看到第二种分类的内容。卡片式主要运用在搜索结果的内容不多,如微信这样的情况,每一类结果并不是很多,卡片式的瀑布流布局能让用户快速定位到自己想要的内容,如果这里用TAB切就很尴尬了,因为每一类的内容都很少或者很多类里根本没有内容,这样的用户感受就不好了。

4. 搜索结果的排序

搜索结果的排序是一个比较复杂的工作,里面涉及了很多的算法逻辑,笔者对这块也不是很清楚,但是一般的垂直内容型APP并没有这么复杂的算法在里面,就是按照搜索的关键字去一一匹配。

如下图是说我在QQ阅读输入一个“男”字,然后就给我建议第一个字是“男”的所有可能的结果,当第一个字匹配完后就匹配第二个字,这样以此类推。他们的整体顺序就是按照匹配关键字的先后进行排列的,其实在排序中还牵涉了很多的算法,比如说它可能会掺杂一些“热度、人气、人为意图、语义”等因素的权重,这里不展开赘述了。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

以上就是笔者对搜索功能的介绍和思考,希望能对大家有所帮助。

本文由 @不知名设计师 原创发布于人人都是产品经理。未经许可,禁止转载。



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


《魔力物语》UI界面变革,新旧UI对比

蓝蓝设计的小编

经过一个多月的闭关潜修,新MMORPG回合制游戏《魔力物语》近期又准备和大家见面了。至于具体的开测日期,容小编先卖个关子(PS:我绝对不会说其实我也不知道)。在上次结束之后,我们针对测试出现的问题进行修复并优化游戏。在一个多月的优化中,游戏将会脱胎换骨,以更完善的姿态和大家见面。下面就让大家看下游戏UI界面优化的成果。

日历

链接

个人资料

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

存档