7个设计技巧,让内容和用户体验无缝地配合起来

好的设计往往需要好的内容作为基础支撑。无论是内容还是设计,想要让两者最大化的搭配,往往是需要进行调整和优化才行。“不要总是玩弄算法,创造用户想看的内容才是正途。”


好的设计往往需要好的内容作为基础支撑。无论是内容还是设计,想要让两者最大化的搭配,往往是需要进行调整和优化才行。

7个设计技巧,让内容和用户体验无缝地配合起来

当你的内容需要迁移到移动端上的时候,要怎么让内容和用户体验无缝地配合起来呢?设计师要基于小屏幕的交互来思考整个设计和优化的策略,而今天的文章,就为你分享7个设计技巧。

1、每屏完成一项任务

7个设计技巧,让内容和用户体验无缝地配合起来

虽然手机的屏幕越来越大,但是当你的内容在移动端设备上呈现的时候,依然要保证每屏只执行一个特定的任务,不要堆积太多的、跨流程的内容。

虽然在移动端设备上,用户已经习惯了执行多任务,看着球赛聊着天,这样的案例不胜枚举。用户的习惯和多样的应用场景使得移动端界面必须保持内容和界面与内容的简单直观,这样用户在繁复的操作中,不至于迷失或者感到混乱。

那么,怎样保证这种清晰的体验呢?所有的文本、插画、视频、UI元素都集中帮助用户执行特定的任务,搭配在一起让用户作出抉择:你想执行这个操作吗?

2、精简并优化导航体系

7个设计技巧,让内容和用户体验无缝地配合起来

当用户打开你的网站或者APP的时候,他们通常倾向于执行特定的操作,访问特定的页面,或者你希望他们点击特定的按钮,所有的这些操作能否实现,大多是要基于导航模式的设计。

虽然在桌面端网页上,一个可用性较强的导航能够承载多个层级、十几个甚至20多个不同的导航条目,但是在移动端上,屏幕限制和时间限制往往让用户来不及也不愿意去浏览那么多类目。

导航需要精简优化。如果你不确定从什么地方开始,那么你应该针对你的移动端版本进行用户分析。用户访问得最多的前三四个类目是什么?这些页面是否符合主要用户群体的期望?你希望用户更多点击哪些内容?当你搞清楚整个导航的关键元素之后,就可以有针对性地做优化和调整了。

3、基于搜索引擎的设计模式

7个设计技巧,让内容和用户体验无缝地配合起来

“不要总是玩弄算法,创造用户想看的内容才是正途。”

无论你的网站的PV是100还是10万,你都得尽量让你的移动端上的内容更易于被搜索到。无论是关键词、图片还是内容都应该能够被优化到易于被搜索引擎抓取到。但是最关键的地方并不在算法,而是要创建用户想要获取的优质内容。

从桌面端迁移到移动端,内容的形态也需要跟随着平台的变化而进行适当的优化和修改。比如大量的大尺寸的图片需要跟着移动端的需求而进行优化,比如选择尺寸更合理的图片,放弃不匹配移动端需求的JS动效等。

4、更大的字体

7个设计技巧,让内容和用户体验无缝地配合起来

在小屏幕上显示的内容,应该适当地增加大小,让用户能够更轻松地阅读和消化。通常,在移动端上,每行容纳的英文字符的尺寸在30~40个最为合理,而这个数量基本上是桌面端的一半左右。

在移动端上排版设计要注意的东西还有很多,但是总体上,让字体适当的增大一些,能让整体的阅读体验有所提升。

5、意义清晰的微文案

7个设计技巧,让内容和用户体验无缝地配合起来

微文案在界面中几乎无处不在,比如按钮中的文本,它们对于整体的体验有着不小的影响。设计优秀的微文案能够让整个界面的个性、设计感有明显提升,它们是信息呈现的重要途径,将设计转化微可供理解的内容。

在移动端设计上,微文案的显示要足够清晰,并且始终是围绕着帮助用户要做什么,来打磨其中的表述方式。

在移动端上支付是非常常见的使用场景,而支付时常受到各种问题的影响,比如横跨多屏的表单,这个时候,引导性较强的微文案能够更好的帮助用户一次填写好正确的内容。

6、移除不必要的特效

7个设计技巧,让内容和用户体验无缝地配合起来

在桌面端网页上,旋转动效和视差滚动常常会让网页看起来非常不错,但是在移动端上,情况则完全不同。内容在迁移到移动端的网页和APP上的时候,效率和可用性始终是第一需求。快速无缝的加载和即点即用的交互是用户的首要需求,剥离花哨和无用的动效,会让用户感觉更好。

另外,悬停动效也要去掉。移动端上手指触摸是主要的交互手段,悬停动效是毫无意义的存在。作为设计师,你需要围绕着点击和滑动这两种交互来构建移动端体验,因为只有它们才能给用户正确的反馈。

7、尺寸适配

7个设计技巧,让内容和用户体验无缝地配合起来

在移动端设备上打开一个网页,结果加载的是桌面端的版本,仅仅只是尺寸缩小了,没有什么比这个更令人尴尬的了。移动端的网页和APP应该让用户更易于访问,对于整体尺寸和排版布局的设计,应该更有针对性。

有的时候,这种内容的适配只需要针对部分内容,重新排布。

  • 在桌面端横向排布的控件,可以垂直排列在移动端页面上;
  • 考虑到移动端设备上用户的浏览方式,图片最好被切割为方形,或者和手机屏幕比例相近的形状;
  • 文本和微文案应该设计的更加简明直观;
  • 导航可以不用沿用桌面端的导航模式,可以采用侧边栏或者底部导航等更适合移动端的方式;
  • 行为召唤元素可以做的更大,甚至扩展到整屏;
  • 所有的按钮或者可点击的元素都按照用户的手持方式,放到手指最易于触发的位置。

