首页网站策划准备移动端网站设计12点建议

移动端网站设计12点建议

云南才力信息技术有限公司2024-9-21 22:09 发布于昆明

在线咨询 联系

移动端【duān】的用户往往拥有着【zhe】更加明【míng】确【què】的目的性,通常他们希【xī】望能够明确、轻松【sōng】地【dì】从移动端【duān】页面获得他们【men】想【xiǎng】要的信【xìn】息和内【nèi】容。无论是浏览新【xīn】闻【wén】,网上购物,还【hái】是订阅信息,移动端网页应当为他们提供尽可能无缝的用户体验【yàn】。

很好移动端网站设计12点建议

如果你希望自己的网【wǎng】站【zhàn】能【néng】够轻松的在移动端设备上访问【wèn】,那【nà】么应【yīng】当消除所有移动端上【shàng】可能存在的【de】可【kě】用【yòng】性的问题,下面有12条提【tí】升【shēng】移动端【duān】网页设计的建议,确保你的页面能够通过可用【yòng】性测【cè】试,并提供良好【hǎo】的用户体【tǐ】验。

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

桌面端网页在【zài】移【yí】动端设【shè】备上【shàng】首要的障【zhàng】碍就是导【dǎo】航的【de】使用。看看下【xià】面Domino批【pī】萨的案例,它的桌面端和移动端【duān】网页的对比就【jiù】相当明显,移【yí】动端页面经过优化【huà】之【zhī】后的体验就完全不同。简单说来,优化后【hòu】的移动端页面更加干【gàn】净,有着更【gèng】容易导航的CTA按钮。

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

·仅使用垂直滚动。不要【yào】使【shǐ】用水平滚【gǔn】动,让用户只【zhī】需单方向【xiàng】滚动就【jiù】能浏览主要的内容。尽量通过CSS来控【kòng】制页【yè】面宽度【dù】、位置和图片的缩【suō】放。

·将你的内容置于首位,避免其他的元素让用户分心。

·控制分栏的数目,尽量使用一栏单列式的布局。

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

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

用户经常会忽略移【yí】动端【duān】页面上的一些元素,所以尽量使用CTA按钮【niǔ】,确【què】保用户不【bú】会错【cuò】过它【tā】们。和桌面端的情况不同,你需【xū】要将CTA按钮置于主要、显【xiǎn】眼的位置,确保他【tā】们容【róng】易发现【xiàn】,容易点【diǎn】击触【chù】发。

CTA按钮应该易于点【diǎn】击,并且不会同页面【miàn】中其他【tā】的元【yuán】素【sù】形成【chéng】干扰或者干涉。

3、让菜单简短且易用

详细【xì】而全面的菜单设计在桌面端上能够良【liáng】好【hǎo】运行,但是当它出【chū】现在【zài】移动端上【shàng】的时候【hòu】,菜单就显得过长了,要【yào】在其【qí】中找到想【xiǎng】要的内容就相当难了。所以,你需要考虑使用【yòng】精简的菜单【dān】,仅保留比较【jiào】重【chóng】要的、必须的条目【mù】。根【gēn】据【jù】以【yǐ】往的经验【yàn】,尽【jìn】量不要让菜单超过7个条目。

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

·它应当基于根据重要性和价值来进行排序

·它不应当【dāng】包含用户不理解的术【shù】语【yǔ】,菜单要使【shǐ】用通俗【sú】易懂的表述方式【shì】。

4、让搜索框显眼

如果在你【nǐ】的网【wǎng】站【zhàn】中,搜索是主要的【de】功能,那么你在【zài】做移动端页面优化【huà】的时候【hòu】应该突【tū】出这一功能,因为它【tā】是高转化率的功能,确保【bǎo】它【tā】足够显【xiǎn】眼【yǎn】是【shì】很有必要的。当用【yòng】户想【xiǎng】要获取特定【dìng】功能【néng】的时候,倾【qīng】向于使【shǐ】用搜索功能来实现,所以,搜索【suǒ】应当是用户【hù】一【yī】打开页【yè】面就能看到的控件。通常应当让搜索框置于页【yè】面顶【dǐng】部,以文本【běn】输入框的形式存在。

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

桌【zhuō】面端【duān】网页【yè】出现在移【yí】动端设备上,比【bǐ】较令人沮丧的地方【fāng】就是它需要缩【suō】放。不放大页面,不仅难于阅读,而且用户容易错过重【chóng】要【yào】的细节【jiē】,而【ér】放【fàng】大来浏【liú】览,需要【yào】来回拖放【fàng】。而【ér】针对移动端【duān】优化后的页面则不【bú】存在【zài】这个问题。图片、字【zì】体和页面宽度都正好合适,用户能够完整地获【huò】取信【xìn】息,确保了比较基本【běn】的可用性和易【yì】用性【xìng】。

