手机网站设计规范_手机网站设计规范_新版
手机网站设计规范_手机网站设计规范_新版
接下来，我将会为大家提供一些有关手机网站设计规范的知识和见解，希望我的回答能够让大家对此有更深入的了解。下面，我们开始探讨一下手机网站设计规范的话题。
文章目录列表:
1.电商设计有什么规范?
2.手机网站建设要注意哪些问题和优化细节
3.web端及移动端原型设计规范
4.手机UI设计有哪些规范?
5.手机版网站如何制作五大注意事项要知晓
6.手机网页设计排版需要注意的几个事项
电商设计有什么规范?
页面尺寸规范
PC端页面的尺寸宽度1920px，高度尺寸按照页面所需信息来定即可，显示尺寸1920?1080px;手机端页面的尺寸宽度750px，高度尺寸按照页面所需信息来定即可。
PC端首页横幅广告尺寸为730?400px，手机端首页横幅广告尺寸为750?400px。专题活动页，主业页面宽度为1920px，高度为580?700px，_好不要超过700px，其中显示区域页面高度为1210px。产品详情页，宽度尺寸790px，高度尺寸充分展示所需信息即可。
文字规范
在页面中使用的中英文字体不得多于5种，页面中出现3次以上为主要字体，其他文字作陪衬字体。在产品详情页设计中，一般主要字体为黑体。
在做横幅广告字体时要经过设计变形，没有字体设计能力的，应在原字体基础上适当做些特殊效果;字体字号大小与颜色要和背景颜色对比分明，使消费者便于预览阅读。经过设计后的文字，显得很有扩张力，很有力量感。在原来的文字基础上做了一些特效，做了一个渐变的效果，比之前的文字在活跃度上有了很明显的提升。
颜色规范
规范分两类：设计风格规范、版式排版构图规范。页面颜色要求：页面中使用的颜色不得多于5种，黑白灰不算色;针对不同的主体使用合理的色系;主题颜色和辅助颜色要根据配色原理搭配。
版式规范
页面设计色彩要清新，布局要大方;页面设计要有整体性、一致性等。一致性包括色彩的_、版式的_和字体的_等;页面布局应主次简约分明，中心_，大小搭配，互相呼应，图文并茂，适当的空白利于消费者阅读。
广告语规范
广告语要注意极限用语的应用。根据广告法，极限用语不得出现在商品列表页、商品的标题、副标题、主图、详情页以及商品包装等位置。
手机网站建设要注意哪些问题和优化细节
随着移动互联网的快速发展，移动端的网站也纷纷融入人们的生活，而某些网站在pc端上某个关键词或许有排名，但是在移动端上就不见得有优先排名的展现，但是以现在移动端的发展速度，移动端的流量入口已经远远超越PC端的流量入口了，那么，摆在我们眼前的问题就是移动端进行SEO优化的问题。
目前，在移动手机用户群体中，百度依然占据搜索的_位置不可动摇，除了少数的大站和_站，大多数的中小网站都是依靠搜索引擎尤其是依赖百度而生存的，因此手机网站的SEO优化依然是面向百度这个_的中文搜索引擎来开展。
1、移动站点导航按钮
移动站点对于导航很重要就是保持清晰，对于移动网站来说缺少导航就缺少灵魂，我们做移动网站移动要懂得处理导航按钮，而且还要包含整体导航结构。
2、网站结构层次分明
移动站点也要根据网站情况注重层级结构，特别是网站面包屑导航的层级结构。对于企业网站来说，网站首页+列表页+详情页这样的结构足以。相关阅读:手机网站建设开发技巧与注意事项
3、网站字体根本屏幕设计
网站内容都是通过字体和字号大小显示出来，因此我们在使用策划网站内容的时候，就需要保证网站字号在屏幕显示的大小。字号过小导致阅读困难，字号过大，会导致网站出现问题。因此，我们在设计手机站点就需要使用合理的字号，本人建议使用14px-16px。
4、网站内容页面长度
移动站点内容页面长度由于屏幕限制，会出现由于内容过长，导致用户下滑很长时间。因此，在策划和优化移动站点使用就需要关注页面长度，根据移动设备屏幕，居中对齐。内容尽量精细化和简洁化，而且还要保持内容长宽度适中。
5、浏览器是否兼容
现在国内用户一般都是用UC浏览器，百度浏览器，QQ浏览器，因此我们在做移动站点就需要在各个移动浏览器做好兼容性效果。
6、移动站点结构布局
移动站点也是属于网站属性，我们都知道网站_早开始PC端，我们都叫做PC端网站。移动站点再设计和结构布局需要包含这些模块Banner和分类导航，_咨询、电话咨询、_留言等。导航和Banner起到网站结构和优化以及搜索引擎识别。像电话咨询等就属于联系模板_重要就是方便用户及时跟客服沟通。
7、网站详情页内容优化
移动站点详情页需要照顾移动端屏幕我们在进行内容建设就需要做到图文结合还要保持内容精炼，降低用户下滑屏幕的次数。
web端及移动端原型设计规范
_次绘制原型图的时候觉得主要功能表达清晰即可，尺寸大小、元件间距全凭感觉，因此一开始也挨了不少骂。后来慢慢摸索出规律，大概总结如下：
端口类型：
目前长需设计的端口分为：web段（即网页）、移动端（_、小程序等移动设备）、IPAD（IPAD是一种移动设备，但也有自己特定的尺寸），智能设备（例如智能电视、智能手表等等）
由于我更多接触的是网页端已经小程序端口，后面会以这两个为主。
网页端：
目前市面上显示器屏幕尺寸为19-21寸，屏幕分辨率大概在1280px*800px—1440px*900px之间，前端工程师在写页面的时候，宽度一般设为1180px—1220px（当然，这个宽度也不是_固定的）。
因此在做产品设计的时候，设计web端产品，宽度会设为1400px作为容器，位于容器上方再画一个1200px的矩形，内容区域的容器。（PS：内容区域的矩形需与底部容器左右间隔10px，作为留白）
可能有人会问，为什么要底部容器上面划出一块内容区域？
首先，我们要知道， 容器决定产品的边界 ：
我的理解是：
按照市面上显示器的分辨率，前端页面可展示的内容区域，平均宽度在1200px，预留出来的空白部分，是为显示器较大的人群考虑的：屏幕越大，可展示的区域也越大，超过产品本身内容可展示区域的话，会自动留白。
另一方面，为保证开发团队的成员可查看完整的原型图，我们需考虑下他们电脑屏幕的分辨率可能为1280*800px。
稍稍总结下，就是跟随大多数人的屏幕尺寸大小，以及方便开发团队查看。
给大家看我电脑上查看大的原型图大小，是不是很清晰的看到内容呢？当然，这也是我个人的看法，如果有别的看法的，可以互相交流交流 （我算是个野路子的产品） 。
至于高度的问题，这个是没有要求的，一般都是根据需要展示的内容来决定的，也就是高度自适应。
讲完容器的宽度，接下来讲讲字体。正常情况下，字体大小都是14px，_小字体12px（字体太小可能就不方便查看）。
字体上，我所在的企业并没有太多要求，只要求能看懂主要功能就行，所以上面的字体是来自一位B站的up总结的。
移动端：
说明之前，给大家感受下刚入门时候，画的线框图，话不多说，先上图。
（OS：简直惨不忍睹，当然这并不是给开发的图纸，而是草稿。由于各种问题，我需要兼顾产品跟UI设计，所以都是输入高保真原型图的）
虽然_终效果跟_版草稿的差距特别大，但这样让我知道原型尺寸的重要性。但凡在自己随手画的容器上觉得觉得间距大小差不多了，可以了。有这样的想法，那你离被开发揍一顿就不远了。
以自己一开始的惨痛经历说了这么多，接下来聊一聊移动端的设计规范。
常见的移动端多是手机，基本上整个手机都是屏幕既是容器也是内容可视区。常用字体14px，_小字体一般是12px（你懂的，手机屏幕小，字体太小用户也很难看清的）
上图是我个人画线框图的习惯，并不是标准，只是提供个参考给大家。各个区域的底色，也只是为了便于自己区分，实际上底色并没有什么特别多的要求。至于字体，一般都是使用14px的字体。
产品在原型设计上还是有很多规范的，只不过我就职的企业并没有太多要求，但基本也算通用了，具体情况还是看看自己企业内部有没有什么特别的要求。
上述的设计规范_于个人习惯，也是非常基础的部分。如果有别的见解也可以一起分享。像容器内，各类原件的一些规范，后续也会慢慢整理出来。
手机UI设计有哪些规范?
手机UI设计规范：
1、尺寸问题： 480乘800，540乘960，720乘1280，1080乘1920象素尺寸是较常见的手机屏幕尺寸，在设计时可以根据实际产品要求进行设计，更大的屏幕可以有更多的交互表现和视觉元素的支持，较为自由；
2、色彩问题： 由于手机lcd本身的限制，在色彩的还原程度上没有pc如此完善，因此在选用色彩时要根据使用的屏幕进行调节；
3、可实现性问题： 受到硬件运算速度和内存的影响，以及不可预计的后台程序开发难度，过于复杂的效果将很难进行实现，与程序工程师和ui工程师，硬件工程师的沟通显得尤为重要。
手机版网站如何制作五大注意事项要知晓
关于手机版网站制作，看上去与一般意义上的网站制作并没有非常大的不同，只不过制作网站时，你所需要准备的设备由电脑换成了手机而已。但设备的更换所带来的影响往往没有我们想象的那么简单。如何保证我们手机版网站制作不翻车，接下来的五大注意事项便是_好的保护伞。
1、使用独立的域名
有很多人在设计网站的时候为了方便，很多时候手机的域名和PC端用的是同一个。这看上去不是一个大问题，但需要注意的是，在使用手机时，手机的搜索引擎对于来自于PC端的资源和信息是排斥的。如果你能够对于网站给出一个明确的指示命令，再什么样的情况下PC端优先，而在什么情况下让移动端先进行，那么问题就解决了。但大部分时候，大多数人并不明白如何进行适配设置，那么解决的_好方法就是在一开始进行手机版网页制作时就使用独立的域名，针对移动互联网站做适配的手机网站。
2、利用HTML5程序
对于一些PC端网站制作所常用的程序语言如JAVA、ASP等语言，实际上用在移动端的网站建设上就不大合适。具体的原因有很多，比如手机的内在设置甚至于说手机相对于电脑来说远远小于的屏幕尺寸，这些因素都会使得原先适用于PC端网站制作的程序语言不再适用于手机版的网页制作。而HTML5则在这一方面成为了移动端网站制作的_选项。
3、注意网站浏览设备的变化
使用设备的改变是我们在设计手机版网站所必需的关注到的一点。首先是针对手机的在排版设计方面的调整。比如说，由于手机的屏幕尺寸较小，所以我们在设计方法上尽可能采用比较简约的风格，比如十分复杂的阴影往往不大适用，即手机网站的使用相对来说可能更应该注重使用的功能性。当然，这也是一个大概的趋势，不同的手机版网站使用目的不同，所适合的设计排版方案也各有不同。
4、尽量不使用弹窗、flash等耗流量程序
说到手机流量，几乎没有人会觉得够用。因此，在设计手机版网站时，我们如果能注意到这一点，那么对于我们网站之后的运行会大有裨益。比如说，尽量少的使用弹窗和flash，加载这一类程序往往会比较耗时耗流量。并且，增加这一类程序往往吃力不讨好，所呈现的效果也不一定如意。
_后，在制作手机版网站时，我们应尽可能的使用规范的标准的协议格式。而在_后发布之前，也一定要做好各方面的调试工作。
总而言之，要完成好手机版网页制作，_重要的就是在完成规范操作的前提下，充分考虑到手机用户的使用体验，希望这篇文章能够对正在制作手机版网页的你有所帮助！
制作手机网站手机网页设计排版需要注意的几个事项
一般情况下都是先做PC版的页面再做手机页面，PC端网页可以呈现更丰富的内容，用户浏览网页时更专注，达到_好的体验。但有很多情况下，页面的访问更多的来自手机端，比如专题页面，用户通过微信、手机QQ入口进入。如果开始就先做PC版的专题，想必手机版的内容将是一个移植的PC版网页，让移动版的体验大打折扣。
1、安全宽度与扩展区域让页面适应主流分辨率
与PC上网页的做法一样，确定一个安全宽度，把重要信息控制在640PX宽度内(以iphone分辨率为安全宽度。目前主要浏览器在iphone4S下的首屏高度如下,可以根据具体页面投放的渠道做相应的首屏高度。
2、控制的大小
专题的头图一般有很强的视觉，对于手机用户来说，加载一张的等待时间比PC上成本大很多，如果一个页面加载时间超过5秒，70%的用户会选择关闭，那么再出彩的专题也没办法呈现再用户面前了,所以需要对设计稿做折中的处理。
在做头部的延展区域(超出640px范围)，推荐使用纯色，渐变，可以平铺的素材，以便于减少头图的大小，提高加载速度，并且延展区域可以无缝连接。模糊的背景可以_限度的压缩质量。
3、字体
手机中的字号一般上电脑中的两倍，一般在电脑中用的12px的字体在手机网页中就该使用24px。在设计的过程中，也要使用iOS和安卓默认渲染的字体，以便更真实的还原真实环境。在规范的专题中，主要字号控制在3个，大中小都有一个区间。避免随意用字体字号，并且字号必须上整数。
4、控件交互区域适合触控
手机专题的主按钮高度大于80px，并且根据活动的需求放在首屏内。文字链接上下的间距大于80px，手指在屏幕上热区_小感应是44px。
5、移动端网页少用跳转
手机用户的网络环境不如PC用户，页面的跳转会对用户产生更大的心理效力，如果在手机页面中能把信息合理的展示在一个页面中_。如果非要跳转，咱们可以用些假装不是跳转的方式，比如展开，浮出等。减少用户产生的不安全感。
移动端界面设计常识规范
1.怎样规范设计移动端_的UI
想要成为一个合格的_开发UI设计师那就要跟紧移动时代的脚步，了解每一个UI设计师必须掌握的基本技巧才可以。
_：要了解_
正如同网页设计师需要了解HTML/CSS一样，作为移动端UI设计师的你应该了解移动端_的架构。首先移动端设计的语言和网页设计的语言就不太一样，不同_有着不同的编程语言和接口，移动端界面的构成也是无法使用CSS和标签来实现。
你需要深入阅读官方的开发文档，寻找更多有关_的文档知识，明白_的构成，编译方式，发布方式，了解设计的规则。这些东西不仅关系到你的应用开发好坏，还会影响系统的 稳定性，电池续航长短等多种因素。作为移动端UI设计师，你单了解简单的移动端设计是不够的。我们需要从长远的角度去思考问题。
第二：了解移动端的技术构成
对于一个UI设计师来说光了解_的基本特征是不够的。接下来你需要了解它相关的技术构成：位置服务（wifi,GPS等），蓝牙（低功耗蓝牙技术），信号，前后摄像 头，麦克风，陀螺仪，位置传感器，加速度传感器，指纹扫描仪（iPhone 5s），眼动追踪技术，语音识别，人脸识别，等等等等。每一个新技术的背后以为着应用程序更多的可能性，交互设计、使用体验，甚至商业模式。
第三：发掘本地UI组件的开发潜质
每个移动操作系统中中总有着大量的本地UI组件，他们有着极大的自由度，方便你进行定制。你需求确切地知道他们的特征（尺寸，大小，功用），你可以为与你合作的开发者节省大量的工作时间。
第四：了解移动端的工作流程
安装SDK并运行，了解移动开发框架，比如TubyMotion、Xamarin、Titanium。熟悉集成开发环境，因为这其中包含了移动开发所需的方方面面。
第五：了解移动端的界面模式
三大移动_之间，有着相似之处，但是在深入探究他们的交互设计，会发现它们在理念上的巨大差异。作为一个设计师，你需要明白这些差异所在，以及它们是如何体现在实际案例中的。
不要只着眼于单一_，三大_都需要深入体验，每天至少都要把玩一下，并且_少要持续半年。在这个过程中，体会差异，并且将你觉得重要的、有代表性的、值得保存记录的界面截图留存。作为单一_的狂热粉丝，你是做不好移动端UI设计师的。
第六：记录并解释你的UI设计
考虑到屏幕截图并不足以表现UI全部的特性，你需要学会记录界面不同的状态、转变过程、转场动画等信息，并且学会记录界面对于不同状况的反馈。
2.移动ui设计都有什么规则
原则一：内容优先
界面布局应以内容为核心，提供符合用户期望的内容。
原则二：为触摸而设计
界面的设计交互系统以自然手势为基础构建，符合人体工程学保存一致性。
原则三：转换输入方式
使用各种手机的设备特性和设计手段，减少在应用内的文字输入。
原则四：流畅性
保持应用交互的手指及手势的操作流、用户的注意流和界面反馈专场的流畅性。
原则五：多通道设计
发挥设备的多通道特性、协同的多通道界面和交互，让用户更有真实感和沉浸感。
原则六：易学性
保持界面架构简单、明了，导航设计清晰易理解，操作简单可见，通过界面元素表意的和界面提供的线索就能让用户清楚地知道其操作方式。
原则七：为中断而设计
考虑应用的使用情景，确保在各个产生出中断的情境下，让用户恢复之前的操作，保持用户的劳动付出。
原则八：智能有爱
给用户提供让他感到惊喜有趣的、智能_的、贴心的设计。
3.怎样规范设计移动端_的UI
怎样规范设计移动端_的UI 规范目的/系统 1 遵循各_的_的界面规范，使_终设计出来的界面效果达到_理想状态 怎样规范设计移动端_的UI 2 提高工作效率，UI/UE/开发编码三方人员相互之间协作更轻松，减少因资源或设计问题导致的反复修改、重复劳动、效率低下的现象 3 通过规范的方式来达到以用户为中心的目的，给用户呈现_效果和_质的体验 4 目前使用_多的移动端操作系统_有Android、IOS、Windows Phone 其他的操作系统包括BlackBerry 10、NokiaOS、Firefox 、Sailfish OS、Tizen、UbuntuTouch 怎样规范设计移动端_的UI 设计尺寸/屏幕支持 1 IOS：宽度640PX 高度1136px 当然还需要自适应模式，以便以后的屏幕扩充需求。
IOS系统从iPhone4开始已经进入Retina（视网膜屏）时代，资源尺寸比例从原来的1X变为了2X。 2 Android：宽度720px 高度1280px 同样的设计成自适应模式，现在Android系统的屏幕也是越来越多样！ Android系统采用可自适应的屏幕支持，由于屏幕尺寸种类繁多，简单可归为ldpi(240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280)四类 3 Web Mobile：宽度640px 高度960px 这个对于网页的浏览来说是_适合不过了的！ 细节模块（客户端/Web内嵌） 1 导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，ios导航栏的ui图标格式为60px留白7px,Android系统的可以为：64px*48px留白8px 2 标签栏：让用户可以在不同子任务、视图、模式之间切换。
ios系统Tab Bar:98px Android系统Tab Bar:96px 3 工具栏：放置当前屏幕或者视图下对相关对象的操作按钮。 ios系统Tab Bar:88px Android系统Tab Bar:96px 4 为了能够让用户有更好更直观的体验，资源需要有各种状态。
5 列表：无论哪种形式列表，单行列表高度必须是用户手指接触的_值 ios系统Height 88px Android系统Height 96px 6 字体： IOS：默认字体 英文 HelveticalNeue 中文 黑体 Android：默认字体 Droidsans fallback 是谷歌自己的字体，与微软雅黑很像 7 字号：以下图IOS为例子 我的音乐：34 px 我的、淘歌、发现： 30 px Muxx 34 px 本地音乐 30 px 泡沫、邓紫棋 24px 8 桌面ICON： 根据系统的不通桌面的图标设计也需要根据设计成不通的尺寸。 9 细节模块（Web内嵌）：细节_为重要，只有好的内容和_的细节才能吸引住浏览者的关注！所以在制作的过程中也需要更加的关注！ 转载。
4.手机UI设计有哪些规范
这是创想设计学院的回答。
手机UI的规范分为安卓和ios的，所以内容比较多。截几张图，iphone的，可以参考一下。 如果需要文档，可以加q群：527+963+152，找老师要文档即可。
希望能帮到你，谢谢。
Android _设计规范有哪些
众所周知，安卓系统是开源的，国内又有超多的手机厂商，小米、魅族、华为、oppo、三星等，每一个品牌有属于自己的UI设计规范，但是我们主要分析UI界面尺寸规范。
1、字体
安卓系统中文采用的是思源黑体，英文字体为robot字体。
只使用偶数单位 24 pt，28 pt，36 pt等字体大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？
讲图标之前先来分析一下一排英文的意思：
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次数值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系统专用的长度单位，设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用，文字则用sp(放大像素)，主要用于字体显示best for textsize。
px是像素的意思， 不同设备显示效果相同。
安卓各屏幕密度关系如下：
3、图标
不同手机品牌的图标的标志是不一样的，对应不同大小屏幕的尺寸如下：
系统图标的尺寸：
快捷图标的尺寸：
应用图标的尺寸：
4、应用栏的尺寸
从左到右依次是：① 应用栏高度：56dp；应用栏左右内边距为16dp；应用栏图标上下左内边距为16dp；应用栏标题左内边距为72dp；应用栏标题下边距：20dp；
②应用栏高度为128dp；
③操作栏高度为56dp；标题栏高度：80dp；标题栏底部内边距：8dp；描述区域高度：72dp；描述区底部内边距：16dp。
5、列表高度
垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏：24dp；②工具栏：56dp；③子标题：48dp；④列表项：72dp
垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏：24dp；②工具栏：56dp；③标题和列表项：48dp；④子标题：48dp；⑤内容区域间距离为8dp
6、切图
上周我们讲到iPhone 6与iPhone 6 Plus约是1.5的关系，而xhdpi的Android手机屏幕与xxdpi的屏幕刚好是1.5倍的关系，所以iPhone 6 Plus和xxhdip也可以共用一套切图，掌握好尺寸关系，能让工作变得简单很多。
7、界面适配
安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置，来优化用户界面设计，带来更良好的用户体验。
如何做到安卓界面适配呢？大家一定要很清楚的了解分辨率、屏幕大小、密度的关系；明白实际密度和系统密度的关系，dp、sp、px的区别；明白dp与px的转换。这里不做过多阐述，后期写一篇具体的~
安卓的界面规范就讲到这里，要明白设计界面规范的意义是确保设计的_性与合理性，规范维护的是项目的_，为了项目利益_化，_化。所以作为UI设计师的我们，如果一点设计规范不遵守，全靠自己想当然，那就别发给前端人员啦，他也看不懂。
好了，今天关于“手机网站设计规范”的探讨就到这里了。希望大家能够对“手机网站设计规范”有更深入的认识，并且从我的回答中得到一些帮助。