響應式排版中的基礎知識

2023-01-10 21:09:04 字數 3559 閱讀 8839

網際網路何時誕生?專家對此說法不一,30多年前,網際網路的應用非常有限,僅僅一小部分人能夠接觸到這種」先進」的技術。然後經歷了30多年的指數級發展,它取得了夢幻般的成功。

十年前,網際網路剛剛處於雛形階段,到如今,整個產業的格局已呈」大而不倒」的局面。

而網際網路的陣線也拉長了,從傳統的」老式桌面」到各式各樣的可攜式裝置,從由網際網路引領的」大資料時代」,再到儲存的新革命」雲概念」。而裝置呢?手錶、眼鏡各種以網路為基礎的可穿戴裝置正在蓬勃發展。

如穿越到十年前,向別人描述今日的網路現狀,他肯定會一笑而過,認為這只不過是」海市蜃樓」般的幻想。

但十年後的今天,這些革新一一實現,不再是觸手不可及的幻象,這所有的技術革新切切實實的就在我們身邊。

感謝那些為網際網路做出貢獻的革命者們!

這張圖能夠很好的闡述響應式設計的思想。

而聰明的luke wroblewski提出了」移動優先(mobile first)」設計戰略,他認為,這種設計模式:先從移動裝置開始設計,那麼設計便能很輕鬆的向下相容。(通俗的講,就是大屏肯定能完美呈現小屏上的設計,而小屏不一定能裝得下大屏上的設計。

)世界一直在變,它的變數很大,而引領世界改變的網際網路變數大到你無法想象。因此,迅捷的變化節奏導致網際網路工作者的工作注定是」高強度、快節奏」的,要麼適應變化,要麼引領變局,要麼被淘汰,無非這三種。正因如此,這個行業競爭激烈,新生力量層出不窮,很難有人一直保持前列。

而本文的目的,不是為各位設計師羅列出森嚴的」軍規」,然後以專家的口吻說」你必須得這麼幹」。本文的目的是更新大家適應網頁設計的觀念,掌握哪些經歷過時間檢驗的基本準則,以更好的適應變化。

新時代的網頁設計充滿了各種新技術、各種新的jquery指令碼、各種響應式網頁設計——但我們依然不能忽略最基本的網頁設計基礎。

新時代的網頁設計以響應式理論為藍本,力圖在不同裝置上呈現一致的網頁瀏覽體驗。

而響應式時代依然不便的設計基本準則又是什麼呢?一起來看看下面的七條,望諸君設計時銘記於心。

1.優秀的網頁設計應該簡約,並且完整

設計大師往往都是哲學家,他們往往保持一種包容的設計態度,不會採用極端的設計方式,他們的設計往往是一種平衡之美。

我們可以畫出乙個橫軸,左邊是簡約、右邊是完整,而最好的設計會聰明的選取中值(如下圖)

網頁設計必須簡約,任何無用的特質都必須移除;與此同時,網頁設計必須能夠滿足使用者需求。

太簡單的網頁如果沒有空能支撐,那麼從裡到外就真的是」空洞無物」了。

太複雜的網頁如果缺少簡約的收束,那麼便會」尾大不掉」,讓使用者閱讀困難。

「言簡意賅」的設計才是好設計,乙個設計師的掌控力得以體現。

總結起來就是一句話:乙個布局、風格具有簡約美,同時又能提供大量有價值資訊的**必定受使用者歡迎。

2. 使用者往往缺乏耐心

網際網路充滿了機遇,每個人都想通過簡單的操作便能獲取所需資訊。

網際網路的資訊浩瀚如海,你並不是唯一的資訊提供者。

亙古不變的是:使用者的時間寶貴,他們缺乏耐心。如果你不能提供便捷的資訊,那麼他們會選擇離開,進而尋找其他**來謀求資訊。

想要做好這一點?說白了,就是資訊層級要清晰,載入速度要快。

但其實也不簡單,就載入而言,我舉乙個例子

上面這三種載入方式,中間的方式最迂腐:使用者會想』這等到什麼時候會是個頭啊!

右面呢?右面會不會好一點?答案是不會,想想你高中時上午最後一節課,你在等下課,所以你一直仔細的看著表上的指標,你越急躁,觀察的越仔細,越能感覺到」時間太慢」。

左面好不好?也不好,旋轉指示條轉的快,使用者會認為載入速度很快,使用者會想」載入的這麼快還沒有完全載入,這是設計問題嗎?」 轉的慢,使用者會認為」這是網路問題,載入的居然這麼慢」

說實話,上面這三種方式都是告訴使用者:請等待! 所謂的進度讀取、旋轉讀取只不過是一種心理**:無論多塊、進度條多充盈,在沒有完成載入前,使用者還是看不到頁面資訊。

而最近出現了一種新方法,luke wroblewski在他的文章中提到過,叫做框架讀取,也就是載入了多少內容,呈遞多少內容,推薦各位嘗試。

參考閱讀:

談談載入(loading)的那點事

推薦:如何加速網頁的開啟速度

高階揭秘:為你的響應式設計提速

3. 網頁設計必須具備一致性