6、使用高素质的素材

你【nǐ】的网【wǎng】站中所有【yǒu】的图片、视频和UI元素都是【shì】你的产【chǎn】品的一【yī】部【bù】分,当你针对移【yí】动端优化页面的【de】时候,它们都是【shì】重【chóng】要【yào】的组成部分,它们素质的优劣直接影响【xiǎng】到用户的观感。

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

如【rú】果你的页【yè】面是【shì】针对移动端设计的,那么网页中按钮的尺寸应当和手【shǒu】指的大【dà】小相匹【pǐ】配【pèi】。MIT的【de】TouchLab通过研究发现,指面的触摸尺寸平均大小【xiǎo】为10-14mm,而指尖的平均尺寸是8-10mm,也就是说10mmx10mm的【de】控件尺寸【cùn】设【shè】计是比【bǐ】较【jiào】合理的大小。

另外一个需【xū】要考虑的是就是可触摸控【kòng】件指尖的距【jù】离。如果两个按【àn】钮比较靠近,那么用户在移动端上就很容易出现误触的情况了。如果想【xiǎng】要解决【jué】这个问【wèn】题【tí】,就【jiù】需要【yào】根据实际情况重新调整【zhěng】尺寸【cùn】和【hé】按钮【niǔ】之【zhī】间的【de】距离,以适应用户【hù】手指交互的需求【qiú】。下【xià】面是推【tuī】荐的尺【chǐ】寸设定。

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

让用【yòng】户在对你【nǐ】的【de】网站毫无了解的【de】情况下就要【yào】求他【tā】们去注册【cè】,其实是【shì】违反互惠互利原【yuán】则【zé】的。曾有数据表明,让用户过早注册导致超过85%的用户选择了放【fàng】弃和离开。

NetFlix曾经给予用【yòng】户一个【gè】月的【de】免费试用,不【bú】过用户需要注册之后【hòu】才能使【shǐ】用这【zhè】一福利。

一般说【shuō】来,用户【hù】在提供个人【rén】信【xìn】息注册之前【qián】,会浏【liú】览一【yī】下网站内【nèi】容【róng】,了解这个网站是【shì】什么样的类型、提供什么样的【de】服务【wù】,再做决【jué】策,对【duì】于从未听过的尤其【qí】是【shì】如此。想要打破转化率的壁垒,你在设计【jì】网站的时候应该做到下面几点:

·提供无需登录就能完成的体验流程

·让用户可以作为访客进行购买

·只有当需要用【yòng】户提供相关信【xìn】息的时【shí】候【hòu】才要求注册【cè】,并且尽可能少的让用户【hù】提供数据

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

不同的屏【píng】幕方向【xiàng】下,用【yòng】户的浏览体【tǐ】验会完全不同的。用户惯于在同一屏【píng】幕方【fāng】向【xiàng】下完成全部的操【cāo】作,所以提醒他们【men】切换【huàn】方向可以提升网站【zhàn】浏览【lǎn】的用【yòng】户体验。所【suǒ】以,当你的网站偏向展示性,并【bìng】且使用横屏时浏览体验更佳的话【huà】,不妨使用行为召【zhào】唤设计【jì】来提【tí】示【shì】用户。

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

当【dāng】用【yòng】户在【zài】网【wǎng】上购物【wù】的时候,总希望能看到产品的高清无码大【dà】图(尤其是服装),如果【guǒ】无法放大【dà】查【chá】看,用户的沮【jǔ】丧会直接【jiē】影响产品销量。所以【yǐ】,应当提供高素质的产品图,并添【tiān】加放大的功能,让用户足以看清【qīng】细节【jiē】。

11、方便设备之间的切换

并非【fēi】所有的用【yòng】户【hù】都习惯于在移【yí】动端上浏览【lǎn】、购买,有些用【yòng】户仅仅是【shì】习【xí】惯于在移动端【duān】上搜索【suǒ】信【xìn】息【xī】。所以,你应该提供一个简单的方法来保存信息,让它们能够跨设备使用,当用户离开移动【dòng】端设备的时候,同样可以在桌【zhuō】面端【duān】上浏【liú】览、查看【kàn】、购【gòu】买。

·确保用户能够通【tōng】过分享或者【zhě】发送电子邮【yóu】件/社交【jiāo】媒体,来保存【cún】信息。

·同步Wishlist,以收藏的形式保存条目。

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

智【zhì】能手机的窗【chuāng】口【kǒu】间切换终归比桌【zhuō】面端麻烦,用【yòng】户【hù】找不到原来的页【yè】面的风险是现实【shí】存【cún】在的。尽量让用户在一个窗口中完成全部的浏【liú】览和操作,简化流程【chéng】和复杂的【de】交互,让用户一直待在一个【gè】地方。