网站设计规范

网站不同于移动应用:
  1. 屏幕适配(屏幕尺寸、分辨率)。

  2. 交互方式不同,鼠标相对手指具备更精准的点击范围,有更多的控件状态。

  3. 在设计网站原型时,并没有具体的控件大小和条栏规范,需要注意相关设计规范。

  4. PC导航:面包屑,非线性。APP导航:线性。

设计尺寸:

电脑分辨率主要是1920*1080,版心为960-1200(默认安全区1200即可)。

在这里插入图片描述

注意事项:
  1. 简单:每个网站都应该有尽可能简单的结构。

  2. 清晰:导航的每项对用户而言,都应该是清楚的。用户最少的点击,最快地到达目的网页。

  3. 一致:系统的导航页在每一页中都应该是相同的。

  4. 控件:同级别的控件应该做的一样,如果不是按钮的就不要做成按钮的样式,不要做太多让用户误操作的东西,可点击的要有点击后的效果。

  5. 网站中文建议使用 微软雅黑 字体,英文则建议使用 Arial 字体。iOS系统用 苹方字体。安卓用 思源黑体。

  6. 12px是网页设计的最小字号,适用于突出性的日期,版权等注释性内容。14px则适用于非突出性的普通正文内容。16px或18px适用于突出性的标题内容。网站的字体大小没有硬性规定,根据实际情况可以酌情考虑,但是要使用偶数字号。

  7. 页面加载速度:当用户在等待内容加载时,他们很可能会变的沮丧。如果加载速度很慢,用户很可能会离开这个网站。解决方案 懒加载、预加载。

  8. 返回按钮:新打开的页面中尽量有返回按钮(或者面包屑导航)。如果一定要跳转到独立的页面,设置为在新窗口打开。

  9. 慎用促销、广告:促销和广告会抢夺用户的注意力,影响他们访问网站。

  10. 慎用滚动劫持:用户最不喜欢的设计之一,用户有权决定自己浏览的网页和APP的位置。(滑动到一定锚点时触发模态弹窗)

  11. 慎用自动播放音视频:需要用打开的音视频文件,设置为非自动播放的形式。

  12. 文字配色:不要使用繁重的颜色背景,配方方案要协调、易接受。不要使用闪烁的文字。

  13. 超链接:处理超链接时,需注意超链接是网站中的重要组成元素。点击过的超链接要改变字体颜色。 如果带检索功能,搜索结果中,要对关键字做出变色处理,提示用户。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/572025.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

产品设计七大定律

Alan Cooper(交互设计之父):除非有更好的选择,否则就遵从标准。 许多设计准则都基于人类心理学:人们如何感知、学习、推理、记忆,以及把意图转换为行动。 菲茨定律: 菲茨定律用来预测某点到目…

函数的定义

什么是函数? 先上一个函数格式, def 函数名(参数1,参数2):       #函数的定义函数名:这是一个解决什么问题的函数:param 参数1: 传入一个参数:param 参数2: 传入第二个参数:return: 返回一个列表                #函数…

插入网站连接_带你了解网站设计的五个基本步骤

网站制作设计并不是一件简单的事情,一个好的网站不但里面包含的内容要全面,而且还要能够持续运转,为我们带来流量。下面简单为大家介绍一下网站设计的基本步骤,希望能够帮助大家更好的了解网站建设。网站设计1、站点定位确定网站的…

内容型的产品该怎么做?

内容产品: 什么是内容型产品:以图文、视频/直播、音频等形式提供服务的产品形态。 例:抖音、快手、微博、今日头条、知乎、得到… 内容产品的发展: 内容产品生态: 内容产品用户角色及职责: 内容模型&#x…

ssh免密码登陆(三个节点master slave1 slave2)详细带命令版

准备工作: 首先修改三个节点的名称分别为master slave1 slave2。建议以vim /etc/sysconfig/network的方式修改 修改三个节点的/etc/hosts文件 如下形式: 192.168.43.202 master 192.168.43.253 slave1 192.168.43.113 slave2 前面为各自机器对应的IP 配置…

复杂电路简化经典例题_一天搞定考试系列之电路原理(3)

经过了前两章对阅读理解学习法的实践运用,想必大家知道该怎么做了,至于效果,我不敢保证对每个人都有效,欢迎大家实践后给予反馈,大家一起寻找更好的方法。下面进入第三章,需要说明的是前两章虽然简单但是很…

【前端】Github Pages 与域名关联简明教程

Github Pages 与域名关联简明教程 1. 向你的 Github Pages 仓库添加一个CNAME(一定要*大写*)文件 其中只能包含一个顶级域名,像这样: example.com如果你是用 hexo 框架搭建博客并部署到 Github Pages 上,每次 > hexo g > hexo d 后会把…

登录注册页怎么做

