去年，我们分享了《40个良好用户界面Tips》，对设计师来说确实很有帮助，今年，Goodui.org已经更新至71条，这些原则都是由Goodui官方精心整理，认为这些都是非常重要的设计要点，所以对于设计师来说，建议学习一下。
01 尝试使用一列的布局替代多列布局
02 给用户一些小的利益，别看上去那么赤裸裸
03 合并相似的功能
04 尝试展示来自用户的赞扬，而不是自我表扬
05 重复核心行动点
06 统一视觉规范，提升可识别性
07 尝试使用推荐的口吻，而不是让用户感觉面对一台冷冰冰的机器
08 给用户吃「后悔药」的机会
09 告诉用户产品适用的人群，而不是人人都通用
10 将文案写得更加的直接，而不是一堆废话
11 增强主行动点的视觉冲击力，提升它在页面中的可对比性
12 让用户知道你从哪儿来更易于拉近与用户的关系
13 将表单做的简单点，确保用户在抓狂之前能进入下一步
14 尽量将用户需要选择的信息展示出来而不是藏起来
15 页面的排版需要考虑用户是否会漏掉底部信息
16 如果页面的底部有需要关注的行动点，别让文中过多的外链带走了用户
17 确保用户知道自己目前的状态
18 将利益点融合在行动点中，增强用户的点击欲望
19 将行动点与当前信息结合起来
20 将简要的表单合并到页面中，减少调整页面带来的用户流失
21 适当的增加延迟动效，让用户感知到页面的变化
22 让新用户从尝试产品入手，而不是一来就面对冷冰冰的注册表单
23 减少使用线框，这会过多的吸引用户注意力，而且会让页面看上去透不过气
24 给用户推销你能给他带来的利益，而不是功能
25 一定要注意0结果页面的设计，这也是引导用户的好地方
26 给用户选择退出的权利，特别是邮件订阅
27 注意界面元素的一致性，降低用户学习成本
28 给下拉框增加一些预设值，降低用户填写成本
29 延续用户日常的使用习惯，而不是重新创造
30 尝试告诉用做些事情降低自己的损失，而不是提升收益
31 提升页面的视觉层次，增强可阅读性
32 将同类的操作合并在一起，降低用户的认知成本
33 表单及时校验，而不是统一提交后在告诉用户填错了
34 尝试将表单输入变得更加宽容，让用户的填写更加简单
35 通过时间增强紧迫感
36 提供用户可预见性的操作，降低用户的心理成本
37 尽可能的帮助用户选择，而不是让用户想破脑袋
38 尽可能将操作区域放大，降低用户操作成本
39 页面加载速度很重要，尽可能让用户感受到你的网站速度很快
40 如果可以，增加键盘快捷键，提升操作效率
41 尝试通过对比来让用户感知到性价比
42 尝试对进度条进行「设计」来降低用户等待的焦虑
43 根据用户选择逐步展示信息，降低无效信息对用户的干扰
44 有时候较小的承诺比「夸海口」会更容易让用户信服
45 尝试将提示信息弱化，减少对用户操作的干扰
46 尽量通过系统的功能来简化用户的操作
47 用文本配合图标来降低用户的认知成本
48 用更自然的语言代替冷冰冰的机器
49 放出一些摘要信息来帮助用户识别是否需要进一步了解
50 在关键的页面增加用户权益信息，增强用户进一步操作的信心
51 将价格进行换算，让用户感觉这很便宜
52 记得在成功页面感谢用户
53 将数字转化成易于用户阅读的形式，而不是冷冰冰的机器语言
54 告诉用户选择的权利和自由「诱惑力」
55 尝试让语言更具「诱惑力」
56 通过设计引导用户的注意力
57 通过友好的对比来展示产品，为用户做决定提供帮助
58 通过任务机制来提升用户的满足感
59 让用户了解接下来将要发生什么事情
60 尝试用更幽默一些的语言文案
61 任何操作之后都要给出反馈，让用户知道操作已经生效
62 注意动效的真实使用情况（Amazon 的类目菜单就是一个很好的例子）
63 注意排版的，不要让信息过于拥挤
64 尝试用讲故事的方式来传递信息，增强用户的代入感
65 尽量给用户展示真实的信息，不要欺骗
66 随着用户的不断熟悉简化界面
67 试着用用户的口吻展示信息
68 在表单中增加一些提示信息，减少错误的几率
69 用简单的文案传递核心关注的信息，少一些废话
70 尝试使用响应式布局
71 视觉表达要清晰，而不是模棱两可
这71条设计原则虽然针对 Web 设计，但有些部分在移动产品设计中同样有效。翻译过程只保留了图片和标题，更多详细内容可以访问 GoodUI 官网：
http://goodui.org/
Apple’s newest devices feature the Retina Display, a screen that packs double as many pixels into the same space as older devices. For designers this immediately brings up the question, “What can I do to make my content look outstanding on these new iPads and iPhones?”. First there are a few tough questions to consider, but then this guide will help you get started making your websites and web apps look amazingly sharp with Retina images!
Things to Consider When Adding Retina Images
The main issue with adding retina images is that the images are double as large and will take up extra bandwidth (this won’t be an issue for actual iOS apps, but this guide is covering web sites & web apps only). If your site is mostly used on-the-go over a 3G network it may not be wise to make all your graphics high-definition, but maybe choose only a select few important images. If you’re creating something that will be used more often on a WI-FI connection or have an application that is deserving of the extra wait for hi-res graphics these steps below will help you target only hi-res capable devices.
Simple Retina Images
The basic concept of a Retina image is that your taking a larger image, with double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and setting the image to fill half of that space (100 x 100 pixels). This can be done manually by setting the height and width in HTML to half the size of your image file.
<img src="my200x200image.jpg" width="100" height="100">
If you’d like to do something more advanced keep reading below for how you can apply this technique using scripting.
Creating Retina Icons for Your Website
When users add your website or web app to their homescreen it will be represented by an icon. These sizes for regular and Retina icons (from Apple) are as follows:
| iPhone | 57 x 57 |
|---|---|
| Retina iPhone | 114 x 114 |
| iPad | 72 x 72 |
| Retina iPad | 144 x 144 |
For each of these images you create you can link them in the head of your document like this (if you want the device to add the round corners remove -precomposed):
<link href="touch-icon-iphone.png" rel="apple-touch-icon-precomposed" />
<link href="touch-icon-ipad.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
<link href="touch-icon-iphone4.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
<link href="touch-icon-ipad3.png" rel="apple-touch-icon-precomposed" sizes="144x144" />
If the correct size isn’t specified the device will use the smallest icon that is larger than the recommended size (i.e. if you left out the 114px the iPhone 4 would use the 144px icon).
Retina Background Images
Background images that are specified in your CSS can be swapped out using media queries. You’ll first want to generate two versions of each image. For example ‘bgPattern.png’ at 100px x 100px and ‘bgPattern@2x.png’ at 200px x 200px. It will be useful to have a standard naming convention such as adding @2x for these retina images. To add the new @2x image to your site simply add in the media query below (You can add any additional styles that have background images within the braces of the same media query):
.repeatingPattern {
background: url(../images/bgPattern.png) repeat;
background-size: 100px 100px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.repeatingPattern {
background: url(../images/bgPattern@2x.png) repeat;
}
}
JavaScript for Retina Image Replacement
For your retina images that aren’t backgrounds the best option seems to be either creating graphics with CSS, using SVG, or replacing your images with JavaScript. Just like the background images, you’ll want to create a normal image and one ‘@2x’ image. Then with JavaScript you can detect if the pixel ratio of the browser is 2x, just like you did with the media query:
if (window.devicePixelRatio == 2) {
//Replace your img src with the new retina image
}
If you’re using jQuery you could quickly replace all your images like this very basic example below. It’s a good idea to add a class to identify the images with hi-res versions so you don’t replace any others by mistake. I’ve added a class=”hires” for this example. Also make sure you have the standard (non-retina) image height and width set in the HTML:
<img class="hires" alt="" src="search.png" width="100" height="100" />
<script type="text/javascript">
$(function () {
if (window.devicePixelRatio == 2) {
var images = $("img.hires");
// loop through the images and make them hi-res
for(var i = 0; i < images.length; i++) {
// create new image name
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length - 4);
imageName += "@2x" + imageType;
//rename image
images[i].src = imageName;
}
}
});
</script>
Server-Side Retina Images
If you’d like to implement a server-side retina image solution, I recommend checking out Jeremy Worboys’ Retina Images (which he also posted in the comments below). His solution uses PHP code to determine which image should be served. The benefit of this solution is that it doesn’t have to replace the small image with the retina one so you’re using less bandwidth, especially if you have lots of images that you’re replacing.
Website Optimization for Retina Displays
If you’re looking for additional information on creating Retina images, I’ve recently had a short book published called Website Optimization for Retina Displays that covers a range of related topics. It contains some of what is above, but also includes samples for many different situations for adding Retina images. It explains the basics of creating Retina images, backgrounds, sprites, and borders. Then it talks about using media queries, creating graphics with CSS, embedding fonts, creating app icons, and more tips for creating Retina websites.
xoyozo 曾经写过 简单实现在 ASP.NET 中执行 URL 重写，文中提到使用微软的 URLRewriter.dll 来配置实现 ASP.NET 的 URL 重写，并以此扩展为任意扩展名及目录的 URL 重写。本文在此基础上再次扩展，使之支持泛域名解析。
首先，您的网站必需放在独立服务器或 VPS 中，虚拟空间可能不支持泛解析。
进入域名控制面板，配置 A 记录：通配符（*）星号解析到网站所在的 IP。
根据前文配置 URL 重写。
<configuration> 节点下配置：
<RewriterConfig> <Rules> <RewriterRule> <LookFor>http://([a-zA-Z0-9-]+)\.域名/</LookFor> <SendTo>~/u.aspx?u=$1</SendTo> </RewriterRule> </Rules> </RewriterConfig>
使网页变灰色，只需要一句 css 代码：
html { filter: grayscale(1); }在 I10 / IE11 上的兼容方案需要 grayscale.js，参考此文：http://www.cnblogs.com/wangmeijian/p/4324693.html
CSS 背景图片变灰：https://stackoverflow.com/questions/16340159/greyscale-background-css-images
<INPUT onfocus="oRng=this.createTextRange();oRng.collapse(true);oRng.moveStart('character',3);oRng.select()" value=abcdefg type=text name=text1>
当焦点移至文本框时光标定位在位置3。
如果要直接定位在文本末尾，把上面的数字 3 改为 this.value.length 即可。
<div style="width: 120px; height: 50px; border: 1px solid blue; text-overflow: ellipsis; overflow: hidden;"> <nobr>就是比如有一行文字，很长，表格内一行显示不下.</nobr> </div>
自从有了IP数据库这种东西，QQ外挂的显示IP功能也随之而生，本人见识颇窄，是否还有其他应用不得而知，不过，IP数据库确实是个不错的东西。如今网络上最流行的IP数据库我想应该是纯真版的（说错了也不要扁我），迄今为止其IP记录条数已经接近30000，对于有些IP甚至能精确到楼层，不亦快哉。2004年4、5月间，正逢LumaQQ破土动工，为了加上这个人人都喜欢，但是好像人人都不知道为什么喜欢的显IP功能，我也采用了纯真版IP数据库，它的优点是记录多，查询速度快，它只用一个文件QQWry.dat就包含了所有记录，方便嵌入到其他程序中，也方便升级。
基本结构
QQWry.dat文件在结构上分为3块：文件头，记录区，索引区。一般我们要查找IP时，先在索引区查找记录偏移，然后再到记录区读出信息。由于记录区的记录是不定长的，所以直接在记录区中搜索是不可能的。由于记录数比较多，如果我们遍历索引区也会是有点慢的，一般来说，我们可以用二分查找法搜索索引区，其速度比遍历索引区快若干数量级。图1是QQWry.dat的文件结构图。
图1. QQWry.dat文件结构
要注意的是，QQWry.dat里面全部采用了little-endian字节序
一. 了解文件头
QQWry.dat的文件头只有8个字节，其结构非常简单，首四个字节是第一条索引的绝对偏移，后四个字节是最后一条索引的绝对偏移。
二. 了解记录区
每条IP记录都由国家和地区名组成，国家地区在这里并不是太确切，因为可能会查出来“清华大学计算机系”之类的，这里清华大学就成了国家名了，所以这个国家地区名和IP数据库制作的时候有关系。所以记录的格式有点像QName，有一个全局部分和局部部分组成，我们这里还是沿用国家名和地区名的说法。
于是我们想象着一条记录的格式应该是: [IP地址][国家名][地区名]，当然，这个没有什么问题，但是这只是最简单的情况。很显然，国家名和地区名可能会有很多的重复，如果每条记录都保存一个完整的名称拷贝是非常不理想的，所以我们就需要重定向以节省空间。所以为了得到一个国家名或者地区名，我们就有了两个可能：第一就是直接的字符串表示的国家名，第二就是一个4字节的结构，第一个字节表明了重定向的模式，后面3个字节是国家名或者地区名的实际偏移位置。对于国家名来说，情况还可能更复杂些，因为这样的重定向最多可能有两次。
那么什么是重定向模式？根据上面所说，一条记录的格式是[IP地址][国家记录][地区记录]，如果国家记录是重定向的话，那么地区记录是有可能没有的，于是就有了两种情况，我管他叫做模式1和模式2。我们对这些格式的情况举图说明：
图2. IP记录的最简单形式
图2表示了最简单的IP记录格式，我想没有什么可以解释的
图3. 重定向模式1
图3演示了重定向模式1的情况。我们看到在模式1的情况下，地区记录也跟着国家记录走了，在IP地址之后只剩下了国家记录的4字节，后面3个字节构成了一个指针，指向了实际的国家名，然后又跟着地址名。模式1的标识字节是0x01。
图4. 重定向模式2
图4演示了重定向模式2的情况。我们看到了在模式2的情况下（其标识字节是0x02），地区记录没有跟着国家记录走，因此在国家记录之后4个字节之后还是有地区记录。我想你已经明白了模式1和模式2的区别，即：模式1的国家记录后面不会再有地区记录，模式2的国家记录后会有地区记录。下面我们来看一下更复杂的情况。
图5. 混和情况1
图5演示了当国家记录为模式1的时候可能出现的更复杂情况，在这种情况下，重定向指向的位置仍然是个重定向，不过第二次重定向为模式2。大家不用担心，没有模式3了，这个重定向也最多只有两次，并且如果发生了第二次重定向，则其一定为模式2，而且这种情况只会发生在国家记录上，对于地区记录，模式1和模式2是一样的，地区记录也不会发生2次重定向。不过，这个图还可以更复杂，如图7：
图6. 混和情况2
图6是模式1下最复杂的混和情况，不过我想应该也很好理解，只不过地区记录也来重定向而已，有一点我要提醒你，如果重定向的地址是0，则表示未知的地区名。
所以我们总结如下：一条IP记录由[IP地址][国家记录][地区记录]组成，对于国家记录，可以有三种表示方式：字符串形式，重定向模式1和重定向模式2。对于地区记录，可以有两种表示方式：字符串形式和重定向，另外有一条规则：重定向模式1的国家记录后不能跟地区记录。按照这个总结，在这些方式中合理组合，就构成了IP记录的所有可能情况。
设计的理由
在我们继续去了解索引区的结构之前，我们先来了解一下为何记录区的结构要如此设计。我想你可能想到了答案：字符串重用。没错，在这种结构下，对于一个国家名和地区名，我只需要保存其一次就可以了。我们举例说明，为了表示方便，我们用小写字母代表IP记录，C表示国家名，A表示地区名：
有两条记录a(C1, A1), b(C2, A2)，如果C1 = C2, A1 = A2，那么我们就可以使用图3显示的结构来实现重用
有三条记录a(C1, A1), b(C2, A2), c(C3, A3)，如果C1 = C2, A2 = A3，现在我们想存储记录b，那么我们可以用图6的结构来实现重用
有两条记录a(C1, A1), b(C2, A2)，如果C1 = C2，现在我们想存储记录b，那么我们可以采用模式2表示C2，用字符串表示A2
你可以举出更多的情况，你也会发现在这种结构下，不同的字符串只需要存储一次。
了解索引区
在"了解文件头"部分，我们说明了文件头实际上是两个指针，分别指向了第一条索引和最后一条索引的绝对偏移。如图8所示：
图8. 文件头指向索引区图示
实在是很简单，不是吗？从文件头你就可以定位到索引区，然后你就可以开始搜索IP了！每条索引长度为7个字节，前4个字节是起始IP地址，后三个字节就指向了IP记录。这里有些概念需要说明一下，什么是起始IP，那么有没有结束IP？假设有这么一条记录：166.111.0.0 - 166.111.255.255，那么166.111.0.0就是起始IP，166.111.255.255就是结束IP，结束IP就是IP记录中的那头4个字节，这下你应该就清楚了吧。于是乎，每条索引配合一条记录，构成了一个IP范围，如果你要查找166.111.138.138所在的位置，你就会发现166.111.138.138落在了166.111.0.0- 166.111.255.255 这个范围内，那么你就可以顺着这条索引去读取国家和地区名了。那么我们给出一个最详细的图解吧：
图9. 文件详细结构
现在一切都清楚了是不是？也许还有一点你不清楚，QQWry.dat的版本信息存在哪里呢？ 答案是：最后一条IP记录实际上就是版本信息，最后一条记录显示出来就是这样：255.255.255.0255.255.255.255 纯真网络 2004年6月25日IP数据。OK，到现在你应该全部清楚了。
Demo
下一步：我给出一个读取IP记录的程序片断，此片断摘录自LumaQQ源文件edu.tsinghua.lumaqq.IPSeeker.java，如果你有兴趣，可以下载源代码详细看看。
/** *//**
* 给定一个ip国家地区记录的偏移，返回一个IPLocation结构
* @param offset 国家记录的起始偏移
* @return IPLocation对象
*/
private IPLocation getIPLocation(long offset) {
try {
// 跳过4字节ip
ipFile.seek(offset + 4);
// 读取第一个字节判断是否标志字节
byte b = ipFile.readByte();
if(b == REDIRECT_MODE_1) {
// 读取国家偏移
long countryOffset = readLong3();
// 跳转至偏移处
ipFile.seek(countryOffset);
// 再检查一次标志字节，因为这个时候这个地方仍然可能是个重定向
b = ipFile.readByte();
if(b == REDIRECT_MODE_2) {
loc.country = readString(readLong3());
ipFile.seek(countryOffset + 4);
} else
loc.country = readString(countryOffset);
// 读取地区标志
loc.area = readArea(ipFile.getFilePointer());
} else if(b == REDIRECT_MODE_2) {
loc.country = readString(readLong3());
loc.area = readArea(offset + 8);
} else {
loc.country = readString(ipFile.getFilePointer() - 1);
loc.area = readArea(ipFile.getFilePointer());
}
return loc;
} catch (IOException e) {
return null;
}
}
/** *//**
* 从offset偏移开始解析后面的字节，读出一个地区名
* @param offset 地区记录的起始偏移
* @return 地区名字符串
* @throws IOException 地区名字符串
*/
private String readArea(long offset) throws IOException {
ipFile.seek(offset);
byte b = ipFile.readByte();
if(b == REDIRECT_MODE_1 || b == REDIRECT_MODE_2) {
long areaOffset = readLong3(offset + 1);
if(areaOffset == 0)
return LumaQQ.getString("unknown.area");
else
return readString(areaOffset);
} else
return readString(offset);
}
/** *//**
* 从offset位置读取3个字节为一个long，因为java为big-endian格式，所以没办法
* 用了这么一个函数来做转换
* @param offset 整数的起始偏移
* @return 读取的long值，返回-1表示读取文件失败
*/
private long readLong3(long offset) {
long ret = 0;
try {
ipFile.seek(offset);
ipFile.readFully(b3);
ret |= (b3[0] & 0xFF);
ret |= ((b3[1] << 8) & 0xFF00);
ret |= ((b3[2] << 16) & 0xFF0000);
return ret;
} catch (IOException e) {
return -1;
}
}
/** *//**
* 从当前位置读取3个字节转换成long
* @return 读取的long值，返回-1表示读取文件失败
*/
private long readLong3() {
long ret = 0;
try {
ipFile.readFully(b3);
ret |= (b3[0] & 0xFF);
ret |= ((b3[1] << 8) & 0xFF00);
ret |= ((b3[2] << 16) & 0xFF0000);
return ret;
} catch (IOException e) {
return -1;
}
}
/** *//**
* 从offset偏移处读取一个以0结束的字符串
* @param offset 字符串起始偏移
* @return 读取的字符串，出错返回空字符串
*/
private String readString(long offset) {
try {
ipFile.seek(offset);
int i;
for(i = 0, buf[i] = ipFile.readByte(); buf[i] != 0; buf[++i] = ipFile.readByte());
if(i != 0)
return Utils.getString(buf, 0, i, "GBK");
} catch (IOException e) {
log.error(e.getMessage());
}
return "";
}代码并不复杂，getIPLocation是主要方法，它检查国家记录格式，并针对字符串形式，模式1，模式2采用不同的代码，readArea则相对简单，因为只有字符串和重定向两种情况需要处理。
总结
纯真IP数据库的结构使得查找IP简单迅速，不过你想要编辑它却是比较麻烦的，我想应该需要专门的工具来生成QQWry.dat文件，由于其文件格式的限制，你要直接添加IP记录就不容易了。不过，能查到IP已经很开心了，希望纯真记录越来越多～。
LumaQQ is a Java QQ client which has a reusablepure Java core and SWT-based GUI
string chkCode = string.Empty;
//颜色列表，用于验证码、噪线、噪点
//Color[] color ={Color.White, Color.Yellow, Color.LightBlue, Color.LightGreen,
// Color.Orange, Color.LightCyan, Color.LightPink,
// Color.LightSalmon };
Color[] color = {Color.Black, Color.Blue, Color.Red, Color.DarkViolet,
Color.Chocolate, Color.DarkGreen, Color.DeepSkyBlue,
Color.DarkCyan };
//字体列表，用于验证码
string[] font = {"Times New Roman", "MS Mincho", "Book Antiqua", "Gungsuh",
"PMingLiU", "Impact" };
//验证码的字符集，去掉了一些容易混淆的字符
char[] character ={'2', '3', '4', '5', '6', '8', '9', 'A', 'B', 'C', 'D', 'E',
'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T',
'W', 'X', 'Y' };
Random rnd = new Random();
//生成验证码字符串
for (int i = 0; i < 4; i++)
{
chkCode += character[rnd.Next(character.Length)];
}
//把验证码存入session
Session["chkCode"] = chkCode;
Bitmap bmp = new Bitmap(65, 20);
Graphics g = Graphics.FromImage(bmp);
g.Clear(Color.Transparent);//背景色
//画噪线
for (int i = 0; i < 0; i++)
{
int x1 = rnd.Next(65);
int y1 = rnd.Next(20);
int x2 = rnd.Next(65);
int y2 = rnd.Next(20);
Color clr = color[rnd.Next(color.Length)];
g.DrawLine(new Pen(clr), x1, y1, x2, y2);
}
//画验证码字符串
for (int i = 0; i < chkCode.Length; i++)
{
string fnt = font[rnd.Next(font.Length)];
Font ft = new Font(fnt, 15);
Color clr = color[rnd.Next(color.Length)];
g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr),
(float)i * 15 + 2, (float)0);
}
//画噪点
for (int i = 0; i < 50; i++)
{
int x = rnd.Next(bmp.Width);
int y = rnd.Next(bmp.Height);
Color clr = color[rnd.Next(color.Length)];
bmp.SetPixel(x, y, clr);
}
//清除该页输出缓存，设置该页无缓存
Response.Buffer = true;
Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0);
Response.Expires = 0;
Response.CacheControl = "no-cache";
Response.AppendHeader("Pragma", "No-Cache");
//将验证码图片写入内存流，并将其以 "image/Png" 格式输出
MemoryStream ms = new MemoryStream();
try
{
bmp.Save(ms, ImageFormat.Png);
Response.ClearContent();
Response.ContentType = "image/Png";
Response.BinaryWrite(ms.ToArray());
}
finally
{
//显式释放资源
bmp.Dispose();
g.Dispose();
}