技術(shù)資訊

網(wǎng)站設(shè)計(jì)師應(yīng)該掌握的設(shè)計(jì)問題

2014-11-28 09:11:26

今天小編給大家一起學(xué)習(xí)下設(shè)計(jì)師從未思考的網(wǎng)頁設(shè)計(jì)問題，我感覺以下文章非常不錯(cuò)，所以推薦給廣大設(shè)計(jì)師們共同學(xué)習(xí)。設(shè)計(jì)一個(gè)好的網(wǎng)頁、包括手機(jī)網(wǎng)站，相對于改造已具規(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文件都是在對屏幕尺寸的粗略估計(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)都會受到影響。我們不能控制這些電子信息將會在什么樣的設(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é)會丟失。

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

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

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

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

作為一個(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)對現(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é)。但是無法保證其他人不會將這個(gè)視頻在其他環(huán)境下播放，又或者那篇長長的文章總是被放在Kindle上閱讀。使用說明上寫“請?jiān)谶@樣的環(huán)境下瀏覽內(nèi)容”。建議中就展示“這就是我剛才說的意思”。和class=”alignright”是對建議的解釋。

在過去的幾年里，網(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ǔ)。

上一篇：網(wǎng)站優(yōu)化的外鏈應(yīng)該怎么發(fā)

下一篇：網(wǎng)頁設(shè)計(jì)中如何使用透明效果