app常见页面: 引导页: 概念:第一次安装App或者更新App后第一次打开App时所展示的可以滑动的页面。 作用:主要是用于展示产品本身的一些核心功能点或者特色。 启动页: 概念:App被用户打开后,在启…

怎么把东西去掉修图_很多人花几千块学习商业修图,其实跟把钱扔了一样。?...

很多人花几千块学习商业修图,其实跟把钱扔了一样。我所说的商业修图是指那些杂志、明星修图,很多人觉得修杂志、明星就是大师,就非常厉害,其实商业修图重要的不是技术,而是资源、圈子;大部分人看作品也不是…

算法入门经典-第七章 例题7-2最大乘积

最大乘积 输入n个元素组成的序列s&#xff0c;你需要找出一个乘积最大的连续子序列。如果这个最大的成绩不是正数&#xff0c;应输入-1&#xff08;表示无解&#xff09;。输入0结束输入。1<n<18,-10<Si<10。 样例输入&#xff1a; 3 2 4 -3 样例输出&#xff1a; …

Golang_String常用操作

字符串操作&#xff1a; 字符操作不会影响原字符串&#xff0c;如果处理后又返回给原字符串则会改变&#xff0c;但一般是使用新变量接收处理 len&#xff1a;统计字符串的长度&#xff0c;但如果有中文时会出现乱码的情况&#xff0c;转换为range可以解决 func main() {str :…

h5页面生成图片分享到微信js_html2canvas 动态生成微信分享海报的优质js库

如何把网页上的内容用javascript来实现截图&#xff1f;今天分享的html2canvas就可以。介绍在微信项目中经常会遇到动态生成海报的需求&#xff0c;Web前端合成图片往往会使用canvas。canvas虽然强大&#xff0c;但用来合成海报非常繁琐&#xff0c;一不小心就几百行代码了。而…

去重+排序板子(set+map)

题意&#xff1a; 给定n个数&#xff0c;去重排序后输出个数和每个数 1.map实现 #pragma GCC optimize("O2") #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #include<cmath> #include<queue> #i…

expires为session_面试必问:session,cookie和token的区别

点击上方蓝字关注我们 !session&#xff0c;cookie和token究竟是什么简述cookie&#xff0c;session&#xff0c;token作为面试必问题&#xff0c;很多同学能答个大概&#xff0c;但是又迷糊不清&#xff0c;希望本篇文章对大家有所帮助http是一个无状态协议什么是无状态呢&…

WINFORM 调用 Close 不会释放窗体

在以下两种情况下调用 Close 不会释放窗体&#xff1a;(1) 窗体是多文档界面 (MDI) 应用程序的一部分且是不可见的&#xff1b;(2) 您是使用 ShowDialog 显示的该窗体。在这些情况下&#xff0c;需要手动调用 Dispose 来将窗体的所有控件都标记为需要进行垃圾回收。外部链接转载…

蓝凌ekp开发_蓝凌OA系统,蓝凌EKP,蓝凌KK__房地产案例应用__恒大集团

作为中国地产行业标杆&#xff0c;恒大集团拥有员工39000多人&#xff0c;在全国33个城市设立了分公司&#xff0c;在全国122个主要城市拥有大型项目229个。如何实现全集团的协同沟通&#xff1f;如何结合业务规范、统一流程&#xff1f;如何实现专业知识、业务案例和管理经验快…

测试用例设计方法 - 场景分析法

现在的软件几乎都是用事件触发来控制流程的。象GUI软件、游戏等。事件触发时的情景并形成了场景&#xff0c;而同一事件不同的触发顺序和处理结果就形成了事件流。这种在软件设计方面的思想可以引入到软件测试中&#xff0c;可以生动地 描绘出事件触发时的情景&#xff0c;有利…

jspx格式手机打开_制作手机浏览器显示格式的HTML页面

最近要推出手机支持访问的HTML页面效果&#xff0c;而这在制作手机页面的过程中状况连连。 主要一下就我制作的工程中所遇的问题说明一下&#xff1a;1. 改掉HTML页面声明&#xff1a;(以往大部分页面都是HTML4.0的声明)  还有很多参数可以配置大家可以google一下2. 关于img标…

Lucene第一讲——概述与入门

一、概述 1.什么是Lucene? Lucene是apache下的一个开源的全文检索引擎工具包。 它为软件开发人员提供一个简单易用的工具包&#xff08;类库&#xff09;&#xff0c;以方便的在目标系统中实现全文检索的功能。 2.能干什么&#xff1f; 主要运用&#xff1a;全文检索 3.全文检…

(一)svn介绍

项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对代码文件、文档等没有进行版本控制&#xff0c;将会出现很多问题&#xff1a; 备份多个版本&#xff0c;占用磁盘空间大解决代码冲突困难容易引发BUG难于恢复至以前正确版本无法进行权限控制项目版本发布困难什么是…