写给大家看的web设计书

转载 2013年12月05日 14:40:51

写给大家看的web设计书

web文体:可读性(readability)在大量文本时用字体Serif;易读性(Legibility)在识别小段文本(导航,列表,符号)用字体sans serif,有时也有更好的可读性。

web文本:文字大小(9-16);不要大量字体设置为斜体粗体大写手写体等(下划线和斜体只选其一);避免太长的文本行;文字和背景要足够对比(白色背景的黑色文字最好);

拼写和语法要正确。

基本的设计原则:对齐(alignment),亲密性(proximity),重复(repetition),对比(contrast)。

对齐:

整个页面都采用一种对齐方式(不用居中),多左对齐;

除非多种对齐方式有增强之效。 


水平对齐和垂直对齐同样重要。

 

去掉槽糕的边框

 

让文本远离左边界;

长文本要从右边界缩进,以免文字很长;

亲密性:

同样的元素更靠近,不同元素有间距。


如标题和内容要近。

重复:

统一网站风格:相同的导航,颜色,样式,排版, 布局…使之体现同一理念。


对比:

对比要明显,不要畏首畏尾,要截然不同。

突出一个焦点。

背景色不能是暗色,对黑色文字不形成对比。

比如,标题的字体比其他字体大。但网页喜欢用大字体会让人感觉不成熟。

放大一个很重要的图片。

 

 

 


 

设计备忘录:

不良设计备忘录

优秀设计备忘录

背景:

采用默认背景灰色;文本和背景色很难读;

 

文本:

挤在左边界;对齐方式不一致;不要大量字体设置为斜体粗体大写手写体等;有下划线但不是链接;字体大小适中;

 

链接:

默认蓝色;有边框;死链接;没下划线;图片作链接显示不是手形光标;

 

图片:

很大下载时间长;没有alt标签;没有意义花哨的图片;图片边界有锯齿;

 

表格:

有边框;作为设计元素比如难看大边框;

 

闪烁和动画:

多个闪烁或动画,没有停止的动画;缺乏重点;

 

垃圾:

有计数器;垃圾广告;滚动边栏;首页很多获奖图片

 

导航:

不清晰;复杂;有滚动条;没有身份标示;

 

框架:

网页中有滚动条;

 

字体设计:

重要内容没在1024*768内;没有焦点或太多焦点;元素杂乱放置;缺乏对比;不能跨浏览器;

 

 

文本:

背景不影响文本;字体大小合适;层次要清晰;文本栏比图书行宽要窄,易于阅读;

 

导航:

易于理解和使用,慎用框架;连接当前位置;

 

图片:

按钮不;有alt标签;图片链接都有文本连接;动画会自动结束;

 

总体设计:

页面很快下载;重要内容在1024*768内;用适当元素分割很大的文本区;网站的每个页面有重复性元素使之体现同一网站;

 


 

附录:

1推荐Robin著《写给大家看的设计书》或参考好的设计网站:Adobe.com; Apple.com;

2.设计网站时,用单一尺寸,比如1024*768,如有延伸但重要内容要在这个空间。直引号和直撇号不专业,用引号(&#147和&#148)及单引号(&#145和&#146)。缩进换行不能同时存在。段落(<p>)有间隔,换行(<br>)没有间隔。

3.网站具体设计:导航一定要返回到主页;小心框架的应用,用不好是灾难;网站复杂时提供网站地图或索引;外部链接要在新窗口打开;不要让人滚动边栏。

4.好的颜色:看到好的颜色,就记下来。设计人员没有科学方法配色,只有反复尝试。

5.图片:GIF适用于大面积单一颜色图像,如简单插图,logo,文本图像,卡通像;JPEG适合照片,水彩,素描或木炭画。素材:EyeWire; iStockPhot; Veer; Dgusa; FotoSearch;ArtBitz。

6.为了web排版跨平台,最好用CSS格式化。

7.FTP程序:Windows上可以用WS_FTP和AceFTP。

 

 

相关文章推荐

写给大家看的Web设计书

以前自己做的界面或是展示的PPT,总觉得不协调,生搬硬套。也许看看设计方面的书能有所改善。 《写给大家看的Web设计书》,面向的是非技术的设计人员,图例丰富,内容受用,读起来很愉快。 ...

写给大家看的WEB设计书.part1

  • 2013年01月18日 16:22
  • 50MB
  • 下载

写给大家看的设计书—robin willianms

写给大家看的设计书—robin willianms1.优秀的设计 学习四大基本原则 对比 重复 对其 亲密性认识到自己没有运用的这些原则 应用基本原则 2.亲密性 将相关的项组织在一...

写给大家看的PPT设计书

序   在过去的20年里,罗宾成功地作了上百万场(实际上是上百场,但上百万场能给人留下更深刻的印象)演示,她说每场演示她都有所收获,都能更上一层楼。幸运的是,随着演示做得越来越好,演示用的软件也在不...

读书笔记:写给大家看的设计书(第三版)

1 4大基本原则 对比(Contrast)要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。对比的根本目的一是增强页面效果,二是有助于信息的组...

颜色运用(《写给大家看的设计书》--内容总结)

最近在制作网页的时候,由于没有美术的功底,在网页配色上,完全依靠感觉。这样的配色过程,很耗费时间,得不断选择自己认为不错的配色进行搭配。 后来,在《写给大家看的设计书》中看到这样的内容,关于利用色轮进...

《写给大家看的设计书》读书笔记(转)

《写给大家看的设计书》是一本普及性的设计入门书籍,它非常适合非设计专业的人员来阅读,书中没有晦涩难懂的术语,读起来很舒畅,所举的例子也很简单明了,能够非常贴切地说明了问题。 有些东西,对于我这样...

PPT排版细节,写给大家看的设计书,完美总结

相信每一位小宝贝在工作中都会被老板用PPT虐无数遍,虐到自己怀疑人生。奈何在网上随手一搜,出现的各类招聘要求都躲不开“熟练掌握PPT制作”,尤其是各类科技公司、咨询公司。想想Apple、华为、小米各大...

【读书笔记】《写给大家看的设计书》

第一部分 设计原则1. 约书亚树 2. 亲密性 3. 对齐 4. 重复 5. 对比 6. 颜色运用 7. 更多提示与技巧 第二部分 字体设计1. 字体(与人生) 2. 字体类别 3. 字体...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:写给大家看的web设计书
举报原因:
原因补充:

(最多只允许输入30个字)