内容迁移到移动端时,用户体验优化的7个关键点 - 优设网 - UISDC

内容迁移到移动端时,用户体验优化的7个关键点

2017/07/31 8217评论区

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

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

1、每屏完成一项任务

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

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

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

2、精简并优化导航体系

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

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

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

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

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

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

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

4、更大的字体

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

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

这些实用的字体排版技巧值得看看:《对比这10个注意事项,你的网页文字排版达标了么?》

5、意义清晰的微文案

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

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

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

微文案设计指南:《无声处听惊雷!如何用微文案改善网站的用户体验?》

6、移除不必要的特效

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

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

7、尺寸适配

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

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

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

结语

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

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

【用户体验设计有哪些技巧】

  1. 《科普好文!作为UX设计师你需要知道的52个专业术语》
  2. 《想让设计更走心?你得学会用共情来驱动设计》
  3. 《跨屏幕的响应式设计,你需要这样来设计用户体验》
  4. 《想转型成为用户体验设计师,只会画图远不够》

原文地址:designshack
原文作者:CARRIE COUSINS
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/adapt-content-for-mobile-ux

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 设计师干货 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里