設計師從未思考過(guò)的網(wǎng)頁(yè)設計問(wèn)題發(fā)布者：本站     時(shí)間：2022-01-13 10:01:16

相對于改造已具規格的網(wǎng)站，為智能手機重新設計網(wǎng)頁(yè)就比較輕松。不僅如此，讓人尷尬的是，在CSS獲得大眾認可多年后，當時(shí)缺乏遠見(jiàn)這個(gè)問(wèn)題，現在仍舊折磨著(zhù)我們這些編寫(xiě)HTML的苦逼孩子們。

將舊的網(wǎng)站轉換成互動(dòng)設計是件很令人頭疼的事情，不是因為屏幕尺寸的不同，而是因為大部分HTML文件都是在對屏幕尺寸的粗略估計下編寫(xiě)的。在蘋(píng)果于2007年中推出iPhone之前，設計師至少可以依賴(lài)屏幕700像素的寬度(如果他們忽略可訪(fǎng)問(wèn)性)。像導航欄、兩欄或三欄布局、鼠標懸停效果這樣的常規布局已經(jīng)完全適應了以鼠標為基礎的寬屏配置了。設計師們已經(jīng)按照大家的預期將左上角的logo做成可點(diǎn)擊的了。

移動(dòng)設備以?xún)煞N方式動(dòng)搖了大家的舊習慣?，F在，我們不僅擁有小屏幕的iPhone、安卓機、電子閱讀器、iPad還有其他很多令郎滿(mǎn)目的移動(dòng)設備，并且我們也要求網(wǎng)頁(yè)去適應這些千奇百怪的設備。你想在xBox上使用CNN?可以!你想在多媒體電視機上使用Smashing雜志?就算現在沒(méi)有，也快上市了。

為未來(lái)可能發(fā)生的情況設計網(wǎng)頁(yè)，網(wǎng)頁(yè)的布局和結構都會(huì )受到影響。我們不能控制這些電子信息將會(huì )在什么樣的設備被查看。 無(wú)論多少“適用于XXX設備”這樣的標簽，也無(wú)法阻止人們將我們編寫(xiě)與繪制的內容進(jìn)行閱讀和混合。網(wǎng)頁(yè)沒(méi)必要使用12或16欄的格子，網(wǎng)頁(yè)也不需要進(jìn)行嚴格的分層。但是，要達到這樣的境界，就必須直面使用這些布局的“文物”。

手機也有內容問(wèn)題

假設你被一家大型企業(yè)雇傭。調查數據顯示很多客戶(hù)喜歡通過(guò)智能手機來(lái)瀏覽你的網(wǎng)站。這家大企業(yè)便計劃要重新設計他們已有的網(wǎng)站。你的團隊(或者你與你的合伙人)采取“手機優(yōu)先”的策略。但是在你們開(kāi)始繪制圖標、布局網(wǎng)格、填充HTML5之前，有一個(gè)事實(shí)已經(jīng)嚴重威脅到這個(gè)再設計項目的運行。網(wǎng)站的內容不只是在小屏幕上格式混亂，它在任何寬度小于960像素的瀏覽器上都是混亂的。

·大圖片在縮小時(shí)細節會(huì )丟失。

·布局超過(guò)兩欄的文字或者嵌套列在窄屏上都會(huì )被壓縮變形。

·更大范圍的字體尺寸不合適。

各種異常情況交織成了復雜的問(wèn)題。所見(jiàn)即所得編輯器會(huì )在獨立的頁(yè)面上增加自帶的格式和布局，一段時(shí)間后，人們就會(huì )根據自己的方式來(lái)更新網(wǎng)站。

設計師從未思考過(guò)的<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>問(wèn)題,PS教程,

圖：網(wǎng)站上變化多端的內容很難在手機的顯示屏上完全顯示。

一個(gè)網(wǎng)站擁有的頁(yè)面越多，就越容易產(chǎn)生不同的版本。一個(gè)解決方案是不能適應所有的變化的，特別是某些針對特殊屏幕的。我們可以將不合適的頁(yè)面在移動(dòng)設備上分成多個(gè)頁(yè)面來(lái)顯示，但這也不是沒(méi)有代價(jià)的。

設計師從未思考過(guò)的網(wǎng)頁(yè)設計問(wèn)題,PS教程,

圖：將長(cháng)篇內容分成多個(gè)頁(yè)面后會(huì )增加獲取信息的難度。

如果設計師選擇多頁(yè)布局而不是長(cháng)條形布局，那么傳統的結構則會(huì )使信息變得更難被獲取。

