原则一风格
网页设计师在写 UI文案时，文风越是接近网站或 APP整体的语言风格，就越融入整体，也就让用户的阅读和使用越没障碍。
写作时可以参照当前网站或 APP的文案风格，尽量抹去个人的写作癖好，与整体风格统一。需要注意的是，一旦确定的写作风格就应一直延续下去，除非有特殊情况或颠覆性的改版。
原则二直接
文案应直接，单刀直入，最大限度的降低用户的理解负担。间接、暧昧模糊的说法，生僻和过于“文雅”的用词，都应尽量避免，因为文案只是沟通的工具，只有最有效的传递信息才是它的任务。复杂的修辞和句式、“只可意会”的深刻寓意，都是不需要的。
简单来讲，就是大白话，使用日常常用词，平铺直叙。
以形容词来说，“肯定的表达”比“否定的否定”更直接，比如：“验证码错误”优于“验证码不正确”。
原则三人称
人称的选择，体现了网页设计师是如何看待用户的。一般来说，网页设计师会把用户当作一个虚拟的第三方，描述他们时往往是“用户”、“他们”，然而 UI界面是以界面为媒介、与用户的直接对话，是和一个真实人类面对面的沟通。在现实生活中，会称面前的人为“你”“您”，那在界面中也应称用户为“你”“您”，而不应使用第三人称“用户”“他们”。
使用第二人称，体现了与用户的近距离感，让 UI界面成为一个拟人的人格，能够让用户沉浸在模拟真实对话的情境中，更有利于我们指引和鼓励用户操作。
比如，“当您投资成功时，我们会发送短信提示”优于“当用户投资成功时，证券网会发送短信提示”。
原则四主动语态
既然 UI界面始终以用户为中心，UI文案就始终以用户为主体来写作。相对于使用宾语作为主语的被动态，用户作为主语的主动态，与用户直接相关联，能调动其情绪，更能让用户直接、毫无负担的接受信息。
比如：“您已修改此设置”(用户作为主语的主动态)优于“此设置已被您修改”(宾语作为主语的被动态)。
原则五动词
为了促使用户执行操作，多用及物动词，少用不及物动词和名词。及物动词，简单来说，就是那些必须有宾语跟随的动词，像“解锁”的“解”，“锁”是跟随“解”的宾语，动词“解”必须与宾语“锁”同时出现，才能保证意思的完整，此处的“解”就是及物动词。
及物动词能从行动者(用户)的角度出发，“动宾”结构让用户直接代入自己作为主语，从而促使用户执行操作。当我们希望用户做某些操作时，可以有意识地使用及物动词。
比如，当“修改”是重点时：
“请修改验证码”(及物动词)优于“请对验证码进行修改”(不及物动词)，更优于“请进行验证码的修改”(名词)。
原则六积极
用积极的用词，能鼓励用户去做给他带来好处的操作，在情感上用户也更愿意顺从积极的指令。
比如：“为了顺利投资，请您进行以下操作”优于“为防止投资失败，请您进行以下操作”。
但有例外：
起报错、提醒或警示作用时，消极用词能更直接的点明重点，比如：“验证码错误”优于“验证码不正确”。
原则七选词
有时会遇到这个问题：相同含义的两个词，该用哪一个?在面对这类选词问题时，首要原则是：统一性。
若是频繁出现的词汇，可直接采用曾用过的词，可以保证整体的统一性，还能防止用词偏差;若是新词，应与整体用词风格统一。
与主流用词和行业术语统一
每个领域都有自己的专有词汇，在考虑用户理解力的基础上，采用主流词汇和术语，能保证用词的准确性。
与目标用户的语言统一
使用用户语言，就是在了解用户的基础上，用用户常用的语言来写 UI文案，从而让用户迅速理解。多了解目标用户的年龄层、职业、使用偏好等各种特征，可以了解用户语言。
原则八“先说目的”法则
当我们希望用户进行一个操作，而这个操作会花费他们一些时间、很可能他们不愿意去做的时候，先说明操作的目的和重要性，能促使用户更愿意去执行。这就是“先说结论”法则。
比如，“为了让您的账户更安全，请设置手势密码”，如果此处不提目的，直接指示“请设置手势密码”，用户在不了解这个新功能时就会产生疑虑，不明白这个操作的意图，甚至产生不信任感，最后无视这个指令。“先说目的”可以直接说明重要性，让用户欣然接受。
当然，这里的“目的”应是从用户角度出发，会让用户觉得这个操作对他是有意义的，而不是从系统和网页设计师自己的私利角度，否则用户也不会执行(即使真实目的是从系统角度考虑，也可以转化为是“为了用户”的写法)。
原则九“问题-方案”法则
对于写提示性文案，有个小窍门，在点明问题之后，直接写用户需要做的判断和操作。这就是“问题-方案”法则：
“说明问题(理由/原因)—给出解决方案(需要用户去做某个操作)”
比如：验证码错误，请重新输入。
原则十“问题-后果-方案”法则
当我们需要用户在方案 A和 B之间做一个选择，而我们希望用户选择方案 B(因为 A有很严重的后果 C)的时候，往往会使用这个法则。一般是写提出问题，即如果采用方案 A会有后果 C，然后建议采用方案 B，最后把问题抛给用户自己选择。
比如：当方案 A-“退出编辑”，后果 C-“无法保存所输入的信息”，方案 B-“先去保存”，文案如下：
退出编辑则无法保存所输入的信息，建议您先去保存，您确认要立即退出吗?
原则十一“最简”原则
在涵义不变的情况下，优先选择最简洁、字数最少的内容;去掉与用户无关、对用户无用的文字;完整而准确，每一个字都要有意义。这就是“最简”原则。
事实上，要始终做到“最简”是很难的，一般来说写作都是“加法”，把想要表达的信息不断累加，最后整理一下使语句通顺，就呈现给用户了。
但是从用户的角度考虑，是否真的需要全部信息呢?再仔细推敲下，是否可以省略一些不需要用户了解、但也完全不影响操作的文字呢?是否可以拆分文字成几块，改变文字的顺序，或者依据流程的发展，只在最恰当的地方，放上用户需要的文字?
只将自己想表达的意思，一股脑的扔给用户，并不是好的 UI文案，也不符合用户体验。怎样做“减法”来达到“最简”，需要针对不同情况，具体情况具体分析。
不过，对于初学者而言，在保持语义不变的基础上删减字数、或替换成更简洁的句式，是个不错的开始。
原则十二有时也需要委婉
文案有时候并不是为了某个目的和功能，而是为了隐藏不能明说的原因和问题，或者只为了安抚用户情感，这时文案就不能那么生硬直接。以委婉或者暧昧的文字来向用户说明，暗示或引导用户从我们希望的角度去理解。
比如，“支付需要一些时间，请稍候”优于“支付尚未成功”;
“抱歉，出现了一些问题，请稍后刷新重试”优于“系统错误”。
原则十三禁区
有一些文案问题，会严重影响用户的理解，造成阻碍，是绝对不可以出现的。比如：
–英文或其他外语，对用户的理解负担很大，除非必要，一般不会在中文用户界面使用外语，若使用也要考虑是否要标注中文解释;
–“banner”“后端开发”等内部术语，我们这些行话不该给用户看到，若真有必要提及，应使用其他用户能理解的词替代;
–设计稿暂定文字，比如“X天后”“须 PM确认”，当然出现这种情况概率极其小
简言之，网页设计写文案的任务就是将信息迅速传达给用户，最大程度上降低用户的理解负担，让用户毫无阻碍、心情愉悦的完成操作，所以任何生硬、模糊、繁冗、意味不明、拐弯抹角的用词和句式，都应该被摒弃。只有简洁、直接、清晰，才是用户最想看到的 UI文案。用户不需要思考、立刻去做，文案就达成了自己的使命。
如今移动互联网随着3G的普及，越来越火爆，更多需求跟随而来！APP应用市场和APP应用数量成倍成倍的增长！从而给移动互联网带来新的挑战！
移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone/ iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
一、了解什么是”自适应网页设计”
自从2010年，Ethan Marcotte提出了“自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
mediaqueri.es上面有更多这样的例子。
这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、需要允许网页宽度自动调整
“自适应网页设计”到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行 viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用 css3-mediaqueries.js。
三、在进行设计的时候不能使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比宽度：
width: xx%;
或者
width:auto;
四、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body{
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1{
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small{
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
五、流动布局（fluid grid）或瀑布流
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main{
float: right;
width: 70%;
}
.leftBar{
float: left;
width: 25%;
}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
六、选择性加载CSS
“自适应网页设计”的核心，就是CSS3引入的 Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
@import url(“tinyScreen.css”) screen and(max-device-width: 400px);
七、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
@media screen and(max-device-width: 400px){
.column{
float: none;
width:auto;
}
#sidebar{
display:none;
}
}
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
八、图片的自适应（fluid image）
除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。
这只要一行CSS代码：
img{ max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object{ max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
img{ width: 100%;}
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img{-ms-interpolation-mode: bicubic;}
或者，Ethan Marcotte的 imgSizer.js。
addLoadEvent(function(){
var imgs= document.getElementByIdx_x(“content”).getElementsByTagName_r(“img”);
imgSizer.collate(imgs);
});
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
只要遵循这8条设计准则，我相信你们可以很快的设计出自适应的网页出来
如今移动互联网随着3G的普及，越来越火爆，更多需求跟随而来！APP应用市场和APP应用数量成倍成倍的增长！从而给移动互联网带来新的挑战！
移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone/ iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
一、了解什么是”自适应网页设计”
自从2010年，Ethan Marcotte提出了“自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
mediaqueri.es上面有更多这样的例子。
这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、需要允许网页宽度自动调整
“自适应网页设计”到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行 viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用 css3-mediaqueries.js。
三、在进行设计的时候不能使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比宽度：
width: xx%;
或者
width:auto;
四、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body{
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1{
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small{
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
五、流动布局（fluid grid）或瀑布流
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main{
float: right;
width: 70%;
}
.leftBar{
float: left;
width: 25%;
}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
六、选择性加载CSS
“自适应网页设计”的核心，就是CSS3引入的 Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
@import url(“tinyScreen.css”) screen and(max-device-width: 400px);
七、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
@media screen and(max-device-width: 400px){
.column{
float: none;
width:auto;
}
#sidebar{
display:none;
}
}
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
八、图片的自适应（fluid image）
除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。
这只要一行CSS代码：
img{ max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object{ max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
img{ width: 100%;}
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img{-ms-interpolation-mode: bicubic;}
或者，Ethan Marcotte的 imgSizer.js。
addLoadEvent(function(){
var imgs= document.getElementByIdx_x(“content”).getElementsByTagName_r(“img”);
imgSizer.collate(imgs);
});
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
只要遵循这8条设计准则，我相信你们可以很快的设计出自适应的网页出来
转载请注明：片头模版 » 网页设计范例(网页设计的文案)