结语

你准备好重新思考你的网站上内容的正确呈现方式了吗?当你的内容从桌面端迁移到移动端的时候,响应式的设计也许无法真正与之匹配,你需要对内容细节、交互模式进行深入的调整,作出和用户需求真正匹配的设计。

设计过程中最重要的部分其实是你对于信息和数据的分析,你的用户到底需要什么,他们想要的东西往往能够从数据中洞悉到。

 

原文作者:CARRIE COUSINS

原文地址:designshack

译者:@陈子木

译文地址:优设网

本文由 @陈子木 授权发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自 Pixabay,基于 CC0 协议

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/20253/

(0)
CatherineCatherine
上一篇 2017-08-04 06:29
下一篇 2017-08-04 07:19

相关推荐

  • 朋友圈被天猫双11邀请函刷屏了?我们和它的创作者们聊了聊

    从2008年开始,每年临近11月11日,全国——现在可能是全球——的剁手党们都在等着看马云爸爸和天猫又能玩出什么新花样。今年除了史无前例的整整49张品牌海报以及4个版本的“主题大片”之外,天猫的小伙伴们居然连一封小小…

    2016-10-25
  • 交互设计要学什么这个问题终于得到解决了-交互设计师的知识架构

    如果你也是一枚刚入门的交互设计师,是不是常有这样一种感觉:不知从何下手,闷头读了一大堆书、学了一大堆软件、画了一大堆图之后还是感觉心里不踏实,总害怕自己还缺点什么,恨不得要有本《交互设计学习大纲》就…

    2015-01-25
  • 帮你梳理:卡片式UI的设计最佳实践

    卡片式设计依然是目前UI设计的热门,虽然我们在前几天的文章《不是万能!卡片式设计并不能支撑所有的设计需求》当中探讨了卡片式设计为数不多的“局限”。今天我们从基本的规则入手,为你展示卡片式设计的最佳实践。小贴士:Material Design 中常常会让卡片拥有微妙的阴影,这种设计是非常有道理的,阴影和深度会给予用户以视觉感知力,强化它的可见性,以及知觉上的“可点击性”。小贴士:卡片中的正文部分只需要一个Normal 字重的非衬线体就行了。

    2017-05-13
  • 【设计】UI设计、UE设计、交互设计分别是什么?

    这些概念在传统行业和传统工业中其实已经发展的很成熟,近几年随着互联网的发展又重新流行起来。UI即User Interface ,字面意思是用户界面,业界一般指的是界面视觉设计UE即User Experience,字面意思是用户体验,这个范围就很广了,不仅仅包含视觉与交互交互设计又称互动设计 ,是人工制品、环境和系统的行为,以及传达这种行为的外形元素的设计与定义。UE范围最大,他研究的对象是用户使用这个产品过程中所有的感受,比如听觉视觉触...

    2018-05-08
  • 交互设计实例分享

    现在很多优秀的网站、移动应用中都广泛的使用到交互设计。网络上也有很多相关的文章,例如什么是交互设计,交互设计的流程是怎样的?但是设计从来不是空谈,理论和实际的碰撞,才能激发出更多的灵感。以下是我自己…

    2017-08-03
  • 需要产品经理用心做好的交互体验:「开关」

    现在的产品越发变得精细且有人情味,一个小小的弹框,提示都是接触用户,实现人机交互的入口,善用弹窗、提示让用户感知你的贴心和用心,往往是产品被用户喜欢并快速爱上的美好开始。不要忽视产品体验的每一个细节,在尽可能做好的点都用心做,产品也才会有生命和呼吸。

    2017-05-04
  • 干货时间|交互设计线上讲座内容回顾总结

    学艺术的大表姐带你走上艺术留学的不归路Hello~Everybody~上礼拜元宵节的结束宣告着新的一年的真的要开始了!这下我们也再没有借口偷懒了小伙伴们要用新的节奏开始奋斗啦~2018,告别懒惰,发愤图强吧!!最怕的就是:“比你优秀的人还比你努力!”当然为了给大家缓冲的时间大表姐特意送上年前的交互设计分享讲座的干货回顾总结对交互设计感兴趣的同学,可千万不能错过接下来的内容了~并且还能拓宽自己的艺术设计领域想了解更多关于英美交互院校、专业...

    2018-03-09
  • 【总结】我的产品工作心得

    作者:Wiki 由于负责公司UED工作的原因,经常会和公司的产品经理/交互设计师沟通需求,他们每天都会很忙,时刻都在修改网站,优化app,但我从没看出他们忙的价值在哪里?原因是,很多人只是依照某BOSS的指示去做一些意淫…

    交互设计WiKi 2015-06-08
  • 设计风格养成|5个维度,说说设计师讲述设计风格的正确姿势

    找准方向与维度,从大方向去讲解你的设计风格,只要你执行了,那它就不是什么困难的事情了。

    2017-05-06
  • 交互师们,知道如何写一份交互说明文档吗?【精品】

    一. 什么是交互说明文档(DRD)? 所谓DRD即是用来承载交互说明,并交付给前端、测试以及开发工程师参考的文档。 在项目中,交互设计师的主要产出物可能依次是:site map,page flow,wireframes。有的大型项目前期…

    2014-11-25