商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 万博体育娱乐 > 网站设计 >

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

发表日期:2017-06-30 17:29万博娱乐体育浏览次数: 本文关键词:网页设计,跟着建议走!这

 

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

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

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

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

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

  

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、让用户在一个浏览器窗口中完成操作

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

  结语

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

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.bluecatslive.com/news/wzsj/5108.html

网站设计案例推荐

热门文章

揭秘2017年最新的网站快速排名设...

网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

日期:2017-06-30 浏览次数:5371

终于等到你!2017年2月设计圈实...

随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...

日期:2018-04-01 浏览次数:642

现代404页面设计趋势分析与案例...

每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...

日期:2018-02-27 浏览次数:633

商丘建站公司:内行讲堂!让设...

你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...

日期:2018-04-15 浏览次数:623

商丘网站维护:如何写出一个完...

本文对如何写出一个完美的错误信息,进行了3个重要组成部分的分析。 每个系统都会有无法正常工作的时候。可能是用户的错误或系统的失败。在这两种情况下,以正确的方式处理错...

日期:2018-05-27 浏览次数:618

相关文章

响应式网页设计指南...

响应式网页是一种对于设计的全新思维模式,响应是双方的,是互动的过程,在这个过程中设计师要考虑设备的性能、Dom节点数量、屏幕的大小等。 1、如何理解响应式设计(RWD) 响应...

日期:2018-01-05 浏览次数:64

刚刚过去的6月,网页设计师们特...

如果要深究近期网页设计趋势的变化,这些变化更多是关于用户模式,色彩和排版设计的。但是不论是其中哪种,都牵涉到一些微妙的设计技巧和复杂的影响因素,将它们纳入6月的设计...

日期:2018-01-05 浏览次数:63

产品必修课:网页设计的目的有...

在设计网页之前,最重要的是搞清楚这次设计的目的是什么。网页的设计,绝不只是为了好看。如果只是为了好看,可以直接上高清大图。网页的设计,也绝不只是一味的模仿,别人的...

日期:2018-01-05 浏览次数:69

想让你的网页设计脱颖而出,可...

几乎每个参与网站建设的人,都希望自己的网站能够在激烈的竞争中脱颖而出。设计师希望它效果拔群,成为自己作品集中令自己骄傲的存在;客户希望它广受欢迎,在用户和潜在用户...

日期:2018-01-05 浏览次数:68

布局太死板?6个小技巧让你的网...

Landy:大家都知道做网页设计有栅格,有纵向栅格也有横向栅格,栅格提供内容布局的规范,让信息组织更有条理,我们在栅格规范内做设计,上下左右、垂直居中对齐,横平竖直、方...

日期:2018-01-05 浏览次数:61

随机推荐

网站设计之卡式布局运用策略...

说走就走!勾引你出门旅游的网...

让用户“看见” 是一种心机行为...

网站建设首页设计图文混排的技...

超全面干货!弹窗设计的5条基本...

弹框体系总结...