眾妙之門

內(nèi)容概要

　　《眾妙之門——網(wǎng)站UI設(shè)計之道(修訂版)》是知名設(shè)計網(wǎng)站Smashing
Magazine上線以來的精華總結(jié)，來自全球的知名設(shè)計師無私地分享了他們多年積累的寶貴經(jīng)驗。全書共分10章，前8章討論了和網(wǎng)站UI設(shè)計相關(guān)的八個不同的領(lǐng)域，覆蓋面非常廣，具有很強的操作性和專業(yè)性，全書邏輯嚴密、言簡意賅，設(shè)計人員可以快速地找到自己想要的東西。第9章以訪談的形式介紹了多位專家對一系列重要問題的看法，入木三分，極富啟發(fā)性。第10章以講故事的方式，把Smashing
Magazine的創(chuàng)辦和發(fā)展過程娓娓道來，同時毫不保留地分享了兩位創(chuàng)始人的成功秘訣和價值觀，讓人受益匪淺。
《眾妙之門——網(wǎng)站UI設(shè)計之道(修訂版)》最大的價值在于它在傳授具體經(jīng)驗的同時，也對設(shè)計思想和設(shè)計理念進行了深入的探討，在“授人以魚”的同時，不忘“授人以漁”。相信廣大讀者讀完這本《眾妙之門——網(wǎng)站UI設(shè)計之道(修訂版)》，一定會有一種相識恨晚的感覺。

作者簡介

Smashing Magazine是世界知名的頂級技術(shù)類博客，主要面向Web設(shè)計與開發(fā)人員。
成立于2006年9月的Smashing Magazine旨在向Web設(shè)計者和開發(fā)者提供優(yōu)質(zhì)創(chuàng)新的信息和最新的技術(shù)趨勢。

書籍目錄

