有意識地忽略我們的最終目标，同時專注在我們在哪裡(lǐ)和我們确實需要從哪裡(lǐ)開(kāi)始，這(zhè)會(huì)給我們提供最大的靈活性。在互聯網上最大的問題之一就(jiù)是技術對(duì)決策的影響甚重。設備的性能(néng)決定了這(zhè)些功能(néng)是否能(néng)實現。内容管理系統甚至在決定設計什麼(me)應用或者是爲誰而設計之前就(jiù)已經(jīng)選擇好(hǎo)了。就(jiù)好(hǎo)比先聲明了，“我們想用HTML5。"人們總是會(huì)關注技術，這(zhè)是很自然的。畢竟技術具有很大的吸引力和樂趣。互聯網技術就(jiù)好(hǎo)像玩具、工具、某種(zhǒng)材料，好(hǎo)像“所有人”都(dōu)在使用它。我們看到很酷的demo,，, 然後(hòu)思考他們都(dōu)是用什麼(me)技術實現的，而不是讓問題引導我們找到正确的技術方案。我們忘了這(zhè)些demo隻是出自制作demo的技術人員之手。如果你在一個重新設計的項目裡(lǐ)，這(zhè)才是真實世界，你必須得制作能(néng)夠起(qǐ)作用的東西。酷炫當然很好(hǎo)，但前提是它能(néng)起(qǐ)代用并且解決問題。這(zhè)裡(lǐ)的關注點更多放在解決方案上而不是問題上。我們需要暫時變成(chéng)悲觀主義者，把注意力放到問題上，熱切地關注它們，讓它們孵化。對(duì)于那些商業價值與互聯網技術緊密相關的産品，答案甚至會(huì)在洗澡的時候出現。

1. 内容清單

這(zhè)有一種(zhǒng)關于内容的思考方式可以幫助設計師(和他們的客戶)關注那些對(duì)項目真正重要的事(shì)情。到底什麼(me)才是真正重要的事(shì)情呢?其實無論什麼(me)情況下，真正重要的都(dōu)是網站或者應用程序的基礎内容和基礎功能(néng)。暫時忽略平台和浏覽器，集中精力思考産品爲什麼(me)是這(zhè)樣(yàng)。我們把這(zhè)種(zhǒng)方式叫(jiào)平台和設備無關的産品思考。因爲那個時候我們還(hái)不需要關注這(zhè)些事(shì)，我們還(hái)是來想想基礎内容和功能(néng)點吧! 通常，提問可以幫助我們進(jìn)行批判式的思考。1.爲什麼(me)用戶會(huì)在第一時間使用這(zhè)個網站?想出好(hǎo)的理由... (沒(méi)有說服自己)，想出更多的理由，然後(hòu)打磨這(zhè)些理由，- -定要是真實的理由。2.如果世界上隻存在一種(zhǒng)浏覽器，并且僅支持HTML，缺省的樣(yàng)式、所有的功能(néng)都(dōu)由服務器提供，那麼(me)最終你會(huì)提供怎麼(me)樣(yàng)的内容和功能(néng)?換句話說，用戶會(huì)在這(zhè)裡(lǐ)看到什麼(me)，用到什麼(me)？回答上面(miàn)的兩(liǎng)個問題，我們把這(zhè)個叫(jiào)做内容清單。因爲加入内容清單的每一部分内容和每一個功能(néng)都(dōu)需要通過(guò)目的性測試，它必須有效支持你給出的第-個問題的答案。當你完成(chéng)了(這(zhè)需要花費一些時間，但是對(duì)于你的項目來說卻是一個裡(lǐ)程碑), 仔細閱讀你給出的結果。它會(huì)對(duì)你說: " 我在這(zhè)裡(lǐ)"。在這(zhè)一章裡(lǐ)，我們將(jiāng)會(huì)對(duì)常見的Web設計開(kāi)發(fā)流程作微妙(和不微妙)的改變，使之更加具有前瞻性。我們會(huì)認識到如何將(jiāng)這(zhè)種(zhǒng)新流程用到一個小項目中去。這(zhè)個項目很小，目标并不複雜。它的目的隻是大緻說明如何將(jiāng)理論用于實踐，而不僅僅是作爲研究案例。你可以嘗試著(zhe)把這(zhè)些技術部分或全部作用于你的項目，使用那些對(duì)你有用的，改變或者放棄那些沒(méi)用的。我在這(zhè)個案例中，和我一樣(yàng)可以收獲到很多東西。

2. 一個案例：“3個小盒子“

