跟着建议走!这样的移动端网站设计才对头 - 优设-UISDC

跟着建议走!这样的移动端网站设计才对头

2016/08/12 17595评论区

principles-of-mobile-site-design-1

编者按:虽然移动端优先的口号喊了这么多年,我们仍能看到许多“不称职”的移动端页面。看似理所当然的网页背后还有着许多弯弯绕呢!今天的文章简单梳理了一下移动端网页设计常见的问题和技巧,说不定正是你想要的呢~

移动端的用户往往拥有着更加明确的目的性,通常他们希望能够明确、轻松地从移动端页面获得他们想要的信息和内容。无论是浏览新闻,网上购物,还是订阅信息,移动端网页应当为他们提供尽可能无缝的用户体验。

今天的文章,我们就从用户需求和体验的角度来探讨一下,移动端网页要怎么样设计才对头。

优秀的移动端页面是怎样的

最近谷歌的研究发现,那些针对移动端优化过的网站更容易赢得回头客。这意味着网站针对移动端优化之后有着现实可见的好处。那么我们常说的“对移动端友好”到底是怎么样的概念呢?实际上,这个概念包含了一系列关键的特性,当你在进行移动端网页设计的时候应当将它们纳入考虑的范畴:

1-5Az3JUyNfwBxdFhutR1kqA

如果你希望自己的网站能够轻松的在移动端设备上访问,那么应当消除所有移动端上可能存在的可用性的问题,下面有12条提升移动端网页设计的建议,确保你的页面能够通过 可用性测试,并提供良好的用户体验。

1、针对移动端进行全面优化

桌面端网页在移动端设备上首要的障碍就是导航的使用。看看下面Domino批萨的案例,它的桌面端和移动端网页的对比就相当明显,移动端页面经过优化之后的体验就完全不同。简单说来,优化后的移动端页面更加干净,有着更容易导航的CTA按钮

1-U-9zEF71-4LgeDmote64hw

下面是优化移动端页面的几个实用技巧:

·仅使用垂直滚动。不要使用水平滚动,让用户只需单方向滚动就能浏览主要的内容。尽量通过CSS来控制页面宽度、位置和图片的缩放。
·将你的内容置于首位,避免其他的元素让用户分心。
·控制分栏的数目,尽量使用一栏单列式的布局。

1-Or74cH6asRGKTBqR9RseDw

·不要将移动端页面和桌面端页面混用。

2、让行为召唤按钮在移动端上友好易用

用户经常会忽略移动端页面上的一些元素,所以尽量使用CTA按钮,确保用户不会错过它们。和桌面端的情况不同,你需要将CTA按钮置于主要、显眼的位置,确保他们容易发现,容易点击触发。

1-c2B_91oMsej_BFuZ2TcDQQ

CTA按钮应该易于点击,并且不会同页面中其他的元素形成干扰或者干涉。

3、让菜单简短且易用

详细而全面的菜单设计在桌面端上能够良好运行,但是当它出现在移动端上的时候,菜单就显得过长了,要在其中找到想要的内容就相当难了。所以,你需要考虑使用精简的菜单,仅保留最重要的、必须的条目。根据以往的经验,尽量不要让菜单超过7个条目。

1-enW4mC8pqtghzq-483V4lg

同时你还要保持你的菜单目录足够的易用:

·它应当基于根据重要性和价值来进行排序
·它不应当包含用户不理解的术语,菜单要使用通俗易懂的表述方式。

4、让搜索框显眼

如果在你的网站中,搜索是主要的功能,那么你在做移动端页面优化的时候应该突出这一功能,因为它是高转化率的功能,确保它足够显眼是很有必要的。当用户想要获取特定功能的时候,倾向于使用搜索功能来实现,所以,搜索应当是用户一打开页面就能看到的控件。通常应当让搜索框置于页面顶部,以文本输入框的形式存在。

1-6CQQMkAsJ-2VJrwScoIogA

5、让网站正好合适,无需缩放

桌面端网页出现在移动端设备上,最令人沮丧的地方就是它需要缩放。不放大页面,不仅难于阅读,而且用户容易错过重要的细节,而放大来浏览,需要来回拖放。而针对移动端优化后的页面则不存在这个问题。图片、字体和页面宽度都正好合适,用户能够完整地获取信息,确保了最基本的可用性和易用性。

1-cCa8cTAyJnW33Y_v6nocPw

6、使用高素质的素材