第1章　現(xiàn)代網(wǎng)絡(luò)應(yīng)用中的用戶界面設(shè)計
1.1　什么是用戶界面(UI)
1.2　可視界面設(shè)計的工具箱
1.3　制作有效用戶界面的實用技巧
1.4　結(jié)論
第2章　CSS布局的藝術(shù)和科學(xué)
2.1　固定寬度布局
2.2　自適應(yīng)布局
2.3　動態(tài)網(wǎng)格布局
2.4　自適應(yīng)的流式布局
2.5　彈性布局
2.6　混合布局
2.7　哪種布局最適合您的網(wǎng)站？
第3章　排版：原則、方針和常見錯誤
3.1　傳統(tǒng)排版和網(wǎng)站排版
3.2　基本的排版術(shù)語
3.3　相對和絕對的字體尺寸單位
3.4　空白是最好的空間
3.5　排版和網(wǎng)格
3.6　垂直節(jié)奏
3.7　分級(Hierarchy)和分度(scale)
3.8　段落樣式
3.9　通過字體設(shè)定版式
3.10　CSS字體庫(CSS Font Stacks)
3.11　文本替換技術(shù)
3.12　@font-face屬性
3.13　選擇正確的字體
3.14　不要穿舞鞋登山
3.15　尺寸很重要
3.16　OpenType、TrueType還是PostScript Type
3.17　注意細節(jié)
3.18　對齊和連字符
3.19　總結(jié)
第4章　現(xiàn)代網(wǎng)站的可用性原則
4.1　用戶如何思考？
4.2　使用整潔連貫的視覺設(shè)計
4.3　固定元素屬于固定位置
4.4　搜索是簡單的
4.5　鏈接要像鏈接
4.6　僅在必要的時候使用下拉菜單
4.7　使注冊表單盡量簡潔
4.8　考慮添加"返回頁首"鏈接
4.9　盡可能地避免使用Splash頁面
4.10　鏈接應(yīng)該在同一窗口打開
4.11　你需要注意以下可用性檢查點
4.12　傳達你的網(wǎng)站的組織結(jié)構(gòu)
4.13　使用標記來構(gòu)建上下文
4.14　建立良好的導(dǎo)航
4.15　重要的易用性法則和原則
4.16　給用戶一個5萬英尺的視角來看你的程序
4.17　心理模式和象征物
4.18　組織網(wǎng)站的內(nèi)容
4.19　提供站點地圖
4.20　使用幫助
4.21　建立信任
4.22　不要讓用戶毀掉自己的用戶體驗
4.23　及早測試、經(jīng)常測試
4.24　總結(jié)
第5章　網(wǎng)站設(shè)計、可用性和用戶體驗中超炫色彩終極使用指南
5.1　色彩學(xué)理論
5.2　色彩和易用性
5.3　色彩與注意力集中
5.4　色彩與體驗
5.5　靈感
第6章　網(wǎng)站優(yōu)化
6.1　你將會用到的工具
6.2　在IMG標簽中表明正確的圖片尺寸
6.3　減小圖像的尺寸
6.4　服務(wù)器和內(nèi)容分發(fā)網(wǎng)絡(luò)
6.5　合并CSS和JavaScript
6.6　CSS放在頂部，而JavaScript放在底部
6.7　壓縮CSS和JavaScript
6.8　使用外部CSS和JavaScript文件
6.9　選擇一個文檔類型
6.10　驗證頁面
6.11　不要使用CSS表達式
6.12　服務(wù)器部分
6.13　Apache：如何設(shè)置過期時間
6.14　YSlow中可以查看缺少expires header的報警
6.15　Lighttpd：如何設(shè)置過期頭
6.16　Apache：如何配置ETags
6.17　Lighttpd：如何配置ETags
6.18　為PHP安裝eAccelerator
6.19　MySQL Tuning Primer
6.20　啟用透明壓縮
6.21　盡可能避免重定向
6.22　如何探測長時間跳轉(zhuǎn)鏈？
6.25　完整的鏈接
6.24　避免死鏈接
第7章　為銷售而設(shè)計--提高訪客轉(zhuǎn)化率
7.1　如何銷售？
7.2　AIDA(注意力、興趣、期望、行動）
7.3　展示產(chǎn)品
7.4　使用視頻展示產(chǎn)品
7.5　可以瀏覽的功能列表
7.6　饋贈讓客戶想回報
7.7　從眾心理
7.8　隱性的建議
7.9　永遠提供下一步操作
7.10　使用稀缺性來促進需求
7.11　退款保障，消除客戶的后顧之憂
7.12　鼓勵用戶試用
7.13　別讓郵寄費用嚇跑了顧客
7.14　消除選擇麻痹
7.15　古騰堡法則
7.16　腳注
7.17　簡化注冊
7.18　總結(jié)
第8章　把網(wǎng)站變成非凡的品牌
8.1　建立獨一無二的設(shè)計
8.2　了不起的視覺設(shè)計
8.3　成為社區(qū)的一部分
8.4　進入人們的頭腦中
第9章　向?qū)＜覍W(xué)習(xí)--名家訪談與真知灼見
認識一下我們的專家組成員
9.1　設(shè)計和開發(fā)
9.2　設(shè)計過程
9.3　自我提高和技巧積累
9.4　發(fā)展事業(yè)和做自由職業(yè)者
第10章　幕后故事
10.1　一切是如何開始的
10.2　我們是如何走到今天的
10.3　我們成功故事的關(guān)鍵因素
10.4　幕后在發(fā)生著什么？
10.5　感謝你，設(shè)計社區(qū)

章節(jié)摘錄

