童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

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

5月9日 观潮阁投稿
  好的设计往往需要好的内容作为基础支撑。无论是内容还是设计,想要让两者最大化的搭配,往往是需要进行调整和优化才行。
  当你的内容需要迁移到移动端上的时候,要怎么让内容和用户体验无缝地配合起来呢?设计师要基于小屏幕的交互来思考整个设计和优化的策略,而今天的文章,就为你分享7个设计技巧。
  1、每屏完成一项任务
  虽然手机的屏幕越来越大,但是当你的内容在移动端设备上呈现的时候,依然要保证每屏只执行一个特定的任务,不要堆积太多的、跨流程的内容。
  虽然在移动端设备上,用户已经习惯了执行多任务,看着球赛聊着天,这样的案例不胜枚举。用户的习惯和多样的应用场景使得移动端界面必须保持内容和界面与内容的简单直观,这样用户在繁复的操作中,不至于迷失或者感到混乱。
  那么,怎样保证这种清晰的体验呢?所有的文本、插画、视频、UI元素都集中帮助用户执行特定的任务,搭配在一起让用户作出抉择:你想执行这个操作吗?
  2、精简并优化导航体系
  当用户打开你的网站或者APP的时候,他们通常倾向于执行特定的操作,访问特定的页面,或者你希望他们点击特定的按钮,所有的这些操作能否实现,大多是要基于导航模式的设计。
  虽然在桌面端网页上,一个可用性较强的导航能够承载多个层级、十几个甚至20多个不同的导航条目,但是在移动端上,屏幕限制和时间限制往往让用户来不及也不愿意去浏览那么多类目。
  导航需要精简优化。如果你不确定从什么地方开始,那么你应该针对你的移动端版本进行用户分析。用户访问得最多的前三四个类目是什么?这些页面是否符合主要用户群体的期望?你希望用户更多点击哪些内容?当你搞清楚整个导航的关键元素之后,就可以有针对性地做优化和调整了。
  3、基于搜索引擎的设计模式
  “不要总是玩弄算法,创造用户想看的内容才是正途。”
  无论你的网站的PV是100还是10万,你都得尽量让你的移动端上的内容更易于被搜索到。无论是关键词、图片还是内容都应该能够被优化到易于被搜索引擎抓取到。但是最关键的地方并不在算法,而是要创建用户想要获取的优质内容。
  从桌面端迁移到移动端,内容的形态也需要跟随着平台的变化而进行适当的优化和修改。比如大量的大尺寸的图片需要跟着移动端的需求而进行优化,比如选择尺寸更合理的图片,放弃不匹配移动端需求的JS动效等。
  4、更大的字体
  在小屏幕上显示的内容,应该适当地增加大小,让用户能够更轻松地阅读和消化。通常,在移动端上,每行容纳的英文字符的尺寸在3040个最为合理,而这个数量基本上是桌面端的一半左右。
  在移动端上排版设计要注意的东西还有很多,但是总体上,让字体适当的增大一些,能让整体的阅读体验有所提升。
  5、意义清晰的微文案
  微文案在界面中几乎无处不在,比如按钮中的文本,它们对于整体的体验有着不小的影响。设计优秀的微文案能够让整个界面的个性、设计感有明显提升,它们是信息呈现的重要途径,将设计转化微可供理解的内容。
  在移动端设计上,微文案的显示要足够清晰,并且始终是围绕着帮助用户要做什么,来打磨其中的表述方式。
  在移动端上支付是非常常见的使用场景,而支付时常受到各种问题的影响,比如横跨多屏的表单,这个时候,引导性较强的微文案能够更好的帮助用户一次填写好正确的内容。
  6、移除不必要的特效
  在桌面端网页上,旋转动效和视差滚动常常会让网页看起来非常不错,但是在移动端上,情况则完全不同。内容在迁移到移动端的网页和APP上的时候,效率和可用性始终是第一需求。快速无缝的加载和即点即用的交互是用户的首要需求,剥离花哨和无用的动效,会让用户感觉更好。
  另外,悬停动效也要去掉。移动端上手指触摸是主要的交互手段,悬停动效是毫无意义的存在。作为设计师,你需要围绕着点击和滑动这两种交互来构建移动端体验,因为只有它们才能给用户正确的反馈。
  7、尺寸适配
  在移动端设备上打开一个网页,结果加载的是桌面端的版本,仅仅只是尺寸缩小了,没有什么比这个更令人尴尬的了。移动端的网页和APP应该让用户更易于访问,对于整体尺寸和排版布局的设计,应该更有针对性。
  有的时候,这种内容的适配只需要针对部分内容,重新排布。
  在桌面端横向排布的控件,可以垂直排列在移动端页面上;
  考虑到移动端设备上用户的浏览方式,图片最好被切割为方形,或者和手机屏幕比例相近的形状;
  文本和微文案应该设计的更加简明直观;
  导航可以不用沿用桌面端的导航模式,可以采用侧边栏或者底部导航等更适合移动端的方式;
  行为召唤元素可以做的更大,甚至扩展到整屏;
  所有的按钮或者可点击的元素都按照用户的手持方式,放到手指最易于触发的位置。
  结语
  你准备好重新思考你的网站上内容的正确呈现方式了吗?当你的内容从桌面端迁移到移动端的时候,响应式的设计也许无法真正与之匹配,你需要对内容细节、交互模式进行深入的调整,作出和用户需求真正匹配的设计。
  设计过程中最重要的部分其实是你对于信息和数据的分析,你的用户到底需要什么,他们想要的东西往往能够从数据中洞悉到。
  
  原文作者:CARRIECOUSINS
  原文地址:designshack