你的网站中所有的图片、视频和UI元素都是你的产品的一部分,当你针对移动端优化页面的时候,它们都是重要的组成部分,它们素质的优劣直接影响到用户的观感。

1-OoDT7NO7TLFEnRAImBZJOA

7、设计便于触摸交互的页面

1-nHhrCwZM31X13eC-2OD3ZQ

如果你的页面是针对移动端设计的,那么网页中按钮的尺寸应当和手指的大小相匹配。MIT的Touch Lab 通过研究发现,指面的触摸尺寸平均大小为 10-14mm,而指尖的平均尺寸是8-10mm,也就是说10mmx10mm的控件尺寸设计是比较合理的大小。

另外一个需要考虑的是就是可触摸控件指尖的距离。如果两个按钮比较靠近,那么用户在移动端上就很容易出现误触的情况了。如果想要解决这个问题,就需要根据实际情况重新调整尺寸和按钮之间的距离,以适应用户手指交互的需求。下面是推荐的尺寸设定。

1-YySWfl8CErYfLxZwkkArBg

8、让用户在决定之前先行探索

让用户在对你的网站毫无了解的情况下就要求他们去注册,其实是违反互惠互利原则的。曾有数据表明,让用户过早注册导致超过85%的用户选择了放弃和离开。

1-fg3axBtyqbSrMlwvkQ5DnQ

NetFlix 曾经给予用户一个月的免费试用,不过用户需要注册之后才能使用这一福利。

一般说来,用户在提供个人信息注册之前,会浏览一下网站内容,了解这个网站是什么样的类型、提供什么样的服务,再做决策,对于从未听过的品牌尤其是如此。想要打破转化率的壁垒,你在设计网站的时候应该做到下面几点:

·提供无需登录就能完成的体验流程
·让用户可以作为访客进行购买
·只有当需要用户提供相关信息的时候才要求注册,并且尽可能少的让用户提供数据

9、告知用户选择更合理的屏幕方向

不同的屏幕方向下,用户的浏览体验会完全不同的。用户惯于在同一屏幕方向下完成全部的操作,所以提醒他们切换方向可以提升网站浏览的用户体验。所以,当你的网站偏向展示性,并且使用横屏时浏览体验更佳的话,不妨使用行为召唤设计来提示用户。

1-PwIAs4E0eLOZGoTsDJH79A

10、让产品图片可以放大扩展

当用户在网上购物的时候,总希望能看到产品的高清无码大图(尤其是服装),如果无法放大查看,用户的沮丧会直接影响产品销量。所以,应当提供高素质的产品图,并添加放大的功能,让用户足以看清细节。

1-DC5IqtvjJKYDJ1Wsj7Fgkg

11、方便设备之间的切换

并非所有的用户都习惯于在移动端上浏览、购买,有些用户仅仅是习惯于在移动端上搜索信息。所以,你应该提供一个简单的方法来保存信息,让它们能够跨设备使用,当用户离开移动端设备的时候,同样可以在桌面端上浏览、查看、购买。

1-_k-w6x-1Y87jDN0S-Na1OA

·确保用户能够通过分享或者发送电子邮件/社交媒体,来保存信息。
·同步Wishlist,以收藏的形式保存条目。

12、让用户在一个浏览器窗口中完成操作

智能手机的窗口间切换终归比桌面端麻烦,用户找不到原来的页面的风险是现实存在的。尽量让用户在一个窗口中完成全部的浏览和操作,简化流程和复杂的交互,让用户一直待在一个地方。

结语

其实移动端的网页设计并不只是这么简单,这十二个技巧也相当的基础,但是它们提供了一个不错的入门指引。每一个网站都有其独特的地方,具体问题具体对待。但是无论如何,要记住,你的受众不是设计师,而是用户,你的设计应当承载用户的期待,实现它们的目标,而非成为负担。

【Nick Babich 的用户体验设计经验之谈】

  1. 输入框设计:《讲真,你真的懂得文本输入框设计的那些潜规则么?》
  2. 表单设计:《抠细节!设计高效好用表单的10个技巧》
  3. 极简APP UI:《超赞!帮你打造极简风APP UI 的实用设计技巧》
  4. 前端开发:《有法可依!帮你衡量一个动效是否合格的六个核心因素》

原文地址:uxplanet
原文作者:Nick Babich
优设译文:@陈子木

yestone-uisdc-2

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

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

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

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