网站设计规范

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

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

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

内容型的产品该怎么做?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Lucene第一讲——概述与入门

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

(一)svn介绍

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

训练不出结果_训练赛惨败SKT?FPX直播透露拿冠军原因!Karsa再谈离开RNG?

都说人逢喜事精神爽&#xff0c;小凤凰拿了世界冠军当然更爽。一回国就开启了快乐直播&#xff0c;人均阴阳怪气&#xff0c;信息量巨大&#xff0c;让我们一起来康康吧&#xff01;“刘青松赢了装自己很淡定&#xff0c;其实耳机里叫得最大声。”“把林炜翔冠军奖牌给大家抽了…

linux ns级定时器_预热 | 万众期待的单片机、Linux二合一的STM32MP157开发板亮相

STM32mp157 GUI操作体验视频GUI架构简介支持多种应用场景的HMI2.0应用&#xff0c;根据应用的类型将整个UI分为五个大类&#xff1a;多媒体&#xff0c;智能家电&#xff0c;卫生医疗&#xff0c;公共服务&#xff0c;系统。均支持于100ask_stm32mp157_pro硬件开发平台&#x…

Spring加载properties文件的两种方式

在项目中如果有些参数经常需要修改&#xff0c;或者后期可能需要修改&#xff0c;那我们最好把这些参数放到properties文件中&#xff0c;源代码中读取properties里面的配置&#xff0c;这样后期只需要改动properties文件即可&#xff0c;不需要修改源代码&#xff0c;这样更加…

c++2010修复不了_汽车凹痕太小修复不了?汽车无痕修复是骗局还是技术不行?...

前段时间在网上看到一个推荐搜索说汽车凹痕太小修复不了&#xff0c;又是一个不知道从哪传出来的谣言。只听说过汽车凹陷变形太厉害修复不了的&#xff0c;没听说过凹陷的太小而修复不了的。但是我转念一想&#xff0c;能被搜索推荐说明搜遇到这个问题的人还挺多的&#xff0c;…

ege限制鼠标移动的函数_浅谈函数节流和函数防抖

什么是函数节流和函数防抖&#xff1f;下面本篇文章就来给大家浅谈一下函数节流和函数防抖。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对大家有所帮助。前言事件的触发权很多时候都属于用户&#xff0c;有些情况下会产生问题&#xff1a;向后台发…

〖Demo〗-- HAproxy配置文件操作

【HAproxy配置文件操作】 要求 1. 根据用户输入输出对应的backend下的server信息2. 可添加backend 和sever信息3. 可修改backend 和sever信息4. 可删除backend 和sever信息5. 操作配置文件前进行备份6 添加server信息时&#xff0c;如果ip已经存在则修改;如果backend不存在则创…

centos调整页面大小_这2种方法都能调整PDF文档的纸张大小

PDF文件大家都很熟悉了&#xff0c;在工作中是经常会遇到的&#xff0c;但是想对PDF文件进行修改和编辑的可能很多人都觉得为难。比如当你在阅读PDF文件时&#xff0c;发现PDF文档的页面尺寸不是自己想要的尺寸&#xff0c;要如何修改PDF的纸张大小呢&#xff1f;以下介绍2种简…

罗小黑用flash做的_中影星美好看罗小黑战记正式定档!

《罗小黑战记》定档的消息一发出&#xff0c;原微博已被转发45000次&#xff0c;大家真是太激动啦~罗小黑官博下热闹非凡在B站也同样壮观原是猫妖的小黑&#xff0c;在盗取宝珠后逃走&#xff0c;但被发现&#xff0c;而化为了一只猫&#xff0c;在街头流浪时&#xff0c;被小白…