想像一下你作為網路瀏覽者時的經歷:你在瀏覽網頁時,一般都不會詳細閱讀內容,你會快速滑動頁面,大致瀏覽一遍,如果看到感興趣的資訊便停下,進行仔細閱讀。這是一種使用者習慣。

萬物作而弗始,生而弗有,為而弗恃,功成而弗居。夫唯弗居,是以不去。——道德經

在john allsopp《網頁設計之道》中有這樣一句話,大致是這麼一種意思:設計師不應該作為使用者的對立,設計師應該尊重使用者的習慣,讓設計適應使用者的習慣,而不是做乙個高高在上的**者。功成身退,這似乎有種」偉大的設計是**」的意味。

好了,我們把話題扯回來,使用者的這種閱讀習慣意味著什麼?這意味著設計必須具有高度的一致性,使用者看到前面的布局,對後面的布局有一種」預期」:他會認為後面的頁面布局也是如此,不要破壞使用者的閱讀節奏感。

同樣的,同一頁面的各個元素以及各個子頁面之間必須要具備一致的聯絡性,也就是說設計師的設計模式應該專一,再舉個簡單的例子,如果主頁的導航欄布置在上方,子頁面的導航欄布置在側邊,你認為使用者會高興嗎?

參考閱讀:

高手之路:如何設計才能讓**風格協調一致

4.將導航選單作為互動的」核心」

上面已經提到過,各個頁面的導航欄必須具備一致性。有時候,好的網頁設計和差的網頁設計差距就在導航選單,好的導航選單成就了一款設計,壞的導航毀滅了一例**。

每當使用者有問題時,他都會習慣性的翻閱導航選單,這也是使用者習慣,要注意。個人認為,導航是網頁設計的核心元素,影響到**的互動性,至於要怎麼設計,仁者見仁,智者見智了。

參考閱讀:

大型**導航設計指南

網頁新趨勢:革命性的創新網頁導航設計

5. 留白和資訊同樣重要

「內容為王」、」內容至上」是嗎?那我就提供大量豐富資訊,把**全部都填滿。」這種設計思想真是大錯特錯,太片面了。

你要有這樣一種觀念:留白也是設計的一部分,那些不使用的空間也能發揮其作用。從使用者的角度來說,留白很好,讓布局更有條理,資訊更清晰。

太剛強的事物容易折斷,有張有弛才能長久。網頁設計也是同理,多給使用者一點閱讀呼吸空間,讓他們感受到網頁設計的」節奏感」。

各位可以自行想象一下,如果一款網頁中一點留白都沒有,到處都是密密麻麻的文字和影象,你會感到舒服嗎?

參考閱讀:

我們為何要在設計中重視」留白」

6.用心的設計都有清晰的視覺層級

明智的設計師不光會創造內容,還知道如何高效組織內容,傳遞資訊。視覺層級對於資訊呈遞來說異常重要,優秀的視覺層級還能幫助設計師強化設計理念。

空間排布、間距使用、整體布局,關於這些的**已經夠多了,歸根結底,無非是為了打造優秀的視覺層級。

參考閱讀:

如何在設計中建立良好的視覺層級

7.永遠不要忽略字型

內容為王,那麼內容是由什麼包裝的呢?答案是字型,這種小小的細節能造就大差異。字型的清晰與否決定了資訊呈遞的結果。

扁平化設計強化了大家對於字型的重視,這一點我很贊同。

還有一點趨勢不容忽略:螢幕越來越大。那麼字型呢?

本文雖然是老生常談,但是我相信這些準則不會隨流行而改變,想要設計出更優秀的網頁?別著急複製流行了,先磨磨你的基本功吧。

原文位址:omahpsd

編譯:@martinrgb

版面與排版的基礎知識

版面與排版基礎知識主要包括版面構成要素 排版技術術語 校對符號的作用及各種版式處理等。這些知識是雷射照排工藝中不可缺少的重要組成部分。一名合格的工藝設計人員和操作員只有掌握 排版語言 和一些排版工藝知識,才能達到高效率和高質量。一 書籍的組成 眾所周知,一本書通常由封面 扉頁 版權頁 包括內容提要及...

導遊基礎知識重點排版整理

導遊基礎知識重點 特產 1 世界三大飲料 茶葉 咖啡 可可 2 世界三大高香名茶 祁門紅茶 印度大吉嶺茶 斯里蘭卡烏伐茶 3 中國古代著名的三大特產 瓷器 絲綢 茶葉 4 中國三大瓷都 景德鎮 醴陵 釉下彩餐具 德化 白瓷塑 5 中國傳統文化的三大國粹 中醫中藥 國畫 京劇 6 中國傳統工藝 三絕 ...

版面與排版基礎知識書籍製作必備

作者 徐麗媛 版面的構成 版面與排版基礎知識 版面與排版基礎知識主要包括版面構成要素 排版技術術語 校對符號的作用及各種版式處理等。這些知識是雷射照排工藝中不可缺少的重要組成部分。一名合格的工藝設計人員和操作員只有掌握 排版語言 和一些排版工藝知識,才能達到高效率和高質量。1.書籍的組成 眾所周知,...