久久亚洲中文字幕精_精品国产一区二区三区不卡_99久久久无码国产精品免费手机_国产亚洲精品久久久久动漫

設(shè)計(jì)師從未思考過的網(wǎng)頁設(shè)計(jì)問題發(fā)布者：本站     時(shí)間：2022-01-19 14:01:25

這絕對(duì)是一篇發(fā)人深省的好文章，推薦設(shè)計(jì)師們好好讀一下。

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

將舊的網(wǎng)站轉(zhuǎn)換成互動(dòng)設(shè)計(jì)是件很令人頭疼的事情，不是因?yàn)槠聊怀叽绲牟煌且驗(yàn)榇蟛糠諬TML文件都是在對(duì)屏幕尺寸的粗略估計(jì)下編寫的。在蘋果于2007年中推出iPhone之前，設(shè)計(jì)師至少可以依賴屏幕700像素的寬度(如果他們忽略可訪問性)。像導(dǎo)航欄、兩欄或三欄布局、鼠標(biāo)懸停效果這樣的常規(guī)布局已經(jīng)完全適應(yīng)了以鼠標(biāo)為基礎(chǔ)的寬屏配置了。設(shè)計(jì)師們已經(jīng)按照大家的預(yù)期將左上角的logo做成可點(diǎn)擊的了。

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

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

手機(jī)也有內(nèi)容問題

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

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

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

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

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

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

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

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

設(shè)計(jì)師從未思考過的網(wǎng)頁設(shè)計(jì)問題,PS教程,

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

如果設(shè)計(jì)師選擇多頁布局而不是長(zhǎng)條形布局，那么傳統(tǒng)的結(jié)構(gòu)則會(huì)使信息變得更難被獲取。

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

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

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

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

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

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

3. 預(yù)防(或者至少最小化)類似問題的再次發(fā)生。

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

設(shè)計(jì)師從未思考過的網(wǎng)頁設(shè)計(jì)問題,PS教程,

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

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

有什么內(nèi)容是值得保留的?后退一步——什么是內(nèi)容?

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

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

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

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

設(shè)計(jì)師從未思考過的網(wǎng)頁設(shè)計(jì)問題,PS教程,

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

影響重要性的因素有：

·時(shí)效性

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

·距離

這些信息會(huì)受到地理位置的影響嗎?(例如，當(dāng)?shù)氐拇黉N，自然災(zāi)害，城市或地區(qū)性政策變更，演唱會(huì))

·范圍

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

·規(guī)模

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

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

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

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

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

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

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

設(shè)計(jì)師從未思考過的網(wǎng)頁設(shè)計(jì)問題,PS教程,

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

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

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

設(shè)計(jì)師從未思考過的網(wǎng)頁設(shè)計(jì)問題,PS教程,

圖：內(nèi)容可以通過一些間距空擋或者視覺停頓來進(jìn)行分區(qū)。

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

設(shè)計(jì)師從未思考過的網(wǎng)頁設(shè)計(jì)問題,PS教程,

圖：一個(gè)以移動(dòng)設(shè)備為標(biāo)準(zhǔn)的結(jié)構(gòu)，相對(duì)于在桌面屏幕上呈現(xiàn)的內(nèi)容，可能不需要太多分屏來顯示。

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

向前進(jìn)

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

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

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

·練習(xí)重建

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

·考慮不同的元數(shù)據(jù)

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

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

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

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

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

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

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