400-611-9921
2015-12-03
2360
知名Web設(shè)計(jì)師Andy Clarke最近發(fā)布了320 and up,開源快速開發(fā)模板Mobile Boilerplate的分支。這恰好和他之前媒體查詢的樣板(media queries)相反,新的樣板從較大寬度樣式下的小屏幕樣式和圖層集合開始開發(fā),而不是開始于為小屏幕裁剪大寬度的樣式。
這絕對(duì)是利用特定寬度樣式的最好方法,在結(jié)合媒體查詢或者JavaScript 之后。但當(dāng)我看到對(duì)應(yīng)特定設(shè)備寬度的像素值時(shí),我有些緊張:320*480,等等。相比之依靠一個(gè)假想的寬度,比如960個(gè)像素,這當(dāng)然是一個(gè)進(jìn)步。但我擔(dān)心的是,這依然只是為了匹配現(xiàn)在流行的顯示窗口,而簡(jiǎn)單地堆砌顯示內(nèi)容。這也是Mark所說的,“被版面局限”了的設(shè)計(jì)方法( the “canvas in” approach ):
“我相信,為了迎合網(wǎng)頁本地布局設(shè)計(jì)的需要(不考慮設(shè)備),我們不得不從版面布局出發(fā),再考慮我們的內(nèi)容創(chuàng)意。而我們需要的其實(shí)是反過來,內(nèi)容優(yōu)先來設(shè)計(jì)布局?!?
如今,可能的情況是你的內(nèi)容就是基于像素的(圖像或者視頻),而且它們的尺寸恰好適合特定設(shè)備顯示窗口的大小。但根據(jù)我的經(jīng)驗(yàn),待處理的大多數(shù)內(nèi)容仍然屬于文字類。但像素卻不是處理文字的最好單元。這也是我傾向采用基于字體大?。╡m-based)的媒體查詢的原因之一。
我的基本觀點(diǎn)是,媒體查詢應(yīng)該服務(wù)于內(nèi)容。某些站點(diǎn)可能適合把直線型布局應(yīng)用于小屏幕,而柱狀布局應(yīng)用于更大設(shè)備(比如平板電腦)的屏幕。對(duì)其他站點(diǎn),即使平板電腦尺寸的屏幕,直線型布局卻更適合。這都取決于內(nèi)容。
我最喜歡的關(guān)于內(nèi)容優(yōu)先的一個(gè)例子,是Dan 的文章type-inspired interfaces。我認(rèn)為網(wǎng)頁設(shè)計(jì)者的一個(gè)共識(shí)是,設(shè)計(jì)都應(yīng)該內(nèi)容優(yōu)先,但我們現(xiàn)在卻過于依賴類似畫布的工具,比如某些預(yù)先確定的網(wǎng)格類工具(predefined grids)。類似地,在框架和信息構(gòu)架領(lǐng)域,當(dāng)我們需要專注于內(nèi)容時(shí),我們經(jīng)常不自覺地去首先設(shè)計(jì)菜單和導(dǎo)航界面。
這是最近《移動(dòng)優(yōu)先》作者Luke對(duì)Jared說的一段話,其中提到了他的設(shè)計(jì)原則“內(nèi)容優(yōu)先,之后才是導(dǎo)航”(“content first, navigation second”)。
Luke曾經(jīng)廣為人知地對(duì)互聯(lián)網(wǎng)開發(fā)者宣傳移動(dòng)為先( mobile first )的方法。這種方法用于發(fā)現(xiàn)推送給用戶的重要內(nèi)容,的確非常適用。但不要太絕對(duì),有時(shí)候這種方法也等同于“打印樣式表優(yōu)先”(print-stylesheet first),或者某種“非桌面環(huán)境優(yōu)先”(non-desktop environment first)策略。正確應(yīng)用的關(guān)鍵,還是在于你是否把內(nèi)容優(yōu)先放在第一位(you’re thinking about the content first and foremost):
“屏幕空間被無端占用80%時(shí),你才被迫注意到留在屏幕上的,應(yīng)該是對(duì)于你的用戶或者業(yè)務(wù)最重要的特點(diǎn)集合。而不是一堆界面的碎片,或者可要可不要的內(nèi)容。你應(yīng)該明確什么是最重要的?!?
但這不是說你不能把某些不太相關(guān)卻很不錯(cuò)的內(nèi)容放到屏幕上。但這應(yīng)該添加到可能需要某種條件來延緩加載的部分,而不是一股腦地把廚房水池一類的信息放到開始界面上。
移動(dòng)頁面設(shè)計(jì)上,已經(jīng)出現(xiàn)了一系列非常不錯(cuò)的典范設(shè)計(jì)。然而,傳統(tǒng)桌面網(wǎng)頁設(shè)計(jì)卻成為了死氣沉沉和自鳴得意的代名詞。這導(dǎo)致的是一堆充斥著陳舊無聊內(nèi)容的網(wǎng)站,就像 Merlin 的Flickr相冊(cè)Noise to Noise Ratio 列舉的:
“當(dāng)然,這之中還是有一些非常不錯(cuò)的原創(chuàng)性內(nèi)容,雖然隱藏在一堆廣告、自助鏈接和附加新聞中。”
對(duì),在圖中接著找。負(fù)責(zé)地說,里面“的確”存在有用的內(nèi)容,不是嗎?
還有一點(diǎn)共識(shí),就是移動(dòng)用戶是不能糊弄的。應(yīng)該盡快給這些總是匆匆忙忙的用戶所需要的內(nèi)容。但它的推論不一定成立。為什么我們認(rèn)為桌面用戶就更能夠忍受如此多不需要的內(nèi)容呢?
不需要的頁面冗余一般看做對(duì)頁面的破壞,用戶可以利用Readability,Safari’s Reader和Instapaper等工具繞開它們。這些工具的存在,一方面是為了從多個(gè)內(nèi)容來源為讀者聚合信息(free up content from having a single endpoint),另一方面也將有用內(nèi)容從被濫用得令人窒息的頁面容器中解放出來。這不是新的現(xiàn)象,當(dāng)然,在RSS出現(xiàn)之前我們就在瀏覽信息。但這些閱讀輔助工具也應(yīng)該當(dāng)做對(duì)我們的警告,或者挑戰(zhàn)。我們?cè)趺茨苡眠@樣一個(gè)用戶討厭的方式來承載內(nèi)容,以致于用戶不得不求助Readability或者Instapaper。
一些臃腫頁面(常常是支離破碎的設(shè)計(jì))的設(shè)計(jì)者,在設(shè)計(jì)站點(diǎn)時(shí)(通常是新的站點(diǎn)),都有一個(gè)另外的移動(dòng)版本,通常是“m.子域名”的命名方式。這個(gè)版本中,內(nèi)容并不是用桌面版本中呆板、冗余、分頁的方式被呈現(xiàn)。我注意到用戶在用Twitter或者email等工具分享鏈接時(shí),分享的通常是這個(gè)簡(jiǎn)潔的m.版本。這些站點(diǎn)影響的廣泛擴(kuò)大,簡(jiǎn)單地說就是因?yàn)樗鼈兏右鬃x,在任何平臺(tái)都是如此。
我們以前讀到過,就像我在點(diǎn)評(píng)(the comment)Paul對(duì)移動(dòng)開發(fā)者的誤導(dǎo)(Paul’s misguided post on mobile design)時(shí)說的:
“在過去的壞日子里,為習(xí)慣屏幕閱讀的用戶設(shè)計(jì)獨(dú)立而平等的只提供文本閱讀的站點(diǎn)的確是常事。這樣的確細(xì)分了用戶,但顯然,這只是取巧的方法?,F(xiàn)在,我們知道習(xí)慣屏幕閱讀的用戶也應(yīng)該享受和其他一樣的內(nèi)容服務(wù),前提是站點(diǎn)應(yīng)該用正確的方式構(gòu)建(有趣的是,一些站點(diǎn)注意到“傳統(tǒng)的”非屏幕閱讀用戶也傾向于更快更簡(jiǎn)潔的站點(diǎn)版本,這應(yīng)該能給那些仍然認(rèn)為桌面和移動(dòng)站點(diǎn)完全不同的設(shè)計(jì)者好好上一課)。”
毫無疑問,我完全不同意Jakob Nielsen的說法(the proclamation from Jakob Nielsen):
“桌面的電腦和移動(dòng)設(shè)備是完全不同的。唯一能帶給用戶良好體驗(yàn)的,就是為一個(gè)產(chǎn)品設(shè)計(jì)兩個(gè)獨(dú)立的版本,當(dāng)然,一般來說移動(dòng)版本會(huì)少一些功能。”
我很困惑,不知道為什么網(wǎng)站既然飽受簡(jiǎn)潔可用性方面的質(zhì)疑,設(shè)計(jì)者還要另外設(shè)計(jì)一個(gè)版本,而讓不用這個(gè)版本的每個(gè)人幾乎無法忍受另一版本的臃腫混亂。要注意,我不是暗示每個(gè)用戶都得到一樣的體驗(yàn),事實(shí)上遠(yuǎn)非如此。不過多虧漸進(jìn)式增強(qiáng)設(shè)計(jì)(按照正確方法的響應(yīng)式設(shè)計(jì)正是漸進(jìn)式增強(qiáng)的一個(gè)完美應(yīng)用),我們能提供用戶需要的內(nèi)容,并在任何設(shè)備上用最好的效果顯示。
所以,這才是顯出不同的關(guān)鍵:內(nèi)容優(yōu)先,而不是設(shè)備。
這是一個(gè)對(duì)網(wǎng)頁設(shè)計(jì)來說激動(dòng)人心的年代。種類不斷增長(zhǎng)的設(shè)備,直接揭示了我們以前傳統(tǒng)、固定大小、內(nèi)容臃腫的桌面中心設(shè)計(jì)方案有多么自以為是和南轅北轍。就像面對(duì)任何變動(dòng)一樣,總會(huì)有些緊張和神經(jīng)質(zhì)。開發(fā)者正慌不擇路地發(fā)掘移動(dòng)設(shè)備帶給我們的變革和好處:
“我應(yīng)該學(xué)習(xí)Objective-C嗎?”
“我應(yīng)該掌握HTML5嗎?”
“我應(yīng)該學(xué)習(xí)移動(dòng)App構(gòu)架嗎?”
你也許正做著這樣的事。不過,千萬要記住內(nèi)容策略(content strategy)的應(yīng)用。
關(guān)注我們:在查找公眾號(hào)中搜索:zomsky1688,或者掃描下方二維碼快速關(guān)注。
本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天
關(guān)鍵詞:移動(dòng)網(wǎng)站建設(shè),高端網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),廣州響應(yīng)式網(wǎng)站
400-611-9921
020-29860991
地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場(chǎng)16F
業(yè)務(wù) QQ: 3561401262
E-mail: sales@zomsky.com