版權(quán)頁：   插圖：    實際上，在指字體時人們經(jīng)常把“typeface”（字體）和“font”（字體文件）混用。typeface指的是某類特殊字體設(shè)計，而font指的是包含我們使用字形的那個文件。比如，George指的是typeface，而Georgia－Bold.ttf指的是font，一個包含了這個字體所有粗體字形的文件。換句話說，對字母、數(shù)字和符號等的實體化集合（無論是金屬塊還是計算機文件）就是一種“font”（你選擇并使用的文件）。 當我們指字體集合的設(shè)計時（也就是字體看上去的樣子），我們指的是“type－face”。打個比方，我們播放MP3文件，但是我們聽到的卻是優(yōu)美的歌曲。 3.3 相對和絕對的字體尺寸單位 也許數(shù)字化排版最不同的特點就是用戶能夠根據(jù)自己的偏好調(diào)整字體大小。當選擇了一個字體大小后，網(wǎng)站開發(fā)者可以使用絕對或是相對的度量單位，也可以在CSS中設(shè)置?？傮w來說，絕對單位更適合印刷品的設(shè)計，把它們用于網(wǎng)站排版不是很好的實踐。唯一的例外是打印樣式表，絕對單位可以幫助定義文檔上設(shè)計區(qū)域的大小。目前被支持的度量單位包括pt、pc、cm、mm和in。但是像xx－small、x－small、small、medium、large、x－large和xx－large，也同樣可以選擇。 設(shè)定“絕對”的字體大小并不意味著用戶不能增加或減少字體的大小?，F(xiàn)代瀏覽器允許大量針對文本的操作。甚至，絕對單位使設(shè)計者在父元素和子元素之間設(shè)定比例變成了不可能的事情，即使用戶手動地增加或減少字體的大小，字體的大小也會不變。因此，“absolute”屬性與樣式表中元素的定義相關(guān)，而與屏幕顯示無關(guān)。 設(shè)定“絕對”的字體大小并不意味著用戶不能增加或減少字體的大小 現(xiàn)代瀏覽器會默認把元素的字體大小設(shè)定為16像素。如果你不在樣式表中明確地指定其他值，將會使用這個值。為了避免復(fù)雜的計算，Richard Rutter建議把的字體大小設(shè)為62.5%，這將把文字的大小降低到10像素（16像素×0.625）。相應(yīng)地，當把標題字體大小設(shè)定為18像素時，使用1.8em，而不使用1.125em（18像素：16像素=1.125）更合適一些。 實際上，字體大小通常使用相對單位，比如px、em或%。px（像素）與顯示器的分辨率相關(guān)。分辨率越高，像素密度越大。通常這也意味著字體看上去會更小。 “em”是通過你使用的字體大小來定義的度量單位。1它代表了基線（baseline）之間的距離，當字體屬性被設(shè)定為solid（不含行高）時。em是一個相對的單位，它的值一般是文本元素父元素大小的倍數(shù)。所以，1em對于16點（point2）的字體而言，意味著16點。如果用戶瀏覽器默認的字體大小是16像素，那么1em就代表16像素，這基本僅僅是文本顯示尺寸的一個屬性值。如果用戶把字體尺寸降低到14像素，那么2em將代表28像素。 使用em作為字體大小單位的好處是，這個度量單位在設(shè)定父元素和子元素的比例方面有著天生的能力，以及對CSS繼承特性的利用。利用這個特性子元素可以繼承父元素的大小，除非明確聲明了進行尺寸更改。比如，如果默認字體大小是16像素，元素的字體大小為2em，之內(nèi)的頁眉字體大小為1.5em，那么頁眉的字體大小將是元素的1.5倍，也就是1.5×2×16像素=48像素。 在某種程度上，百分比近似于em值：CSS中文檔的根、繼承和父子元素的相對關(guān)系會為每一個元素定義大小。所以在上面的例子中，可以定義元素的字體大小為200%，頁眉的字體大小為150%，結(jié)果是相同的（48px）。 在一些環(huán)境中，將最小寬度和最大寬度屬性設(shè)置為em或百分比對于獲得一個可讀性好的行寬會很有幫助。通常，字符的平均寬度是2／3 em。因此30em和50em可以被視為理想的行寬。 因為IE6不允許用戶按像素縮放文本，因此建議使用em或百分比值。不過，當使用相對單位時要小心謹慎。使用一些尺度和分級（參考下文）來確保不同重量的文本元素能夠準確、恰當?shù)爻尸F(xiàn)。

媒體關(guān)注與評論

知名設(shè)計網(wǎng)站Smashing Magazine上線以來的精華總結(jié)，來自全球的知名設(shè)計師無私地分享了多年積累的寶貴經(jīng)驗。這是一本設(shè)計原理和實踐并重的設(shè)計書，推薦給每一位前端設(shè)計師閱讀?！喙?騰訊社交用戶體驗設(shè)計部 前端工程師

編輯推薦

《眾妙之門——網(wǎng)站UI設(shè)計之道(修訂版)》是經(jīng)典暢銷書  《眾妙之門——網(wǎng)站UI設(shè)計之道》的全新改版，知名設(shè)計網(wǎng)站Smashing Magazine的精華總結(jié)，全球知名設(shè)計師無私分享他們多年積累的寶貴經(jīng)驗，深入探討網(wǎng)站UI設(shè)計思想和設(shè)計理念。

圖書封面

圖書標簽Tags

無

評論、評分、閱讀與下載

---

    眾妙之門 PDF格式下載

---