投诉 评论 转载

7个设计技巧,让内容和用户体验无缝地配合起来好的设计往往需要好的内容作为基础支撑。无论是内容还是设计,想要让两者最大化的搭配,往往是需要进行调整和优化才行。当你的内容需要迁移到移动端上的时候,要怎么让内容和用户体验……默认头像设计(1)统一与丰富间的平衡头像设计,“统一”与“丰富”间的平衡。头像又叫Avatar,有虚拟化身的意思,最早出现在1979年的一个电脑游戏里,用来代表玩家的身份。前几年流行的阿凡达的英文也是Ava……四步解说,搞定吸引人的移动端详情页设计本文依然是关于详情页设计,涉及到了排版构图色彩氛围点缀字体等多个方面。以下是我总结了可以让你的详情页脱颖而出的四个系列的套路,兴许对你们有用!enjoy一、头图一定要吸引……交互总结篇(二):流程设计上篇文章介绍了交互框架与布局的设计,详情请见《交互总结篇(一):框架与布局》,而本文作为交互设计总结篇的第二篇流程逻辑篇,主要是系统地整理一下交互流程设计所需要思考的方向。……5种设计策略,让你的UI更加安全稳妥安全的设计应该是清晰,简单并且能够引导用户的。我们现在所面临的网络安全问题一直都很严峻。无论是更改社交媒体帐号,注册新论坛,还是下载新的APP,我们都的数字身份一直都存在……选择极简主义风格做设计,不是没有道理极简主义设计并非万能的。但有一件事是肯定的,界面越简约,设计目标和针对性就越明显,而设计师要投入的时间和精力也越多。简约并不意味着原始,这是两个截然不同的概念。而极简主义……4种障碍设计方法,改善产品用户体验“如果你所设计的障碍是有助于整体的互动,而非阻碍,那么它就是有帮助的。”SangeetChoudary对于绝大多数的设计师而言,障碍和冲突给设计带来的影响通常是负面的。这……色彩和体验的平衡:为色盲用户设计网站如何为色盲用户设计网站?本文作者与大家分享了5点小技巧。色盲影响世界7的人口。在浏览网页时,这种情况让色盲用户无法了解不断涌入的视频、图像和图表。什么是色盲?……特殊情况下的APP设计(6):交互走查表本文作者将用交互走查表的形式,对系列文章“特殊情况下的APP设计”进行一个总结。enjoy你如果已经在做设计,肯定会遇到这种情况:在开设计评审会的时候,开发或者QA总能找……儿童键盘输入交互方式探讨:为熊孩子设计的输入法想必针对婴幼儿用户所设计的产品出发点与普通的产品设计出发点一定有所不同,那么在设计幼儿产品时,应该考虑哪些交互细节点呢?文章以一款儿童输入法为例,为我们解读了在儿童产品设计过程……关于加载设计,你要知道的8种策略和4种样式加载的作用在于缓解用户的等待焦虑,同时及时的向用户反馈当前的系统状态,以提升产品的用户体验。什么是加载?为什么需要加载?加载如同反馈,在人机交互中,用户与界面的每一……设计基础:细说“十大可用性原则”“尼尔森十大可用性原则”给交互设计师带来益阳的设计思考,但对于新人来说,这并不好理解。为此,本文作者将结合自身经验以及一些案例,与大家聊聊“尼尔森十大可用性原则”到底是什么意思……
5项启迪性的移动端设计趋势怎么设计移动应用的新手引导更好?如何“挤”出一个交互设计方案动效APP设计的肢体语言启发设计思维移动UI设计新趋势交互设计的几个关键词一路扁平走到底大屏手机时代,如何重塑界面交互有关网页设计的那些事儿圣诞恶搞阳狮CEO:出来混,总是要还哒!不可忽略的产品状态哪些技巧可以帮你跟沉闷枯燥的网页设计说拜拜?斗鱼鱼翅多少钱一个(鱼翅能换钱吗)如果诸葛亮多活十年,第六次北伐结果会怎么样?哪种情况不能用卫生棉条妇科疾病者慎用以滋味为话题作文山药到底有什么作用保罗安妮宝贝经典语录句子iQOONeo5realmeGT大师探索版参数报价对比预防雷电的安全知识有哪些国产好用的孕妇护肤品牌有哪些结合案例分析做高保真原型时如何保持产品思维独立学院与高职院校合并,为何这么难?动了谁的蛋糕

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界