教你写UI/UX体验日记—武装你的大脑
1年前Publish
针对最近写的UI体验日记一些小心得,输出一些交互方面的分析思路。


前言:为什么要写


我们手机里安装了几十个甚至上百个APP,每天乐此不疲地花费大部分的时间、精力在这方寸之间,完成着我们的衣食住行。但市面上数以万计的APP ,能最终留在你手机上经常用的就那么几个。他们作为行业里面的独角兽,肯定有他们的“过人”之处,知道用户想要什么,才能留住用户的心。如今的互联网要留一个用户比拓一个新用户还要难。

经验主义者说站在巨人的肩膀上创新,也就是所谓的经验总结。探究学习设计背后的思考,开拓思维,让每一步设计都有理可依,通过设计手段达到产品目标,然后用到自己的设计中去。

我们做一个产品做的最多行动的就是体验竞品,深入了解产品背后的商业模式,用户群体,市场,产品功能,交互设计。有些产品数据我们看不到,所以我们可以从功能、交互、视觉这些纬度去分析。这样做的设计优化方案(市场调研,竞品分析,创新)整理成报告给上级,产品、甲方等,会让我们设计师更有说服力。


一、📱物理准备:搜集整理界面截图


1.1、UI设计师必下APP

去软件商城下载行业内排名前十的app下载产品再体验,截图。行业分类仅做参考:


1.2、优秀界面截图收藏

花瓣(图片采集分类)、学UI网(已经上线产品截图)、美叶(online版eagle)


二、🧠大脑准备:从那些设计思维角度分析


2.1、方法论(总结归纳)

对竞品同一功能、布局的分析


不同产品,同一功能布局分析


2.2、交互设计原则


下面列举一些常用的交互原则如图所视,这边就不展开具体描述了,因为这次主要是讲解如何做好体验的思路。不过可以推荐一篇在站酷平台上有阅读过的《23条黄金体验法则——互联网大厂年度总结》原作者id:草莓设计说。大家根据自己需求可以收藏学习下。等我阅读一些交互的书籍,有一定知识储备的时候再来总结一篇交互原则的文章。


三、✍️怎么写(三步走)


3.1、关键词(信息分类)

  分析维度:

  表现层: 形(图形)、色(色彩)、字(字体)、构(布局)、质(质感)、动(动效)

  产品层:运营策略,活动专题,广告投放等等

  组件原子组合:弹窗,按钮,文字,图片尺寸等等

  微文案设计:提示,占位符,按钮文案,解释性文字等等


3.2、交互体验

描述体验过程中的内心心理活动(焦虑或是喜悦,惊喜等等)

体验感受:从触觉、听觉、视觉记录下来。


3.3、设计思路思考🤔

(结合交互基本原则贮备,请参考文中大脑准备的交互设计原则)


——使用环境:设备(布局,首屏利用率等),客观环境(室内、室外)使用产品时间

饿了么:查看外卖进度的时候,用户内心肯定是焦虑的,地图上结合天气一定程度上缓解用户焦急心理。比如下雨天,路上堵,能降低对骑手的速度期望;晴天阳光好,看着地图上的光效,心理也会舒坦些,一定程度上缓解焦虑。

百度地图:使用百度地图的用户,一般是有出行计划,结合当下的天气因素,可以给用户一个提醒,出门带雨伞。是个不错的用户体验。


——战略层(用户需求+产品目标(商业),产品为什么存在?产品是怎么赚钱的)

目标用户,性格特点,社会属性,消费水平等等。

微信:隐形植入广告,以“朋友”的身份跟你安利一个物品,角色扮演,用另外一种方式介绍产品。

微博:无形中插播一个广告推文,广告的标签跟关闭的按钮做的小,不明显,增减关闭难度。

爱奇艺:提供付费权利,可关闭广告。


 

——范围层(功能说明、内容需要,我们提供的核心能力是什么?)

基础功能、特色功能(差异化)

汽车之家:产品定位不一样,是第三方买车平台。根据大数据会给你推送一些你经常看的车型,牌子等,还有其他用户在观看的热门品牌。

喜马拉雅:考虑音频的类别较多,推荐用户更加精准定位热门音频,而不是大海捞针。

支付宝:顶部的快捷搜索词,也是运营广告位,增加自己产品“饿了么”的露出,点击转化。

 

 

——结构层(交互设计、信息框架、怎么提高用户完成核心任务的效率?)

业务流程,交互跳转等

让我们最深刻的莫过于前几年,最害怕收到好友发过来的”砍一刀“,其本质是介绍新人用户,可以给你多少佣金报酬。

美团外卖:对于不怎么使用本产品,或者从来没用过的产品的人拉新活动。用红包优惠刺激你注册或者重新使用该产品。

携程:包装了一个“拉新”的概念,砍一刀,更接地气,运用你的社交圈来宣传产品,给你一定的佣金报酬。

汽车之家:本质就是你介绍一个新用户,可给你一张优惠券。以激活优惠券的方式,让用户觉得很容易就可以获取这优惠,只要邀请一个好友就可以得到。

 

——框架层(界面布局、信息导航,怎么保证很好的功能规划?)

重要业务流程

场景化思维设计,让用户身临其境感受。

杭州公交:聚焦与单条公交线路线,去除复杂的地图背景,直接用图标标记与你所在站点的位置关系,同时上方卡片会显示即将到找的三个公交车预计时间,给用户准备候车预留足够的时间准备。

淘宝:物流在全国范围内跑,使用轨迹结合地图会更加直观。能看到当前所在的位置,预计还有多少时间送达等等信息用场景来表达。


——表现层(视觉设计,怎么给用户好的视觉感受?)

颜色、布局、板式,图标、图片质量、品牌感等等

QQ:现在的社交软件像雨后春笋般多的时候,腾讯QQ已经从社交软件到连接一切的连接器。个性化也是它的特点,会藏着一些小惊喜给用户,这里设计了收到消息时“表情”情感表达,丰富有趣。

喜马拉雅:把音频产品的主要功能放在了正中心位置,搭配播放动效。

美图秀秀:中间的色块采用品牌的玫红色,并区别于其他导航条做了异形突出,让用户一眼就能知道功能入口。

拼多多:产品的拉新运营活动放在了最中位置,也采用了异性,并直接采用红包的图形,让用户联想到优惠,从而触发点击。

京东&微博:导航上没有做过多个性化的图标,也没有明显植入品牌基因,就京东首页的图标有吉祥物微笑的影子在,少了些产品记忆点。



最后总结


最后的最后提几句:

1、牢记产品是围绕“解决用户问题”这个核心做设计,所以要做好“人的研究”。拿到需求千万别急着盲目找参考,先分析需求的目的,背景并针对性做找参考素材等,然后再着手去做设计。

2、竞品也有缺点,并不全部都是好的,你需要辩证的去看待,合适自己产品的设计才是好的。不然很容易做成四不像,没有自己的差异性。

3、做好设计的捷径(万能公式)=多看(提高审美,眼界)+多想(设计的根本目的)+多动手(实践运用)


9
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
杭州 | UI设计师
Article information
文章标签
收录收藏夹
更多收录此文章的收藏夹