作為一個(gè)產(chǎn)業(yè)，網(wǎng)頁(yè)設計也曾遇到過(guò)類(lèi)似的挑戰。練習過(guò)表格布局的設計師們應該還記得之后改成可變動(dòng)編碼時(shí)是多令人頭痛。今天，我們的想法可以超越現有的移動(dòng)設備?；?dòng)設計縮小了不同實(shí)用案例的差距。但是設計師不僅可以做到應對現有的問(wèn)題，他們還可以提前設想未來(lái)可能出現的問(wèn)題。

如果問(wèn)題是“如何使內容變得適應移動(dòng)設備?”，就沒(méi)意義了。若問(wèn)題是“如何使內容變得有彈性?”，這樣我們就一次強調了多種問(wèn)題。理想的解決方案需要滿(mǎn)足幾條要求。

1. 不要為了一個(gè)新的媒介而犧牲網(wǎng)頁(yè)內容。

我們不希望提供的網(wǎng)站是原網(wǎng)站內容縮水后的版本。

2. 注意它的實(shí)用性。

我們不希望只是單純的縮減布局。所有內容，包括文字、圖片、導航、列表，都必須易于使用。

3. 預防(或者至少最小化)類(lèi)似問(wèn)題的再次發(fā)生。

20年前人們還在懷疑網(wǎng)頁(yè)存在的必要性。5年前人們還對移動(dòng)版網(wǎng)頁(yè)表示疑惑。他們明天又會(huì )有什么樣的問(wèn)題呢?

設計師從未思考過(guò)的網(wǎng)頁(yè)設計問(wèn)題,PS教程,

圖：為大尺寸屏幕設計的布局往往不能輕易的移植到移動(dòng)設備上。

人氣值、優(yōu)先級與重要性

有什么內容是值得保留的?后退一步——什么是內容?

傳統意義上，“內容”就是網(wǎng)頁(yè)所包含的信息。但是傳統也說(shuō)設計師可以依賴(lài)800像素的屏幕寬度。

若想使電子信息足夠靈活到可以適應移動(dòng)設備(并且無(wú)論接下來(lái)將要補充什么內容)，這個(gè)網(wǎng)站就需要焦點(diǎn)。要聚焦一個(gè)網(wǎng)站，我們就必須找到這個(gè)網(wǎng)站上最至關(guān)重要的信息。

“至關(guān)重要”是個(gè)從各方面來(lái)說(shuō)非常主觀(guān)的對內容實(shí)用性的測量。它也許會(huì )采取文字、圖片或影像的形式。也可能涵蓋許多頁(yè)面或者只是寥寥幾句話(huà)。然而，這個(gè)關(guān)鍵的內容，卻是一個(gè)網(wǎng)站存在的意義。內容并不填滿(mǎn)整個(gè)網(wǎng)站，網(wǎng)站是指設計師展示內容的舞臺。

然而，關(guān)鍵內容不是受歡迎的代名詞，雖然兩者有聯(lián)系?！叭藲庵怠笔谴蟊妼﹃P(guān)鍵內容本身的評判。與之不同的“優(yōu)先級”，就是網(wǎng)站所有者對網(wǎng)站內容主次的考慮。網(wǎng)站所有者也許認為某些信息很重要，但是如果終端用戶(hù)不需要它，那它就不是關(guān)鍵。

設計師從未思考過(guò)的網(wǎng)頁(yè)設計問(wèn)題,PS教程,

圖：這個(gè)虛擬銀行網(wǎng)站圖表顯示了兩個(gè)可疑的內容，就是員工名單和卡拉OK視頻。每個(gè)柱形都顯示了優(yōu)先級與人氣值對整體重要性的影響。

影響重要性的因素有：

·時(shí)效性

網(wǎng)站上的信息的重要性會(huì )因為時(shí)間變化而變化嗎?(比如，季節性活動(dòng)，最新消息，歷史上的今天，截止日期)

·距離

這些信息會(huì )受到地理位置的影響嗎?(例如，當地的促銷(xiāo)，自然災害，城市或地區性政策變更，演唱會(huì ))

·范圍

誰(shuí)會(huì )受到這些信息的影響呢?(例如，朋友圈，特殊利益，業(yè)余愛(ài)好者，一般群眾，退伍軍人，新人)

·規模

這條信息有多大?(例如，寬度，高度，持續時(shí)間，密度)

