品牌数字化战略服务
品牌策划&网站设计
数字化管理与营销
唯引服务案例
MENU
首页 信息资讯 正文
在设计多用途网站时,应考虑的10件事
2022-09-23 作者:唯引互动 来源:唯引互动网站建设

在网页设计中,建立一个优秀的响应或自适应网站的技巧是关心你网站的每个元素,并考虑网站变化可能会如何影响它们。在规划适合移动设备的设计时,试着包括或改进这些关键部件:


网站设计


1.标题内容


乍一看,标题可以告诉访问者很多关于网站的信息:


品牌是什么


它提供哪些


采取什么行动?


如何搜索所有内容?


桌面布局有足够的空间在其网站标题上显示所有这些信息。移动终端更少——你的响应或自适应设计应该考虑到这一点。


问问自己在你的移动网站导航中应该看到哪些元素。例如,一个标志应该在那里培养强大和一致的品牌标志。其他常见的项目包括页面导航,或者如果你正在建立一个电子商务网站,包括购物车图标。


2.文本易读性


网站文本可能是一个无法解决的元素:你希望它看起来不错,反映你的品牌风格,但你必须确保你的设计选择不会影响可读性。


在设计不同的设备时,您还必须考虑尺寸和风格可能不会随着屏幕尺寸的上下移动而缩小。不用说,在启动网站之前测试这一点很重要。


3.汉堡菜单


导航在每个网站中都起着至关重要的作用,因此考虑客户如何根据他们的设备进行不同的互动至关重要。对于新手,请考虑使用汉堡菜单。


汉堡菜单是指通常位于网站右上角或左上角的三行标志。在这一点上,大多数人都知道这些层次的水平线是做什么的,它们是访问移动网页设计的可靠选择。


4.导航置放


移动应用程序的日益普及影响了网站所有者构建移动导航的形式。每个人都看到设计超出了我们过去介绍的汉堡菜单。


对于一组较小的顶级导航链接(不超过三个或四个),一些品牌会考虑将其添加到屏幕底部或网站标题中作为粘性菜单。另一种流行的导航方法是利用灯箱建立全屏弹出菜单。


5.粘性标题


在自适应网站设计中,您可以使您的移动页面相对较短。然而,在响应设计中,所有桌面内容都会流入移动网页,除非有其他修改。


如果你尽了最大努力,您的移动网页仍在运行很长时间,请考虑将页眉设置为粘性。这样,客户就可以随时浏览您的导航。


6.视觉层次


网站的视觉水平是指访问者的眼睛在页面上遵循的路径。混乱的网站布局使访问者很难知道下一步该去哪里,尤其是在移动网站上。


可将标题和子标题、图像块、空缺、导航工具等添加到网页上,方便:


分解大量内容和复杂主题


构建页面上的信息


确保你有一个平衡和更好的设计


创建不同部分之间的关系


当您制作每个版本的视觉细节时,您可以在自适应设计中考虑这一点。在响应设计中,您必须小心元素可以调整大小或重新设置风格,因为随着屏幕的缩小。


最好的办法是为台式机、平板电脑和移动终端设置全局风格,以确保响应重组过程不会影响您内容的完整性。


7.页长


你网站内容的最后一个问题是它的长度。手头的导航可能会让长页面更容易翻转到移动设备上—但在手机上更低的翻转也有帮助。


根据自适应设计,您可以删除移动布局上的文本或图像部分。这样,您就可以在桌面上阅读更多内容,并保持移动版本的可读性。


8.意境


网站图像是设计、品牌营销、讲故事和销售的非常有用的工具。在响应和自适应设计中,请注意这些图像对页面性能的影响。虽然图像重量通常不是自适应网站的问题,但仅仅使用你需要的图像仍然是一个好主意,这样他们就不会减缓你的页面速度。


9.置入内容


应用嵌入式社交网络小组件、视频或横幅广告等外部内容并不少见。在自适应设计中,您可以将这些外部元素放置在容器的边界内。在响应设计中,您应确保在容器范围内设置代码。


10.互动


互动设计元素应为:


易于识别为交互式

可以在页面上找到

互动无误


考虑到访问者期望与您的网站进行各种微互动,这些互动可能会有所不同。例如,假设您已经将联系电话号码放入您的网站标题。桌面客户可能会把它拨到手机上。另一方面,移动用户希望单击电话。


平台之间的交互式手势或设计继续不同。例如,图像滚轮可能对所有用户都是一样的。然而,只有移动访问者才能点击向左或向右滚动滚轮。桌面访问者将使用鼠标。


因此,无论您选择使用响应式网页设计还是自适应网页设计,都不仅要关注如何在不同的平台上重新定位、调整大小或显示您的内容。还要考虑如何影响内容交互。

返回页面
电话
86-021-566 23108
邮箱
sirky@wininteraction.com
地址
上海市共和新路5000号绿地新都会6号楼10楼
Online Message
在线留言
在线咨询
021 566 23108
sirky@wininteraction.com
在线留言