手机移动端网站设计制作应注意那些呢？移动端手机网站是越来越普及了，不管是个人还是公司都在建立自己移动端的网站，那么在移动手机端网站设计与制作时候，应该注意那些事项呢？移动端手机网站设计的成功与否会直接牵扯到整个手机网站的制作的成败，所以说，移动端手机网站的设计还是很重要的，接下来我们来看看移动手机网站设计师是怎么说的。
手机的移动网页布局设计一次又一次地给设计者提出了挑战。设备上可用的小空间必须以有意义的方式使用——主要用于内容。因此，最好导航完全不占用空间，同时仍然容易和直观地找到。下面的示例向您展示了在移动网页设计中将导航放置在何处的建议。经典：带有汉堡图标的滑动导航
关于汉堡图标的使用进行了广泛的讨论。我们的总编辑也不是粉丝。可用性专家喜欢批评导航是完全隐藏的，并且只通过图标显示。通过这种方式，甚至基本的导航元素也被放置在viewport之外。
尽管如此，汉堡图标已经确立了自己作为移动网页设计的标准，尤其是结合了滑动导航。这里，大多数时候，图标放在左上角，导航滑向右边，进入viewport。
甚至Google的设计也使用这个版本的导航。到目前为止，它已经非常普及，使用起来已经不那么出色了。但是，您可以确保每个访问您的网站的访问者都会找到导航。你不能错用这个经典，因为虽然它可能是次等的，每个人都知道了。
“More”按钮的灵活导航
那些不想把整个导航隐藏在viewport之外的人肯定会享受下面的导航。这是一个经典的水平导航，菜单项按优先级排序——不管怎样，它应该是这样。第一个菜单项是最重要的。其他项目按重要性递减。
由于，尤其是对于广泛的网站，不可能所有的菜单项都适合导航，所以您只需隐藏所有不适合的内容，并在导航的末尾添加一个“更多”按钮。其后，有一个下拉菜单，包含导航的所有剩余链接。
优点是不隐藏整个导航。所有合适的东西都显示出来。通常，所有最重要的菜单项都会显示。这种灵活的导航混合了完全可见和完全隐藏。
文本-图标组合导航
向导航的单个菜单项添加有意义的图标是一种流行的设计方法。多亏了大量的免费图标字体和集合，您将找到适合任何东西的符号。如果您的导航不那么广泛，那么在移动视图中将图标留给自己就可以了，放弃菜单文本。但是，您应该确保每个符号都有足够的空间，并且要非常清楚地说明它代表什么。
如果您的图标甚至有点模糊，或者无法理解，则不应该采用这种方法。
全屏导航
由于导航是网站的重要组成部分，所以很多人都投入了大量的精力来设计和动画。即使导航只能通过汉堡图标访问，也不必谨慎。
因此，许多网页设计者给他们的导航整个显示，而不是一个简单的幻灯片菜单。有了这些全屏显示，菜单项往往显示复杂的动画，或以其他方式隐藏的。
单个菜单项通常以大文本显示。根据屏幕大小，还会显示到社交网络或联系方式的额外链接。
所以，如果你厌倦了经典的幻灯片导航，你可以尝试一个全屏的菜单项目。在这里，唯一限制你的创造力的是显示器的大小。
没有导航条也好
在重新考虑将导航放置在何处之前，一些设计人员直接完全牺牲了导航。
这也是一个有吸引力的方法，虽然它不适用于每个网站。例如，您可以通过滑动手势来访问各个页面，而不是传统的菜单。或者您可以将整个登陆页面转换为导航页面。这允许您为链接配备有意义的标题、图像和图标。
当然，这对于复杂、广泛的网站来说并不适用。通常，导航不仅对于到达单个页面至关重要。它也是一种定位方法，向用户显示他现在所在的位置。
毫无疑问，汉堡图标和滑入式导航在导航中是真正的经典。然而，还有很多其他的变体。始终考虑菜单项的数量以及网站的复杂性是很重要的。
网站布局的好坏决定了网站的用户体验，网站的布局是在网站设计阶段完成的，良好的网站布局在一定的程度上提升的用户体验和感受起到了锦上添花的作用，并且设计成功的网站一定是西安网站设计的时候，网站的布局和整体的规划是非常的完美结合的体现吧，所以说，一个好的网站设计师一定是一个网站合理布局的专家，网站布局不仅仅要求网站设计合理，而且在视角上的角度是平衡的，让浏览者在视角方面的体验是非常的舒适，舒适，这才是网站设计在网站布局的时候应该做的。
设计视角主要是从网页的排版角度去进行分类，大致分为四种：上下布局、左右布局、国字形布局和T字形布局。上下布局是最常见的布局方式，基本上都会在最上方有一个导航，下方是内容区，有的官网还会有页脚footer，站酷就是上下布局。左右布局在后台类、TO B类产品中比较常见，一般左侧为侧边栏，右侧为内容区。国字形布局和T字形布局其实算作上下布局，只不过比较典型，可以单拎出来作为一种布局类型。接下来我们来看下前端视角的布局方法
首先为什么要了解些前端的布局方式呢，直接甩给前端一个设计稿，让他去实现不就行了？其实这涉及到的是设计和开发之间的协作关系，一个有规律有规范的设计稿，前端实现起来更加容易，也方便他管理自己的代码，实现出来的样式也会更灵活，在出设计稿之前和前端沟通一下，采用什么布局方式，需要设计怎么配合，也费不了多少工夫。当然直接甩个设计稿，前端也能实现，但一些特殊效果真的是需要双方合作才能完成的。
前端视角主要是指实现页面的各种CSS布局方式，我这里主要归纳了5种：静态布局、流式布局、响应式布局、弹性布局和Flex布局。除了静态布局，其他都能实现在不同分辨率下页面的自适应，来给用户最佳的视觉呈现。
静态布局（static layout）
静态布局也叫做固定布局，网页内容区采⽤绝对宽度，网页内每个模块的尺寸大小固定，一般整体在浏览器内居中显示，并会设置最小宽度min-width，当分辨率小于最小宽度就会出现滚动条，如果大于最小宽度则内容居中外加背景 。找了一个很古老的网站，大家看看就好。。。
应用场景：目前大部分的高校官网、医院官网、政府网站等都是静态布局，而且设计风格上也很老旧，你们懂得，当然并不是说静态布局的风格就是老旧，这个布局和设计风格没有多大关系哈，有很多新闻门户类、企业官网等网站采用静态布局，同样也很出彩。优点：这种布局方式对设计师和前端来说都是最简单的，不用去考虑兼容性等问题。设计和开发成本低，后期维护成本低。缺点：在小屏上有可能出现横向滚动条，在大屏上会出现大量的空白，不能根据用户的屏幕尺寸做出不同的表现，用户体验比较差。
流式布局（fluid layout ）
流式布局英文fluid layout，也可以翻译成liquid layout，是指页面按照百分比%定义宽度（也就是长度单位不是我们平常使用的px，而是百分数），来适配不同的屏幕分辨率，在不同的分辨率下网页布局保持不变，一般搭配min-、max-属性来控制尺寸流动范围，以免过大或者过小影响展示和阅读，页面内元素的高度和文字大小往往px来固定住，方便页面排版和阅读。
流式布局的特点是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
图片来自ant design
应用场景：流式布局典型的代表是栅格系统，一般页面中采用百分比定宽的部分都可以看做是流动布局的属性。目前大部分网页为了实现更好的视觉效果都会全局或局部使用流式布局。
优点：在不同分辨率屏幕上能够很好的展示页面元素，如果设计得当，流动布局能避免在小屏幕上出现水平滚动条，对于差别不是很大的屏幕分辨率十分友好。
缺点：当屏幕分辨率差异过大时，因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，有些页面元素宽度被拉的很高，页面缩小后，一些字或者图片或者图表等会产生堆叠，显示效果不太好控制。
响应式布局（responsive layout ）
响应式布局是指网页分别为不同的屏幕分辨率定义不同的布局，同时在每个布局中，各元素大小采用百分比定义宽度，即页面元素宽度随着窗口调整而自动适配。可以看做是定义了几个不同尺寸的流式布局。
布局特点：基于栅格系统设计和开发，通过监测设备的分辨率来呈现不同的布局。Bootstrap（一个前端代码库）的响应式设计中，预设了六个响应尺寸：xs、sm、 md 、lg、 xl、 xxl， 当屏幕分辨率较高时采用XL或者XXL的布局，当屏幕过小时，采用XS的布局。
网站示例：Uplabs网站就是基于栅格系统进行了响应式布局，宽屏模式下展示更多内容，包括上方的引导区和各种标签入口，当在小屏上市就折叠部分内容，同时作品缩略图也实现了基于栅格进行放大和缩小。优点：能够适应pc、pad和移动端，在任何尺寸的屏幕上都能呈现完美的视觉效果缺点：要匹配足够多的屏幕大小，需要设计多个版本，设计和开发工作量大
因为最近在做设计规范，无意中发现shopify的设计规范的示例中设计了四种尺寸的设计稿：1440px、1024px、776px、320px，所以还是繁琐的。（这么多版本，设计和开发会吐血吧）
弹性布局（em/rem layout）
弹性布局翻译过来不是em/rem layout ，因为弹性布局采用的单位是em或者rem，为了直观，所以直接采用了单位缩写去区分。em和rem是一个相对长度单位，页面内各元素的尺寸采用em/rem做单位，em是相对其父元素大小，rem是始终相对于html大小，即页面根元素。(有点看不懂是吧，没关系，你只需要他是个相对长度单位就行了）布局特点：采用em或者rem为单位，页面元素能够根据屏幕分辨率进行等比缩放，支持文字、间距类等比缩放，国内PC端网页不咋用，在国外已经很普遍，比较适用于移动端H5的适配
MINX网站采用了em为单位，进行了弹性布局，当屏幕分辨率差别不是很大时，视觉效果还是不错的，优点：弹性适配不同的分辨率，视觉效果比较好，而且不用出多套设计稿，是不是很爽！
缺点：em以父节点font-size大小为参考点，进行任何元素设置，都需要知道他父元素的大小，容易造成页面排版混乱，rem支持的浏览器比较少。还是上面的网站，当页面继续缩小，会出现元素的叠加，所以em单位使用时不太好把控效果。看了好多国外的网站，发现弹性布局还是很普遍的，弹性布局示例网站，个人理解的，felx布局主要是用来定义页面内某些元素相对于父级元素的对齐、排序、分布等排版方式，通过调整父级内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。
图片来自ant design
我个人觉得flex布局比较适合模块内元素的布局，算不上整个页面级别的布局。优点：能够很好的契合移动端，无需考虑分辨率问题，移动端flex布局占据主流，缺点：PC端网页兼容性不好，ie浏览器必须是10.0版本以上；对设计稿要求很高，需要是有规律的设计稿，比如栅格系统；网页内容较多时，flex布局不太好控制。我个人找到的知乎是用了Flex布局，但是他进行了页面定宽，所以很多效果看不出来
个人总结了下各种布局的关系
流动布局可以看做是静态布局的动态版，响应式布局可以看做是几个不同尺寸的流动布局，在每个流动布局之间进行自适应。流动布局、响应式布局、弹性布局和flex布局都能实现自适应的效果，只不过弹性布局是用em/rem为单位，流动布局和响应式布局是以百分比为单位，flex由于兼容性问题，PC端不太常用。各种布局不是绝对的，可以综合使用，目的都是使页面在不同分辨率的设备上实现更好的用户体验，针对不同性质的网站采用合适的布局方式。我这里将栅格设计放了进来，但实际上，页面布局可以基于栅格也可以不基于栅格，完全看设计师个人和实际工作场景了。
看完布局，你会发现，很多国内常用的布局都和栅格有关，有些西安网页设计师在做的时候也喜欢用栅格来规范自己的设计稿，所以我简单的梳理了一下栅格的小知识，希望对大家有用。首先，栅格化设计（grid-design ）不等于栅格化开发（css grid ）。我之前一直以为用栅格就要实现网页的响应式，由于我们是to b类的网站，所以刚开始很抵触，总觉得没法定宽设计某个模块，后来查了些资料才发现，这是两回事。栅格化设计是针对设计师而言，主要是为了提高网页的规范性和统一性，可以不考虑页面的响应式；而栅格化开发，是针对开发人员，特指前端攻城狮使用的css框架，用来实现页面的响应式布局。也就是你可以按照栅格去出设计稿，但不一定基于栅格开发，基于栅格开发意味着需要实现网页响应式布局。那么栅格是什么，想必大家都很清楚，就是将网页划分为几个等分栏。大概就长下面这样
栅格包括列宽（column）、间隔（gutter）和外边框margin，gutter是左右均分，分别位于列宽的两侧，margin是位于整个网页的两侧的空白区，由1/2的gutter和一个padding组成，一般来说网页的总宽度是不包含左右两侧的margin的。
栅格系统的适配，一般来说，适配时，间距gutter宽度不变，只会改变列宽column，但是在material design中定义了多种宽度的gutter，当宽屏时使用16或者24px的gutter，窄屏使用8px的gutter，所以可以根据实际情况自己定义是否改变gutter宽度。
栅格的类型
我个人将栅格归为了4类：有间隔栅格、无间隔栅格、局部栅格、水平栅格。有间隔栅格最为常见，无间隔栅格也就是gutter为0，局部栅格一般适用于页面内有侧边栏固定的布局，侧边栏可以不算入栅格范围，水平栅格是指垂直和水平都进行栅格，感觉不太常用。栅格常见分栏12栏和24栏是最常见的，因为能够被2、3、4、6整除，也就是页面能够均分为2、3、4、6等份，其次是16列比较常见。列数越多，排版布局越灵活，列数越少限制性越大，同时页面的统一性更强 。可以根据网页特点选择合适的栏数，不必拘泥。
网站设计师设计网站时应把握的一些原则，大家都知道，网站制作的前期是需要对网站进行一系列的设计，设计完成之后，没问题在进行程序这块的制作这是做网站的一条基本的流程，但是在网站设计阶段，作为网站的转设计师，在设计网站的时候，应该把控好那些原则和事项呢，接下来我们来详细的看看。
1，需要配色的是画布，而不是你的图片
一个在网页设计中最根本的原则是，无论你花了多少时间创造了一个辉煌的设计，其最终的作用是发挥出内容的核心位置。你的配色方案永远不应该比它呈现的内容的更加“响亮”。你的设计应该是在后台，目的是帮助突出网站的内容。淡色的画布突出了图像，而明亮的画布有时反而不能突出你的内容。用Photoshop或者Sketch等软件设计网站的时候，创建设计的过程往往是相互独立的。有些设计单个看起来很不错，也能被你的客户所接受，但是当它真正被设计成网页的时候不适当的配色往往会分散访客的注意力。事实上，西安网页设计的过程是和内容紧密相连的，很多制作高品质的网页看上去空空荡荡，几乎没有内容。
这是一个伟大的想法：你可以在你的网站上先铺陈出你的内容，用设计软件也好用代码也好，然后在你内容的周围设计你的网页。当然这也是一个特殊情况，如果一个特定风格的图像和照片都能和你的设计和谐的融为一体，那么你的设计配色才算是完美。试想一下，网站的配色对内容而言就像衣服对于人的重要性，对此你必须制定一套完美的并且合身的衣服。
2，选择简单的灰色作为网站的基调
你可以为你的网站基调选择无数种颜色，不过我建议你采用最简单的颜色，比如白色/浅灰色与深灰色的搭配文字背景。你可以看看任何热门的网站、模版、主题，白色或浅灰色与深灰色搭配成了大多数的选择，这当然也是有充分理由的。这样的搭配对访客而言提高了你内容的可读性，并且把你的图片突出在最前方。一般来说，你的文字最好避免使用墨黑色，深灰色一般更容易阅读。文字颜色建议范围：＃333333到＃666666；背景颜色建议范围：#FFFFFF到#CCCCCC。
当然，这些颜色的选择都不是固定死的。只不过如果你是新手，以上的配色方案你可以放心使用。
3，只选择一种颜色突出显示
如果你选择好几种不同的色调来，那么你的配色方案绝大多数是有问题的。你颜色用得越多，你的页面就越来越难以控制。所以，在你网页以灰色基调的前提下，你最好只选择一种鲜艳的颜色来作为你想要突出的事物，比如标题、菜单、按钮等等。你的高亮颜色可以是蓝色、红色、绿色，等等。你最好选择与你的基调颜色相关的高亮颜色。打开你的颜色选择器，并单击你彩色方块的中心。向上或向下移动你的滑块，你可以仔细选择你认为最合适的颜色。现在，你设计的页面有了三个基本的颜色：背景色、文本色和高亮色。在以后你也可以选择一种以上的高亮色，但现在对于新手来说还是选择一种比较合适。
4，如果有疑问，请使用蓝色如果你对你的高亮色的选择有疑惑的话，不妨使用蓝色。蓝色是一种弹性比较大的颜色，可以和很多种颜色搭配。这里介绍了30个以蓝色为主调的网站，可以作为借鉴：Blue另一方面，如果你是用蓝色，那么你用错颜色的概率就会很低。如果你正犹豫着不知道用什么颜色好，不妨使用蓝色。比较安全的蓝色包括从海军蓝到深蓝色（H235-H190），而我通常选择H205的蓝色。
如果你选定了一种颜色作为你的高亮色，那么也请你在其他需要的地方使用这种颜色。如果你的按钮、标题等需要高亮，把它们的颜色也换成同一种蓝色。在下面这个例子中我把白色换成了蓝色，大家感受一下。
5，给你的高亮色增加变化
你一旦选择了高亮的颜色，从该点移动滑块来选择接下来的颜色。在你的设计中也需要其他的颜色，高亮色的稍微变化会让你的颜色选择变得简单，但又不显得乏味。
一个西安网站制作的成功与否，最为关键点就是网站设计这块，如果一个西安网站设计的非常的成功的话，那么在网站制作这块应该没多大的问题，由此看来网站设计的成败重点还是在网站设计人员那块，但是话有说回来，一个成功的网站离不开网站制作人员的参与，是相互配合的结果。
网站设计中与制作中，一些错误提醒的方式和方法是实际工作中都会遇到的，那么遇到这些系统要求的问题怎么来处理呢，其实这些诶都会牵扯到用户的体验的，良好的西安网站设计用户体验是非常的好的，比如某个地方出现报错或者错误的情况，就很明显的额一个警告提示，像这样的警告提醒或者错误提醒一定要醒目和比较明显的的出现的用户的眼前，不能提交不了的时候，让用户自己去找错误在什么地方，尤其是牵扯到一些用户注册的地方使用的比较多，比较普及，这就需要西安网页设计与制作的时候把控好这些提示性的地方，每个系统软件在运行的过程中都会出错，可能是用户操作造成的也可能是系统错误。基于这两种情况，如何正确的提示错误信息就显得尤为重要，它直接决定了用户体验的好与坏。一个好的错误提示必备的3条重要法则：清晰地文本提示语，放置在正确的位置,良好的视觉设计，清晰的文本信息。
好的网页制作都是需要规范化的，在日常的工作中，我们见到一些大型的公司的门户网站是很上档次的，并且这些网站很大气的，给人一种气势逼人的感觉，其实这不是网页自身具备的一种感觉，而是西安网站制作者给网页赋予了这种感受和体验，并且网站做的也很细腻，由此看来一个高大上的网站不仅需要规划化的设计与制作，而且还需要有前瞻性和艺术性等等。这就是网站设计师赋予网站的灵魂。接下来我们来看看网页制作专家是怎么规划和专业化这块的。
一、文字
一个网页里面最重要的元素就是文字，尤其是门户类和企业类网页，如果一个网页没有文字，就像一道菜没有盐，索然无味，甚至网页想表达的是什么都不知道，那么文字的规范就很重要。常见的中文和英文最多，基本规范如下：
1.字体：中文常用宋体、微软雅黑和黑体，其中黑体常用于导航或者标题，英文常用无衬线的Arial、Helvetica、Verdana和衬线的Georgia、Times；
2.字号：中文最小字号为12px，英文最小字号9px，不过建议10px起，因为网页里面的字号通常为双数；
3.样式：网页里宋体12px和14px通常设置为无，宋体的其他字号和其他字体通常平滑即可；
4.粗体：大片的阅读性文字不适合加粗，文字加粗通常适用于导航、标题或者强调性的文字上。
5.颜色：除了标题或者交互等强调性的文字以外，其他重要文字用#333333居多，次要文字用#666666居多，辅助文字用#999999居多
6.行高：行高可以根据字号来定，一般是字号的1.5-2倍居多
二、图片
网页里面第二大重要元素就是图片，尤其是电商类和专题类网页，图片完全符合人类的懒人阅读法，能做到搭眼一看就能知道表达的主题是什么或者产品是什么，这是文字所不能匹敌的，并且一个网页美不美，全靠图片支撑，关于图片的建议如下：
1.主次：也就是要大小混排，就连最简单的电商列表页，还要有侧边栏或者底部推荐产品的不同尺寸产品图来陪衬，这样的目的是避免浏览乏味，中和视觉.
2.大小：有的广告图会比较大来增强视觉冲击力，尤其是专题页头图，建议不要超过一屏，不同分辨率的电脑一屏的尺寸会有所不同，一般800px上下最常见。
三、图标
网页是绝对少不了图标的点缀装饰的，只有文字会干巴巴的，那对于图标就比较简单了，注意如下几点：
1.图标要统一大小，统一材质，统一视角，统一颜色，统一风格，比如用线条风就整个全部用线条风，例如下面两组风格就不同
2.图标不易过大，一般图标放到标题旁边的居多，那图标的尺寸跟旁边文字字号一样就可以了，如果比较大情况下，尽量对齐，比如居中对齐，顶对齐，底对齐等，如下：
四、边框
在网页里，除了强调和交互的时候边框凸显当前效果以外，边框大部分的作用只是起到分割模块和排版整齐的作用，所以边框要淡化，如果颜色过重、线条过粗或者边框过多会给人视觉效果差，感觉满屏的线条，而忽略了网页的主体，主要注意几点：
1.宽度：边框宽度1px即可
2.颜色：边框颜色一般#cccccc居多，或者更浅一点的颜色也可以
3.重复：同一个模块里面，如果已经有背景颜色或者边框的存在，也就是说排版已经明显整齐，就不要重叠使用边框
4.距离：有边框的时候，内容要跟边框分离一点，也就是内外边距要有
五、间距
网页里面设置间距就像是写文章要有标点符号一样，要让人有喘息的时间，而间距的设置要根据模块的大小来设置，就像是语句之间逗号，段落之间句号一样，比如大模块间的间距大于小模块间的间距，这样还能体现出主次关系，注意几点：
1.太小不好：整个网页间距如果全部都太小，给你很拥挤的感受，看起来很累，偶尔个别特殊排版的模块间距小还好一些，例如下方，图片和图片紧贴，但是文字和边缘是有坚决的，也就是说图片没有了外边距，但是有内边距：
2.太大不好：如果模块和模块之间相隔很远，会导致页面内容不充实，空洞，缺少继续往下看的欲望，所以一般情况下10px到30px的间距居多。
六、配色
网页设计也是设计，既然是设计，就离不开颜色的搭配，而西安网页设计的配色跟其他类似，既不能太花哨也不能太单调。
1.种类：控制在三种之内，最少得有一个主色调，主色调从哪里来呢？可以根据网页内容来定合适的，也可以用logo色来做主色调，也可以选择相近色或者撞色来做辅助色，其他可以黑白灰百搭色代替，专题页可适当放开。
2.明度饱和度：除了很小范围的强调或者交互可以适当选择颜色饱和度高一点的，其他情况尤其是大片的背景色的时候尽量少用饱和度太高的，看久了刺眼，可以降低饱和度和调整明度，专题页可适当放开。
七、排版
网页的排版就像是一名导游，让游客能有目的性的或者条理性的往下游览，所以排版必须条理清晰，无非做到以下两点就可以
1.整齐：对于普通网页，只要做到整齐，哪怕你的设计不会很个性很出众，但一定是一个不让人讨厌的稿子，其中里面的间距统一，主次要有，例如下面：整体是顶对齐底对其，间距统一，所以比较条例：
2.乱中有序：对于专题性质的网页，可能设计稍显夸张，那就要乱中有序，比如以序列号、标题、线条等作为引导。
