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

相关推荐

  • 从中国形式走向中国叙事:RSAA / 庄子玉工作室的2017

    *本文转载自RSAA鼓楼7号院刚刚过去的2017,对我们这个钟鼓楼旁的四合院是很特别的一年。虽然在RSAA北京公司成立后的八年间,我们一直埋头苦干,作品也算颇丰,但好像对大多数人而言,我们一直是一个相对默默无闻的团队,甚至很少有人知道RSAA是个正儿八经的德国独资公司;而在2017,RSAA和庄子玉工作室却因为几个极具当代中国调性的项目而广为人知;但只有我们自己知道,这也许不是偶然 - 以“在当下中国的社会和空间语境中寻找新的叙事性与类...

    2018-02-24
  • 高保真VS线框图,哪一种交互稿更能清晰准确地描述产品

    很多产品经常会纠结怎么把原型画得好看,哪个原型工具要彻底学会并熟练使用等等。但是团队的其他成员并不会关心你的原型画得多好看,也不关心用什么工具画,如果你能准备清晰表达出产品框架内容,也许在纸上画他们…

    2016-01-15
  • 从设计指南说起,详解Material Design体系组件

    iOS 或 Material Design的设计指南,都是按照组件的属性来系统介绍。
    一般把Control翻译成控件,把Component翻译成组件。通俗的解释说法就是组件为多个元素组合而成,控件为单一元素。但是Material Design把我所认为的控件和组件都合为一体,统称为组件。摊手。

    2017-04-28
  • 面对大项目,交互设计应该如何进行?

    去倾听用户真正的心声,才能设计出一款既能解决用户所担心的问题,又能让他印象深刻的产品。

    2017-05-08
  • 独家UED手机端 保险投注

    活动时间:2018年3月1日中午12:00至2018年3月31日上午11:59 (北京时间)针对于优惠期间内第一次使用头头移动平台的会员50%本金返还,高达RMB 88手机保险投注!活动详情:1.头头移动平台包括手机网页版版平(m.toutou158.com),UED手机端安卓版和iOS版;2.没有下载头头手机端安卓版和iOS版的会员可以进入官网www.toutou158.com下载;3.头头会员需在优惠期间通过头头手移动平台投注第一笔...

    2018-03-29
  • Axure工具简介

    工具简介主要介绍axure的基本元件使用,熟悉该软件的各个功能区。1.添加元件到画布在打开axure软件之后,添加元件到画布,在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置后松开鼠标,如下图所示:2. 添加元件名称在检视面板的元件名称文本框输入元件的自定义名称,这样方便后面制作原型的过程中,设置元件属性等时便于查找元件,如下图所示:3.设置元件位置/尺寸元件的尺寸与位置可以通过鼠标拖拽,也可以在快捷功能或元件样式中...

    2018-03-18
  • UED专访 | 李冀:建筑设计的唯一性与多样性

    📌 编辑 | XK P.S建筑行业之所以能百花竞放是因为有人独树一帜,自成一派有人匠心筑梦,执著务实在各展所长的事务所里李冀的原地工作室像潜生的植物一样有着自己的节奏与坚守静默地成长着……©UED我们常说懂一个作品应是知其然并知其所以然。本次我们专访内容围绕李冀及其原地建筑事务所作品展开,以长白山河谷别墅群等作品为切入点,尽可能多地去探究建筑建造过程的一些原由故事,倾听设计师还原当时的设计思路,了解作品从无到有精细入微的生长。也许你会因...

    2018-02-08
  • 从一个弹窗的关闭按钮引发的讨论和思考

    作者:李逍遥(UXRen翻译组管理员,UI设计师)   弹窗的右上角有个关闭按钮,功能好像跟下面的取消确定差不多,都是操作完成后弹窗关闭。咋的一看好像很多余,是不是多余呢,因为设计规范的时候碰巧遇到这个问题。…

    交互专题 2023-03-03
  • 设计流程、交互设计进阶、空状态设计

    设计作品源于设计师的自我发现、情感和创造,在日常工作中我们加入字体、颜色、空间准则来让在我们感性的表达设计美学基础上更理性的表达设计思维;以上这些是众所周知的基本法则,是设计具备的基本能力;科学的、合理的、为用户设计才是设计师价值的体现。那么如何让我们的设计更理性?在长期跟一条产品线的工作过程中,我们会发现每天做着很多事情,不知道会不会有以下感觉:1.感觉离用户很远;2.感觉对用户数据的增长好像没有什么明显帮助。那么用户增长和设计有什么...

    2018-03-15
  • 阅读类产品中的交互设计逻辑分析

    ↑  点击上方蓝字,加个关注吧~ ↑话题:阅读类产品的交互设计该怎么做?本文共1285字25图,预计阅读时间: 4分钟阅读体验阅读类的产品交互核心所有阅读类产品围绕的产品核心是:阅读体验好的阅读体验会让用户感到熟悉性,由于用户习惯长久的累积,对于阅读产品的使用逻辑,在用户脑海中已经有了一个基础的操作定位。在阅读体验中,不同习惯的交互动作设计所带来体验也不同,通过分析阅读产品中的交互方式,来解剖其交互中设计逻辑。阅读方式我们参考了三款阅读...

    2018-02-27