找回密码
 开放注册

QQ登录

只需一步,快速开始

微信登录

微信扫码,快速开始

搜索
查看: 1270|回复: 5

移动网页设计的几点注意事项

[复制链接]
已绑定手机
已实名认证

1262

主题

2286

回帖

8264

牛毛

认证会员

积分
8464
发表于 2020-11-13 16:34:57 | 显示全部楼层 |阅读模式 来自 北京市

  1.布局
  由于网页本身和外在的因素影响,用手机浏览网页可能会是一件比较耗时的事情。所以记住,让您的移动网站设计得方便使用者。比如,把所有你想让手机用户看到的最重要的信息放到页面顶部;最大限度的避免在界面的左右两侧放置导航,因为为了方便浏览,我们更多需要把页面内容设计成单一的分栏形式。也应该减少表格的使用,如果一定要加入表格,也不应超过2列,同时避免行与列的融合。由于屏幕大小的限制,很多情况下铺天盖地的菜单是不被允许的。菜单可能必须采用垂直的方式,但如果每一个单页都需要用户去向下滚动菜单才能看清所有的内容,这可能又会很不舒服。所以,如果你的网站只有三个或者更少的链接,可以采用一直浮在可视窗口形式的菜单,在这种情况下,它恰巧可以是横向的。比如,在第一页使用导航,在其他页面的顶部使用链接或者面包屑连接到首页。
  2.内容
  因为用户在浏览你的网页时可能正处于行走的状态,所以应该确保网站上的信息很容易阅读和浏览,并且让用户快速的识别并轻松的找到想要的信息。要确定好最终要在移动界面上展示的内容,合理地规划好的菜单和文本,避免由此造成的不合理缩放变化。至于所呈现文本的版式,可以考虑用标题来控制字体大小。
  3.编码
  在实际制作移动网站中对于编码应该没有什么特殊的需求,使用XML或者XHTML编码就很方便。也可以用最基础的HTML和CSS编码。标题标签,描述meta标签,头部标签和文件名应该用目标关键词精心地制作,以使得小优化内容可用性的最大化。
  4.图片
  正常情况下大多数手机载入的图片对它们来说都非常繁重,所以在相关地方使用的图像要尽可能的小。而且图片应该是JPEG,GIF或者是PNG格式的,因为这些格式的图片很轻盈。另外确保你的图片被压缩过,以免图片在页面中变得很大。还有值得一提一点是:用户经常会浏览到没有打开的图片。因此,最好始终使用alt文本,这是一个值得推荐的做法。
  5.页面大小
  为一个移动网站指定风格时,保持所有的东西简洁,尽量追求小页面是非常有必要的。移动页面最大容量是20KB,所以要确保一切尽量满足这一点。如果可能的话,页面的大小可以小于10KB。要知道,用户在移动网络上的数据费用是以KB为单位收取的。

已绑定手机

192

主题

7146

回帖

1401

牛毛

VIP推广永久卡

http://www.gxcpcb.com 硅芯创科技

积分
1422
QQ
发表于 2020-11-19 11:40:27 | 显示全部楼层 来自 广东省深圳市
网页时可能正处于行走的状态,所以应该确保网站上的信息很容易阅读和浏览

0

主题

0

回帖

6

牛毛

初生牛犊

积分
6
发表于 2025-3-4 06:12:04 | 显示全部楼层 来自 山西省阳泉市
  4个菜单项目,你可以考虑将它们堆叠起来;如果你的菜单项有20个,为了提高用户体验,你可以只包括几个基本的链接项。

2.响应性设计(Multi-Screen Responsiveness)
  在移动设备上,我们必须要考虑的因素是响应性。响应性设计可以确保你的网站在不同的屏幕大小上都能正常运行。你可以使用响应式框架或使用CSS媒体查询来实现响应式设计。响应式设计可以让你在设计之初就可以考虑到不同的屏幕尺寸,从而最大限度的提高用户的访问体验。

3.交互元素
  交互元素是吸引用户注意力的一个重要工具。所以在移动设备上使用交互元素时,应该受到更多的关注。比如,你可以考虑添加一些点击手势、滑动手势,以及小部件的可拖拽性等。我们应该避免使用一些复杂的交互元素,比如复杂的表单,因为它们可能会影响到用户的访问体验。

4.搜索优化(Search Optimization)
  在移动设备上,用户主要是通过搜索引擎来访问网站的。所以,为了让你的网站在移动设备上被更多的搜索引擎所发现,你就需要确保你的网站具有良好的搜索引擎优化。具体的策略包括,使用包含关键字的标题和描述,确保网站的网页加载速度快,确保网站的结构清晰,以及避免使用大量的Flash等。