如果一家銀行的年會(huì )視頻被廣泛傳播，視頻中的一位CEO暴露了TA唱K不著(zhù)調的天賦，那視頻可能會(huì )火起來(lái)，盡管那位CEO不受歡迎。但是銀行也許會(huì )因為經(jīng)費問(wèn)題優(yōu)選考慮其他內容(CEO自然會(huì )這樣考慮)。類(lèi)似的，一些博客喜歡將他們最新的內容置頂，但是也許過(guò)去的一些具有創(chuàng )意的帖子比最新的帖子更受人關(guān)注。

一些網(wǎng)站——比如新聞網(wǎng)站或者博客——會(huì )將關(guān)鍵內容放在首頁(yè)。但是很多首頁(yè)并不需要呈現關(guān)鍵內容。首頁(yè)可以使用固定的內容對網(wǎng)站進(jìn)行介紹，和幫助人們挑選網(wǎng)站上他們需要的內容。

內容的重要性也許會(huì )很主觀(guān)，但是主次關(guān)系卻不是。底線(xiàn)就是保存重要的信息;決定信息是否是關(guān)鍵信息或是人氣信息;根據內容保存或者移除一些信息。

拋出網(wǎng)頁(yè)和信息塊

當電腦剛剛開(kāi)始使用圖形用戶(hù)界面，軟件工程師通過(guò)“桌面”這個(gè)比喻，幫助人們從實(shí)體辦公轉換到電子文檔辦公。文件夾圖標代表了一組文件;文檔圖標仍然有一個(gè)書(shū)簽樣的折角(盡管它已經(jīng)不被需要了)。垃圾桶樣子的回收站圖標也一直伴隨著(zhù)我們。

同樣地，網(wǎng)頁(yè)也在模仿書(shū)本或者雜志的頁(yè)面。但是這樣的類(lèi)比不適用于現在的網(wǎng)站，更不必說(shuō)為移動(dòng)設備設計的網(wǎng)站。一個(gè)網(wǎng)頁(yè)并不是信息最小的單位。相反，網(wǎng)站是大量信息媒體的集合，并且這些信息會(huì )被分散到不同的屏幕上(或者段落、板塊、視角——時(shí)間會(huì )告訴我們哪種模式更受歡迎)。

設計師從未思考過(guò)的網(wǎng)頁(yè)設計問(wèn)題,PS教程,

圖：內容板塊的整理會(huì )根據需求而變化。

內容板塊也許會(huì )視情況被整理成一個(gè)或者更多頁(yè)面。有些甚至在多個(gè)頁(yè)面上出現;比如說(shuō)導航?；?dòng)設計會(huì )處理不同元素，使得他們能夠適應不同媒介?！皟热輩^塊”這個(gè)概念又更進(jìn)一步。因為每個(gè)HTML文檔(以前成為“頁(yè)面”)可能都包含了很多區塊，網(wǎng)頁(yè)設計師可以將移動(dòng)設備有限的屏幕尺寸作為一種優(yōu)勢。

無(wú)論是不是移動(dòng)設備，網(wǎng)站都可能被組織成不同階層或者其他格式。但是區塊這個(gè)概念，相對與頁(yè)面來(lái)說(shuō)，更強調頁(yè)面間的結構。由于小尺寸的屏幕一次只能呈現一個(gè)頁(yè)面的某些部分，這其實(shí)可以減少混亂的狀況。當出現分區空擋——視覺(jué)停頓——人們就會(huì )迅速的滑過(guò)這個(gè)“頁(yè)面”。

設計師從未思考過(guò)的網(wǎng)頁(yè)設計問(wèn)題,PS教程,

圖：內容可以通過(guò)一些間距空擋或者視覺(jué)停頓來(lái)進(jìn)行分區。

沒(méi)有人說(shuō)過(guò)寬屏網(wǎng)站不能組織有空隙的視覺(jué)效果。但是移動(dòng)設備有限的瀏覽區域使得它們更容易集中注意力。

設計師從未思考過(guò)的網(wǎng)頁(yè)設計問(wèn)題,PS教程,

圖：一個(gè)以移動(dòng)設備為標準的結構，相對于在桌面屏幕上呈現的內容，可能不需要太多分屏來(lái)顯示。

傳統的階層分支是從主頁(yè)(整體預覽)到子頁(yè)面(具體信息)。但是每個(gè)頁(yè)面都是獨立的。一個(gè)以移動(dòng)設備為基礎的結構，無(wú)論如何，更傾向于使用“高挑”的分層結構。6個(gè)移動(dòng)設備的屏幕能提供8個(gè)桌面屏幕一樣復雜的內容。

