今天小編給大家一起學(xué)習(xí)下設(shè)計(jì)師從未思考的網(wǎng)頁設(shè)計(jì)問題，我感覺以下文章非常不錯(cuò)，所以推薦給廣大設(shè)計(jì)師們共同學(xué)習(xí)。設(shè)計(jì)一個(gè)好的網(wǎng)頁、包括手機(jī)網(wǎng)站，相對(duì)于改造已具規(guī)格的網(wǎng)站，為智能手機(jī)重新設(shè)計(jì)網(wǎng)頁就比較輕松。不僅如此，讓人尷尬的是，在CSS獲得大眾認(rèn)可多年后，當(dāng)時(shí)缺乏遠(yuǎn)見這個(gè)問題，現(xiàn)在仍舊折磨著我們這些編寫HTML的人群們。所以這將是個(gè)非常棘手的問題。

 

　　將舊的網(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)擊的了。

 

　　為未來可能發(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ì)師選擇多頁布局而不是長條形布局，那么傳統(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)的問題。

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

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

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

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

  

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

　　在過去的幾年里，網(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)備，也為今后的網(wǎng)頁設(shè)計(jì)方面打下堅(jiān)固的基礎(chǔ)。