5.呼叫-to-action
  呼叫-to-action(CTA)是吸引用户参与的一个重要的交互元素。在移动设备上,CTA可以

1

主题

-1

回帖

3

牛毛

初生牛犊

积分
3
发表于 2025-3-9 11:33:01 | 显示全部楼层 来自 美国
  4个主要部分,你可以考虑使用让人印象深刻的简化设计,比如短语注释、下拉单或者侧边栏。这些都比长而无用的菜单更加易用。
  2.响应式设计
  响应式设计是个人认为是移动网页设计中最关键的工作,即网页能够自动适应手机的屏幕尺寸,无论这个手机是多小的屏幕。响应式设计需要通过CSS或者服务器端技术,来保证用户无论使用何种设备,看到的页面风格都是相同的,这是响应式页面设计的基础。当然,保持 Harmony 原则(用户只要改一次,页面样式就可以随着 scale 变化而确定,但实际上很少有人这么去做,我一般遵循 Similarity 大于 Harmony )也是响应式设计的重要原则。
在实现调整大小的目标时,所有的内容、组件、布局、导航、图像、视频等应该都要按照粒度的概念来设计,然后复杂的交互和动态的工具条应该出现在较大的屏幕上。
为了保证响应式设计的质量,不仅仅是追求最佳化页面级别的响应速度,还需要在开发环节对网页元素进行尺寸调整、规范布局、移动设备优先的样式设计等,这样可以为移动设备提供更好的用户体验。

0

主题

0

回帖

12

牛毛

初生牛犊

积分
12
发表于 2025-3-12 11:33:00 | 显示全部楼层 来自 广东省深圳市
        六个菜单,最好用一下二级gin像这样:

第一列:第一个菜单项
第二列:第二个菜单项
第三列:第三个菜单项

此外,请尽可能使用简洁的图标导航代替文字导航,图标看起来更加直观,特别是对于不熟悉网站的访问者来说。此外,也应该避免使用过于花哨的动画效果,因为这些都可能会增加网页的加载时间。

2.响应式设计
  响应式设计是针对不同设备屏幕大小进行优化的设计。移动网页设计需要更加重视这一点。应该避免在手机屏幕上出现响应式设计中会导致页面变形或者出现滚动条的情况。

0

主题

0

回帖

14

牛毛

初生牛犊

积分
14
发表于 2025-3-15 05:53:00 | 显示全部楼层 来自 广东省深圳市
  4个页面,那么除非这三个或四个页面都是突发事件相关的(例如医院),否则您可以考虑所有的按钮和链接都在页面的顶部或底部。尽可能让页面处于中央,不要矩形地带,因为这样会很有利于阅读。通常,我们要尽可能快要让内容展示在用户面前,那么屏幕下半部分的区域则尽量不要被任何东西占据。 <br><br>2.响应式设计<br>  响应式设计是让您网站在不同尺寸的屏幕上都能正常运行的关键。响应式设计是指,无论是有大量的网页元素、广告的大小还是开始菜单的位置,在对用户来说都是友好的,响应式设计能够确保高品质的视觉体验。所以务必在设计时确保所有元素能够正常的显示,在这一过程中,可能需要一些试验和调整。同时,移动设备肯定会有不同的显示方式和分辨率,这些也需要考虑到响应式设计中。需要确保所有你需要的文字和配图,都有足够的大小被移动设备显示出来,而且字体不会失真变大。<br><br>3.照顾用户体验<br>  在移动设备上,设计应该始终以用户体验为中心。所以,为了达到这个目的,需要设计简单和直观的导航,减少不必要的操作,避免用大字体和过多的图像,并且将所有重要内容都放置在用户的视野中。在这些限制下,尽量保持页面内容的直观感觉。记住,简单的设计通常是最有用的,这是由于页面只有极小的屏幕空间,用户很难在极短的时间内完成更多的操作。所以,设计应该尽可能轻松。<br><br>4.优化加载速度<br>  移动设备的重量非常有限,所以它们的带宽也有限。所以确保你的网页加载速度尽可能快是非常重要的。加载速度的战争才是设计中的重要竞赛,这比花哨的外观更能别人的注意力。没有快速加载的速度,用户不论打开页面还是下载其中的资源都会变得异常缓慢,这样的体验既生硬又缓慢。对于读者来说,这些都应该是最关注的。所以,在设计时,务必尽可能快地进行页面加载。
您需要登录后才可以回帖 登录 | 开放注册

本版积分规则

帮助|Archiver|小黑屋|通信管理局专项备案号:[2008]238号|NB5社区 ( 皖ICP备08004151号;皖公网安备34010402700514号 )

GMT+8, 2025-4-28 05:29 , Processed in 0.474120 second(s), 60 queries .

Powered by Discuz! X3.5

快速回复 返回顶部 返回列表