向前進(jìn)

我們無(wú)法預測將來(lái)什么樣的技術(shù)革新會(huì )將現在的移動(dòng)設計淘汰，但是我們可以向前合理的賣(mài)出幾步來(lái)減少將來(lái)轉變時(shí)可能帶來(lái)的麻煩。記住，我們的目標不是重新發(fā)明你已有的東西，而是以新的眼光來(lái)看待它。

·刪除網(wǎng)站的首頁(yè)

(當然要在做好備份的情況下。)想要找到網(wǎng)站真實(shí)的介紹頁(yè)面，沒(méi)有什么比刪除一個(gè)網(wǎng)站假定的介紹頁(yè)面更有幫助的了。在哪個(gè)頁(yè)面你會(huì )找到介紹網(wǎng)站用途的內容?它可以被替換或者融合到首頁(yè)里去?

·練習重建

當你重新設計一個(gè)單獨的網(wǎng)頁(yè)時(shí)，嘗試將它放入不同的環(huán)境中——并且不僅僅是網(wǎng)頁(yè)瀏覽器。當這個(gè)網(wǎng)頁(yè)被放到郵件中會(huì )怎樣?當它被大聲讀出來(lái)時(shí)有意義嗎?它可以被導出到另一個(gè)網(wǎng)站內容管理系統嗎?它可以被復制粘貼到word文檔中嗎?可以打印可以傳真嗎?不要忽略這些荒謬的假設情景，幾年前，人們還覺(jué)得為320像素的寬屏做設計可笑呢。

·考慮不同的元數據

比如說(shuō)，標題，可能會(huì )被用作為獨立的鏈接。拿網(wǎng)頁(yè)標題來(lái)說(shuō)。盡管“關(guān)于我們”是所有視覺(jué)設計都需要的，但它在谷歌的結果頁(yè)面里就會(huì )顯得很不足?！瓣P(guān)于A(yíng)cme公司對產(chǎn)品質(zhì)量的承諾”不止是一個(gè)標題：它也可以是一個(gè)擁有足夠信息來(lái)決定這個(gè)網(wǎng)頁(yè)是否值得瀏覽的鏈接。

·找出關(guān)鍵內容

在每個(gè)網(wǎng)頁(yè)上，找到能總結這么頁(yè)面上內容的關(guān)鍵句。如果沒(méi)用，這個(gè)頁(yè)面就需要被重新編寫(xiě)，或者分解到別的頁(yè)面去，或者消除掉。例如，你現在閱讀的這個(gè)網(wǎng)頁(yè)有兩個(gè)可能的總結：第一段和第四段的第一個(gè)句子。

·在使用說(shuō)明中放入解釋和替代方案

有時(shí)候某些信息是為特定的一些媒介創(chuàng )作的。一個(gè)視頻可能在某個(gè)特定的尺寸下視覺(jué)效果最后，一個(gè)長(cháng)篇的文檔可能需要分成不同的章節。但是無(wú)法保證其他人不會(huì )將這個(gè)視頻在其他環(huán)境下播放，又或者那篇長(cháng)長(cháng)的文章總是被放在Kindle上閱讀。使用說(shuō)明上寫(xiě)“請在這樣的環(huán)境下瀏覽內容”。建議中就展示“這就是我剛才說(shuō)的意思”。和class=”alignright”是對建議的解釋。style=”float:right”和table ”300″則是使用說(shuō)明。換一個(gè)說(shuō)法，你最后一次將寫(xiě)入HTML而不是在分開(kāi)的CSS文件中使用font屬性是什么時(shí)候?

不同的媒介都有它自己的特性，而設計師就要將這些特性轉化為可利用的優(yōu)勢(比如一個(gè)網(wǎng)站的超鏈接，一個(gè)視頻的動(dòng)態(tài)和路徑，一個(gè)Flash的互動(dòng)動(dòng)畫(huà)，一本點(diǎn)子書(shū)的書(shū)簽，一本有形賬面的可分享性)，在不同平臺上遷移的耗費會(huì )增加我們對某個(gè)平臺的特殊標準。

在過(guò)去的時(shí)間里，網(wǎng)頁(yè)設計師都根據當時(shí)的顯示器來(lái)進(jìn)行網(wǎng)頁(yè)的布置。這導致今天我想移動(dòng)網(wǎng)頁(yè)轉移的困難。我們要吸取過(guò)去的教訓，為將來(lái)可能發(fā)生的變化做準備。