我們正在制作- -個可以教開(kāi)發(fā)者cCSS 自适應盒模型布局模塊的網站，一個在多平台領域有很大發(fā)展潛力的比較新的布局模塊。關鍵是讓解釋和例子做到傻瓜式的簡單。因爲大多數cCSs屬性可以通過(guò)渲染文本和模塊得到解釋，讓我們稱之爲我們網站的“三小盒子。”最終，我們可能(néng)擴大的課程，包括其他Css模塊。‘三小盒子”，將(jiāng)包括理論和語法，以及一些練習，每一-個都(dōu)建立在上述練習的理念上。用戶將(jiāng)能(néng)夠編寫代碼在頁面(miàn)編輯器，會(huì)有地方顯示其結果代碼。點擊“ 運行"按鈕將(jiāng)運行輸入的代碼。每個練習有兩(liǎng)種(zhǒng)文字内容的類型:理論和作業。理論解釋語法和概念，作業是學(xué)生完成(chéng)的練習。
讓我們對(duì)内容清單進(jìn)行頭腦風暴:

1. Logo
2. 全局導航
3. 介紹文字（僅在主頁上）
4. 代碼編輯器（僅在課程頁）
5. 結果區域（僅在課程頁）
6. 進(jìn)度欄（僅在課程頁）
7. 理論文本（僅在課程頁）
8. 練習文本（僅在課程頁）
9. 課程導航（僅在課程頁）
10. 登錄形式（僅在主頁上）

我們將(jiāng)有兩(liǎng)種(zhǒng)類型的頁面(miàn)
·主頁（介紹性文字和注冊表單）
·課程頁
這(zhè)麼(me)多了。 顯然，這(zhè)個網站是非常簡單和不完整的， 但它足以作爲一個例子。在這(zhè)裡(lǐ)我們省略了很多東西(個人資料頁、對(duì)課程完成(chéng)後(hòu)統計信息等)。在一個大型網站中，内容量可能(néng)是巨大的并將(jiāng)可能(néng)被(bèi)拆分爲幾個。但請記住，這(zhè)不是一個功能(néng)規格說明書。我們不必列舉每個項目内容的每一個細節。我們把内容拆分成(chéng)具有價值的幾個獨立的大集合。我們通常會(huì)給每個項目的内容指派序号或ID。因爲我們的例子很簡單，我們通常會(huì)給每個項目的内容指派序号或ID。因爲我們的例子很簡單，我們文本文件就(jiù)可以做到，不過(guò)你可以把它做成(chéng)你喜歡的各種(zhǒng)花哨樣(yàng)子。關于内容清單最棒的是，它從來沒(méi)有失效過(guò)。任何情況都(dōu)是這(zhè)樣(yàng)。“客戶可以大叫(jiào)任何他們想要的，你可以把它記下來。我們可以足夠快地發(fā)現什麼(me)起(qǐ)作用，什麼(me)不會(huì)。

3. 内容參考線框

我們中的許多人在Web設計項目(但願是在内容清單之後(hòu))的第一步就(jiù)是創建線框圖。線框圖，現在可以說主要是交互設計師在輸出，已經(jīng)從簡單的圖紙上的線框變成(chéng)成(chéng)熟的網頁設計,比起(qǐ)最終設計隻是缺少色彩圖像和細節。原先，他們通過(guò)這(zhè)些方法來設計模塊位置、距離、層次結構以及需要優先的部分等。内容用粗線框來表示。一些設計師仍然使用這(zhè)種(zhǒng)方法，但是對(duì)于更多人來說，他們的目标已經(jīng)改變了。
如今，線框圖更多是用來作爲一種(zhǒng)交付件向(xiàng)客戶展示網站看起(qǐ)來是什麼(me)樣(yàng)，以及它在“設計稿”完成(chéng)前它到底是怎樣(yàng)運轉的。事(shì)實上，這(zhè)種(zhǒng)類型的線框圖就(jiù)是設計稿;隻不過(guò)它們是未完成(chéng)的狀态，同時把這(zhè)樣(yàng)的相框圖給客戶看是有一定潛在危險的。如果說客戶隻喜歡其中的某些部分，一-些其他的細小的偏差(比如字體、顔色等)會(huì)把它們掩蓋掉。另外如果說客戶不喜歡這(zhè)個設計，那麼(me)接下來就(jiù)是更多的艱辛工作。這(zhè)種(zhǒng)很早之前的線框圖更接近于現在傳統圖形設計師作的簡圖。很多的簡圖可以快速制作，允許對(duì)那些起(qǐ)作用的内容和不起(qǐ)作用的内容做足夠的研究。視覺設計師隻需要關注在哪些地方需要重點突出，哪些地方要注意協調統一就(jiù)好(hǎo)了。這(zhè)種(zhǒng)類型的線框圖對(duì)于他們而言是一種(zhǒng)工具，而不是給顧客的交付件。不是說我們不需要這(zhè)麼(me)早就(jiù)把客戶卷入進(jìn)來，而是說我們首先得給這(zhè)個過(guò)程提供一個模糊的藍圖，而不是直接讓他們認可我們的工作。當客戶和你一起(qǐ)走完設計流程， 認可設計方案當然不成(chéng)問題。