海淘科技为你提供关于，手机也没，按设计需要注意事项，文中阐述了，手机网页设计中哪些细节需注意，手机版网页设计原则，手机版网页设计注意事项。详情请看下文。
前一段时间在企业管理界流行一句格言叫”细节决定成败”。企业管理当然不是我们这里要讨论的主题，但是，把这句话放在网页设计当中的确是颠扑不破的 真理。我们的眼睛和感觉总是非常敏锐的，即使是完全不了解网页设计技术的人也能够从一堆拙劣的设计作品当中挑选出那一个优秀的设计作品。虽然他说不出来为什么这件东西比那些都好，但是直觉会告诉他他自己喜欢哪一个。如果别人向我们问起为什么这件作品要优于其它呢?我们的回答是”很大一部分原因是因为优秀的设计作品总是充满了丰富的细节。”在这篇文章里，我们就从技术的角度出发，以PremiumPixels上的Redux WordPress主题设计作品为例，来总结一下在网页设计中到底是哪些细节让优秀的作品脱颖而出。
1像素的衬线
在页面的顶端，你能看到一条1个像素比背景颜色略浅的水平线将纯色的背景和带有材质的背景分隔开，如下图：
而如果没有这条衬线会是怎样的一个效果，我们也来看看。
实际上，网页设计中，使用到衬线的例子非常普遍。例如下面的这个例子中，你会在包围着”The Dorchester Hotel”文字的黑色边框的顶部向下1个像素发现一条灰色的衬线。而在下面这个设计好的按钮中，绿色和黄色边框顶部向下1个像素也能看到一条颜色更浅的线条，而这条衬线制作的更为精细，因为它应用了蒙版，从顶部向 下你会发现这条衬线渐渐隐去了。另外，在”Add To Cart”和”$9.99″两个文字之间的分隔线实际上是两条线，左边颜色深一些，右边颜色浅一些，这样就能产生线条的凹陷效果。
之所以要使用衬线，是为了体现物体在2D效果上的立体感，而立体感的体现必须要有阴影和高光。阴影我们通常使用图层样式来实现，而高光效果的实现， 最常用的技巧之一就是使用衬线了。上面的三
个例子的衬线都在物体的顶部，说明光线是从上向下照射的，高光处于物体的顶部。而如果光下从下向上照射的话，高 光就应该在底部了，那我们就应该将衬线放置于物体的下方。所以在衬线的使用上，我们始终要问自己这几个问题，”我在这里使用了衬线，那么光源在哪里?” “如果光源在这里的话，阴影应该出现在什么位置?”完成了这两个回答，设计出来的物体的立体感才能更加真实。
Redux主题真是解释背景材质的绝佳案例。因为在整个页面中，从上至下使用了三种不同的材质作为页面的背景。上面的深蓝色部分应用的是坑坑洼洼凹 凸不平的材质，中间黑色部分应用的是纺织布的
材质，而底部应用的是杂色的材质。当然，这三种材质都是非常细微的，但是效果确是非常出众的。实际上，过于醒 目和复杂的背景材质不仅不能为设计增色，反而由于分散读者的注意力而是整个设计品质降低。所以最好的策略就是让你的背景材质保持细微而柔和。
是不是下面图片上的文字框有一种鼓出来的感觉，对，那正是渐变带给我们的效果。试想一下，如果单单是白色的文字框放置于页面上，一定没有添加了渐变让我们感受到更多的趣味性。另外，在页面的左右边缘部分也应到了从纯色背景到材质背景的渐变，这样会让深蓝色凹凸不平的背景材质出现的更加自然。在渐变的使用中需要注意的是， 除某些特殊情况外，不要使用太过强的渐变，不论是色向上还是亮度上还是饱和度上都不可跨度太过强。因为这样强烈的过度根本不带真实感，给人一种很不舒适的 感觉。
注意观察Redux暗色背景上的浅色文字，你会发现它们都被添加上了投影效果。现在我们可以使用CSS3中的text-shadow属性来完成文字 的投影设计，代替了在Photoshop中完成此项工作。而且使用CSS3来给文字添加阴影自由度更高，在浏览器支持的情况下，你可以给任意文字添加你想 要的阴影效果。当然IE8以下版本的浏览器是不支持此项属性的，这是我们在设计中需要注意的地方。另外，和前面提到的其它设计细节一样，阴影的效果也要足 够柔和，不可过于强烈，不然很容易让整个设计看起来有一种脏脏的感觉，显得不够精致。
宽度要求
手机页面的宽度最好控制在240px以内，因为这样可以在不移动屏幕的情况下进行一系列的操作。我们公司的这个项目用了一张背景图片，大小为240*420。这样其实也有一个坏处，我必须让每个页面的高度控制在420里面，不然超出的话，就很难看了。
js的使用
无论是普通的手机或者智能机，似乎都不太支持js。类似和"alert()"都不支持。另外，手机对“”的样式支持不是太好，同样的代码在浏览器上和手机上有一定的宽度差距，在给定宽度的情况下。所以我的建议是能不用按 钮，就不用按钮，可以用文字的超链接形式代替，或者也可以考虑使用小图标。
列表的使用
列表页面最好用table，不要用ul li，或者p+空格，一方面是排版，一方面是如果某一列的元素过长，可以使用“table tr td{word-break:break-all;}”，而另外两种方案只能截取字符串了，当然从我的角度出发，截取字符串可能是一个不错的选择，因为我 的那些页面高度都定死了。
与计算机共享同一套网页
这里的与计算机共享网页，指的是计算机用的网页完全不经修改、就直接给手机浏览。前提是网站本身的元素要够简单、版面不能太复杂。
制作手机专用网页
这个做法在90年代非常盛行，当时电信业者的GPRS/WAP广告打得正火热，手机能浏览的网站都是WAP网站，也就是用WML编写的手机网，WML是很简陋的HTML，内容通常只有文字跟选单。用这个方法的好处是，WAP可以在所有的手机上正常显示，不过要同时维护手机版和桌面版的网页会很困难，使得信息常常无法同步。
用浏览器来判断装置
Opera有桌面版和手机版，同样的Chrome、Safari、Firefox也是。有的网站会使用浏览器嗅探机制(browsersniffing) 来判断你是用哪一种、什么装置的浏览器，不过browsersniffing的设定很繁琐，而且经常出差错。最快的方法是在网页上加入各种版本的连结，让浏览者可以自由选择格式。
开发复合型网站
复合版网站就是能同时给桌面和手机使用的网站，它跟刚谈到的「与计算机共享」并不一样，复合版网站虽然内容相同，但是它会根据屏幕大小来呈现版面。要做复杂 合型网站其实并不难，只要用CSS与HTML标签来调整就行，比如HTML的viewport以及CSS的media queries。
图片的使用：大图片的存在还是有一定的必要，比如说像导航图，会给人一种炫丽的感觉，但是图片也不能过大，一定要控制在10K以内。手机网页的细节可能远没有普通网页 制作来的多，至少它只要在手机页面里面通过就行了，不用什么IE6 7 8 或者其他的一些浏览器，但是要把它做得好看，还是需要花一定的心思的。
简化内容
一般的手机、平板电脑等行动装置，不易容纳下适合於个人电脑的庞大网页资讯，因此手机行动网页的首要重点，就是减少内容，不论是图片、文字或是影音。请记住一个重点：只要将最重要的资讯放入行动版网页，就是最主要的準则，重要性较低的、读取需要时间的内容，则可以透过超连结，连回到正常的官方网站。行动网站必须十分的重视内容简化这一点，一个塞满内容的行动网站无法获得网路客户的青睞。
导览功能大不同
手机网页与跟一般的网页不同的，在於当阅读文章到最后时，要回到最前头是麻烦的，因此设计网页的企业，除了减少卷动画面的机会外，也会加强导览的功能，让网页变得更容易於行动装置上阅读。导览设计的重点有：
减少文字输入部份
手机大多没有实体的键盘，或仅只有12键的电话输入功能，因此输入文字上会比起使用键盘麻烦得多。因此，减少使用者输入文字的机会，例如：个人的帐号、密码、搜寻内文、使用编辑器...等，都是行动网页要尽力避免的。设计的重点如下：
手机的规格眾多，有的解析度為320*240，较新的则為800*480，而次世代的手机更有720P的解析度，因此行动网站如何满足眾多的需求?
一般来说有两种作法，一种是建立不同解析度的行动网站，由用户於手机行动入口网页自行选择，以Facebook的例子来说，mobile.facebook.com是适用於大部分的智慧手机与平板电脑，而0.facebook.com则是用於非智慧手机或是网路连线速度极慢的区域;另一种做法则是透过手机的语法，例如CSS语法中的Viewpoint就能够根据手机的解析度加以决定瀏览画面的宽度。
利用手机的天生优势
手机有著许多传统电脑所没有拥有的优势，其中最大的优势就是「行动力」，因此手机版网页应该要特别发扬这些特色，让行动网页具有一般网页更多的优势。举例来说：
近年已经成为行动条码的QR Code设计，也应该纳入行动网页的设计元素在内。
文件下载：2016年手机网页设计需注意事项
