誰說UI/UX只是設計?!心理學還要會咧!!

誰說UI/UX只是設計?!心理學還要會咧!!
誰說UI/UX只是設計?!心理學還要會咧!!

UI/UX竟然如此深奧?設計前還要先懂客戶心理學?!

最近學習了米勒定律和希克定律。 其中關於如何提升視覺感知,有對我很有很大的幫助,其中有一條:平均每個人在記憶時候最大數量為7個。

另外一條則是:眼睛是獲取大量信息的強大工具。 大部分數據被無意識地吸收。 視覺感知可說是UI設計領域的重中之重,特別是產品設計師,作為UI設計師需要去了解和運用這些定律,提升用戶視覺感知。

什麼是視覺感知

視覺感知是人們能夠獲得信息,並由大腦進行處理的最有成效的方法。 人的眼睛有著接收及分析視像的不同能力,從而組成視覺。 腦部將眼睛接收到的物象信息,分析出四類主要信息就是有關物象的空間、色彩、形狀及動態。 有了這些數據,我們可以辨認外物和對外物作出及時和適當的反應。

視覺感知的特點

速度快,所有信息以圖形存儲,人眼閱讀圖像比文字更快,在大部分的情況下,人們感知圖標和插圖的圖片元素比文字更快。 大部分用戶是視覺驅動的,所以視覺感知機制通常應該在設計過程中考慮,研究裡面有幾條規則挺有意思:1.人眼閱讀圖像比文字更快。 2.人們需要約1/10秒來獲得視覺場景或元素的一般感知(該速度對於文字表達基本不可能的)。 3.大腦儲存重要的信息片段通常由固定為視覺圖像,即使它們是通過文字感知得到的。

視覺感知規律心理學家提到的視覺記憶感知三個核心規律,很簡單也好記憶:

1.集中:要記住一件事情或大量的數據,需要集中精力。 否則,數據將在短期記憶裡上被丟棄的機率很高。

2.聯想記憶:大腦裡其實有個巨大的網絡連接,我們會自動將感知到的新的片段能和舊的片段聯繫關聯,感知就會越強,也在設計中也就是常說的用戶習慣。

3.重複:不斷去重複激活一些片段,直到達到長期識別為主。 基於這3個點的的規律我們需要在視覺中可以去運用,通過設計強調突出我們想表達的內容,突出重要信息,通過簡單的交互讓用戶和他之前的經驗關聯。

視覺感知如何運用

1.通過圖標加強感知

2.減少數量加強感知關注度在設計中很重要,如果同時提供了幾個選項,按鈕,選項,用戶的短期記憶會花費更多的時間和精力來考慮,這時候隨時可能會讓用戶跳失。 米勒定律:每個人在工作記憶時候最大數量為7個。 人的大腦短時記憶容量約為“7”。

希克定律:人​​們選擇的元素越多,往往越難選擇。 一但選擇點很多,越是猶豫,分散,特別在電商設計裡面,我們需要平衡所有的信息,給予用戶最有用信息和行動點。

3.通過圖像強化感知

除了圖標,還可以通過圖像來強化感知力,我們應該掌握圖像處理的手法,透過不同的形式來組織內容,圖片沒有秘密也最直接,也最能被記憶。

4.通過導航強化感知

導航是可用性的關鍵因素。 通過tab移動,能記住用戶路徑和數據;因此,設計導航時候,交互和視覺一致和清晰很重要。

5.通過直接的表達加強感知

關於顯示或隱藏的各種菜單的討論目前有很多,我們重要的是要記住,界面的關鍵目標應該是用戶清楚地了解發生了什麼。 他想要的操作在那裡。 因此,關於漢堡包菜單,滑塊,隱藏層次的導航和內容的操作設計應該梳理好頁面功能層級設計,不要去隱藏一些核心操作。

6.通過多媒體藝術加強感知除了以上,還可以通過視頻,音頻,動效,3D等。 通過這種刺激,不僅設計師可以創造更多創意,而且對不同的人記憶加強,比如618,雙11, 造物節一些動效,音頻對大家記憶刺激很強。

視覺感知心理學,更多幫助我們在做UI/UX設計時候,了解人們是如何與世界互動,哪些元素影響他們的行為。 通過設計去改變引導用戶,管控好用戶使用路徑,能夠更好幫助產品成功。

免責聲明:文章內容轉載自公開網絡,如有侵權,請聯繫我們刪除。

 

 

推薦文章:
讓UI課程等等的電腦課程幫你打造一份完美有實力的超強履歷!!


色彩也有魔力?!UI設計師告訴你關於黑色的5個秘密!(上)


重新學習UI UX Python課程 打好基礎輕鬆領高薪


Python是什麼?跟人工智慧有什麼關係?


微軟的麻將人工智慧更勝Al的phaGo?今天揭曉真相!-上


讓你實現目標與夢想的技術實力-Java課程


達內教育海外合作企業


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


2天考取Google Ads證照!新手廣告投放攻略


從無到有 挑戰14小時取得Google證照

關鍵2020!!你我都該知道最新的UI/UX趨勢(下)

關鍵2020!!你我都該知道最新的UI/UX趨勢(下)
關鍵2020!!你我都該知道最新的UI/UX趨勢(下)

2020最新的UX趨勢,你一定要知道哦!

本篇為下篇,上篇「5G影響下的UI設計趨勢」請點此連結

5G影響下的UX設計趨勢

1. 為「速度」而設計(Designing for speed)

如前所述,5G將在全球開始普及,數據傳輸速度大大加快的同時,也就代表讀取時間大大減少,幾乎趨近於零。對UX設計來說這意味著一個新的標準,因為未來任何頁面、任何功能在任何時刻的延遲,用戶都不能再接受。

有傳言2020年所有的iPhone都會支援5G,畢竟由奢入儉易、由儉入奢難,那時要用戶等那怕只有一秒都很難了!

2. 讀取進度條將被淘汰(No more loaders)

▲ 5G影響下的UX設計趨勢:讀取進度條將被淘汰

當網頁在加載時,常常會看到一個讀取進度條、或是不斷轉動的小圓圈,用來告知使用者還需讀取多久的時間。

延續上述,因為過去的數據傳輸速度有限,但5G將使這些讀取進度條消失,漸漸地使用者會不想再看到讀取進度了。

3. 產品負責人不勝枚舉(Product owner everywhere)

產品負責人(Product owner)是指公司裡負責將產品價值極大化,並負責管理產品代辦清單,對產品負有最終責任。通常只會有一位產品負責人。

現今的數位或電子商務公司,整個公司有多個產品負責人已不是新鮮事,有APP程序負責人,後端產品負責人與SEO負責人等等。

2020年後,產品負責人從管理用戶需求、監督開發、確保測試改進到最終增加價值等,將在數位行業中廣泛使用。

UX稽核將成為趨勢(UX audit becoming a trend)

UX Audit、UX稽核,通俗地講就是 UX 健康檢查,UX Audit的目的是讓設計師找出其中使用者經驗還未臻完美的部分,提供改版時優化產品體驗的著眼點。

對快速發展的新創產品而言,很容易將不斷追加額外新功,但UX設計師的首要之務其實是要將一件事做到最好,不斷精進最核心的使用者體驗,這在未來將會更加被重視。

從2019年開始,UI與UX設計便是一種不能擋的趨勢,到2020年依然會持續升溫,並且5G世代會給它們更多發揮的舞台、未來有無限的發展可能!

 

 

 

推薦閱讀:
重新學習UI UX Python課程 打好基礎輕鬆領高薪


還在尋尋覓覓好的UI課程嗎?先來達內看看吧!!


讓UI課程等等的電腦課程幫你打造一份完美有實力的超強履歷!!


電影的駭客畫面是真的! 你懂出現的Python畫面嗎? (上)


厭世代正風行?來上Java課程可以幫你扭轉困境!


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


達內時代科技教育集團簡介


2天考取Google Ads證照!新手廣告投放攻略


從無到有 挑戰14小時取得Google證照


前端工程師課程-標籤的應用(上)-Div篇

關鍵2020!!你我都該知道最新的UI/UX趨勢(上)

關鍵2020!!你我都該知道最新的UI/UX趨勢(上)
關鍵2020!!你我都該知道最新的UI/UX趨勢(上)

快跟著小編一起認識2020最新的UI趨勢吧!

2020 UI、UX設計關鍵影響:5G

▲ 5G 時代的即將來臨,所有產業都牽涉其中。

5G其實更代表我們將迎來嶄新的商業模式、掀起大規模產業變革以及為其他未來科技開啟一扇大門──如自駕車,5G將成為這項科技得以開花結果的最大助力,幾乎任何高科技產業都會受到衝擊。

毫無疑問的,5G將會是2020年影響UIUX設計潮流最大的因素,這也闡明「速度」將會是今年度的核心理念。

了解大環境的因素,接著就讓我們來細看5G影響下的UIUX領域的各別趨勢:

5G影響下的UI設計趨勢

1. 訂製圖像(Custom-made graphics)

但是假如沒有品牌圖像,也不需急著去購買五花八門的圖庫(stock photo)套用,取而代之的則是要設計獨特、屬於自身的且符合品牌形象的圖像在網站或產品上使用。

你知道嗎? 好的視覺設計可以為品牌價值錦上添花,能使產品與服務顯得更有說服力和平易近人,而企業logo或標誌設計是品牌形象的核心。

2. 動態圖像與動作特效(Motion graphics and motion effects)

過去由於4G的侷限,複雜的動態圖像與花俏的動作特效可能會拖慢網頁的讀取,甚至有的使用者根本無法讀取。

但隨著5G的興起,這在2020年後將不再是問題,並徹底改變目前的設計思維,也不用擔心因網速太慢讓巧思被埋沒。

靜態圖像將會變成可以接受、但乏味無聊的,未來如果想奪得客戶注目,設計師必須更具創造性地對內容、字體與圖形等素材等進行動畫處理。

3. 使用對比度稍低的漸變色 (Use of less-contrasting gradient)

「漸變色」可說是近年的熱門配色,而在2020年,對比度較低的漸變色:如藍色到淺藍色、灰色到深灰色等,將流行於網頁整體配色,這樣的設計保持了乾淨簡約的主體,但有保有變化而能不枯燥。

本篇為上篇,下篇「5G影響下的UX設計趨勢」請點此連結

 

 

推薦文章:
關鍵2020!!你我都該知道最新的UI/UX趨勢(下)


重新學習UI UX Python課程 打好基礎輕鬆領高薪


讓UI課程等等的電腦課程幫你打造一份完美有實力的超強履歷!!


前端工程師知識站:怎麼在HTML和CSS中宣告顏色代碼


對人工智慧有興趣的你一定要學Python的八個理由!!(一)


中國IT教育領導品牌 達內教育集團第一家海外授權中心


搶救低薪大作戰,再不來上Java課程就來不及了!


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


2天考取Google Ads證照!新手廣告投放攻略


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略


從無到有 挑戰14小時取得Google證照

 

達內教育更進階!正式與Adobe·ACA 國際認證簽約成功!

達內教育更進階!正式與Adobe·ACA 國際認證簽約成功!
達內教育更進階!正式與Adobe·ACA 國際認證簽約成功!

達內教育跟國際級品牌正式簽約合作,可見它的教育品質真的很讓人放心!

最近上網想學平面設計,搜尋相關的課程介紹,無意中刷到達內教育評價還有他們公司最近發生的事情~

日前,美國納斯達克上市的教育集團達內教育集團在完成了與 Adobe-ACA 國際認證合作的簽約儀式。達內教育集團成都大學生實訓基地綿陽片區總監陳秀軍、院校合作經理週開楠、四川文化藝術學院職教學院範高林院長、張勝蓉副院長、陳淑娟副院長及相關專業老師都出席了此次簽約儀式。

雙方代表表示,就在之前早已達成的合作意見,達內教育為與之展開深度交流,緊緊圍繞後續全校推廣工作如何更有效實施展開密切溝通。四川文化藝術學院希望藉助 Adobe 國際品牌、Adobe 國際認證的獨特優勢,以及達內教育評價在 Photoshop平面設計網頁設計等數位藝術職業教育領域的經驗和成就,以及達內教育集團已獲得 《Adobe 國際認證 ACA 授權考試中心》 的特許資質,規劃在數位藝術領域宣傳和推廣 Adobe 國際認證,引進國際資源,培養國際數位藝術人才。

 

 

 

推薦文章:
2018百度品牌數字資產榜揭曉,達內教育上榜!

 

程式語言百百種,最好最實用的在達內教育通通找得到!!

 

看完這篇,你需要的達內教育都幫你準備好了!!

 

達內教育開幕 培養台灣IT人才進入全球企業

 

前端工程師入門:網頁顏色代碼對照表

 

RWD和AWD是啥?差別又是什麼?前端工程師課程大解密!

 

AI人工智慧進駐零售業;貨架管理快,狠,準!!!

前端工程師暑假先修班(三)-行動優先設計考量

前端工程師暑假先修班(三)-行動優先設計考量
前端工程師暑假先修班(三)-行動優先設計考量

連前端工程師也要順應手機世代!設計網頁必須考量”行動裝置優先”!

行動載具特性

what-is-Mobile1st.png
圖上方為傳統以桌機為主設計模式;下方為「行動裝置優先 (Mobile First)」模式

在這個人手一機的時代,對前端工程師而言,手機、平板等行動設備在操作上與電腦差異很大,因為電腦以滑鼠操作為主、行動設備則是以觸控螢幕為主。因此,兩者的網頁設計開發在互動設計上也有所不同。

行動載具的基本特徵有:可單指或多指操控的多點觸控、多種手勢(如搖一搖、滑動等)以及文字虛擬鍵盤。

除了上述與電腦差異很大的特徵外,在視覺呈現上也與電腦差異也很大,前端工程師設計師需注意的事項如下:

按鈕大小:
電腦因為是用滑鼠操控,所以無論按鈕多小,滑鼠一樣點的到。但是行動裝置是以觸控為主,按鈕太小會增加點擊難度。因此蘋果電腦公司建議 iOS 開發者,任何需要被觸控的 UI (使用者介面) 元件,都不能小於 44*44px。

超連結大小:
除了上述的按鈕之外,也會有文字的超連結內容。同理,也不能讓帶有超連結的文字太小,以利於手指點擊。

UI 設計:
UI 設計必須考量到行動載具的畫面尺寸,因此像按鈕等需要被觸控的 UI (使用者介面) 元件,都需要在畫面中容易被點擊的地方。

點擊效果:
在按鈕效果的開發上,有時滑鼠除了點擊與放開的指令外,還會有滑來滑去的特效。但是行動版裝置是使用手指直接觸控的,所以就不需要此種特效強調。

互動效果:
電腦與行動裝置的運算效能畢竟不一樣。所以有一些在電腦版網頁運行的很順暢的特效 (如 Slide 幻燈片、Carousel 等) 在行動裝置上未必能流暢顯示。所以在設計 RWD 網頁時,要考量到不同設備的效能。

行動裝置優先 (Mobile First) 概念

行動裝置優先 (Mobile First) 是由知名的設計師與 UI規劃師 Luke Wroblewski 提出的,他曾當過美國 yahoo 架構設計負責人,他在2010年的時候進行了一次簡報,標題就是 Mobile First(原始簡報與影片),是指設計網站時,應該以行動裝置的介面、互動、顯示等為主要考量,其他的裝置次之,有別於過去設計網站時「以桌上型電腦為主,再將電腦網站上的內容移植到行動裝置上」的模式。

現在越來越多的人使用行動裝置上網,根據美國最大電信業者 AT&T 的數據,手機流量在 3 年內成長了 50 倍,目前行動裝置上網的使用率仍在激增,而且還有更多的功能持續被開發出來。

相較於傳統的電腦,行動裝置的使用時較不受到時間空間限制,無論是在捷運、廁所等都可使用,人們也花了不少零碎時間使用手機上網,因此瀏覽網頁的頻率跟電腦比起來有過之無不及,所以 Google、Facebook、Adobe 等大公司都開始以「行動優先」的概念來設計自己的產品。

那「行動優先」要如何套用在網頁設計上?一開始會先針對行動裝置的小畫面來設計版面、填入最重要的內容,然後再以這些基本內容都存在的狀況下,針對較大的螢幕裝置 (如平板、進而電腦、電視螢幕等) 漸進式的擴展其佈局。這樣一來,網頁在行動裝置呈現的介面會非常好瀏覽且美觀,該有的功能、內容都有,並且由小畫面擴大至大畫面,內容更大、可擺放的元素就越多、限制也越少 (參見「漸進增強(Progressive Enhancement)」)。但是如果是從大畫面開始設計,當要轉換成小畫面時,其內容的擺放就會越來越困難,常常需要透過刪減內容,才能「塞」入較小的版面當中。這樣一來,有可能行動裝置上出現的是精簡過「簡陋卻可用 (poor but passable)」的內容,而無法給使用者完整的內容 (參見「優雅降級(Graceful Degradation)」)。

若要建立良好的行動裝置使用者體驗 (UX),應考慮以下幾點:

  • 使用者使用行動載具的習慣、方式及思考模式
  • 提供明確精要的內容,比完整的導覽功能更重要
  • 提供清楚且好觸控的導覽選單
  • 簡潔明確的頁面內容
  • 符合行動載具操作特性

現在大多數的 RWD 響應式網站,都是採用行動裝置優先 (Mobile First) 概念來設計,範例如下:

Youtube網站

 

就算是在手機上,也可以很方便的點閱影片、撥放、暫停,甚至對影片作評論、按讚!

 

Airbnb網站

 
 

選單的按鈕設計的大小適中,使用者用手機就可以輕易地透過選單找到目標住處,並且藉由滑動的行為瀏覽屋況,並按下預訂按鍵!

 

本篇為「前端工程師必懂RWD概念」三部曲第三篇,全系列目錄如下:

(目錄)

  1. RWD網頁與傳統網頁設計的差異
  2. 網頁設計的「優雅降級」與「漸進增強」
  3. 行動設備的設計考量

 

 

 

推薦文章:
前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性


前端工程師暑假先修班(二)-“優雅降級”與”漸進增強”使用時機


頂尖前端工程師必備技能之一-掌握RWD基礎概念


中國IT教育領導品牌 達內教育集團第一家海外授權中心


Python課程相關應用—-AI門診你聽過嗎? 以後看病確診只花2秒鐘!!


AI人工智慧產業日新月異,兩年前最新的機器人,如今變成老古董?


人工智慧真的一直為貓奴帶來娛樂!快看這些被合成的貓長什麼樣子!

 

前端工程師暑假先修班(二)-“優雅降級”與”漸進增強”使用時機

 

前端工程師暑假先修班(二)-"優雅降級"與"漸進增強"使用時機
前端工程師暑假先修班(二)-“優雅降級”與”漸進增強”使用時機

 

前端工程師在設計RWD網頁有兩種思維模式可以套用,以下針對這兩部分進行介紹!


標準的RWD網站範例

一般而言,現在的前端工程師網頁設計師在開發網站時都選擇 RWD 網站,在規劃其 Media Query 的尺寸斷點時,有兩種布局斷點的依據:「根據設備」以及「以內容為主」,介紹如下:

1.根據時下的主流設備來佈局斷點 (設備優先)

透過時下主流的設備 (如當代最熱門的手機、平板或電腦螢幕等) 來確定布局的斷點,而在網頁設計中有多套樣式,再應用UI分別對應到各種設備上,如此就可準確定位斷點。這種套用現成的設備尺寸隨然方便,又能精準對應到時下最普及的設備,但是隨著設備不斷汰舊換新,未來總會有無法合適對應到的設備。


「設備優先」示意圖(圖片來源:http://static.codeceo.com)

2.根據網頁內容作為佈局斷點的標準 (內容優先)

這種方式不是以設備為主;而是依據網頁內容的布局、段落等來下斷點,是真正符合 RWD 響應式網站 設計的初衷的方式。此種方式可讓網頁涵蓋所有設備、且閱讀容易,但是斷點會依據設備的不同而落在不同的地方,這樣就沒有標準、精準的設計模式。


「內容優先」示意圖(圖片來源:http://static.codeceo.com)

儘管如此,現今大多前端工程師網頁設計師會更偏向「內容優先」的方式。因為電腦、行動裝置等設備不斷推陳出新,若採用此種方式,雖然無法精準的對應到特定的設備,但是卻可廣泛涵蓋現在、未來全部的設備。且無論瀏覽媒介如何改變,重點依然是網頁內容的本身。

在內容優先的策略中,前端工程師與設計師要讓網站盡可能兼容所有設備:因為我們不知道用戶會用什麼樣的設備來訪問網站,因此,我們必須盡可能地把所有狀況都考慮進來;所有的佈局、元件、區塊等都能兼容不同類型的設備和平台。有「優雅降級(Graceful Degradation)」以及「漸進增強(Progressive Enhancement)」兩種思維模式,可以套在「內容優先」為主的 RWD 響應式網站 設計的過程:

「優雅降級」還是「漸進增強」?


圖上方為「優雅降級(Graceful Degradation)」的網頁設計模式;下方為「漸進增強(Progressive Enhancement)」模式

1. 優雅降級(Graceful Degradation)

一開始就針對「功能最完整」的平台來設計、開發網站,完成所有的功能和體驗後,再針對無法支援所有功能的平台或環境本來修改、刪減功能或是其他的解決方案,以確保網站能在最新、最完整的平台上完美呈現,擁有「最好的使用者體驗」;而在較舊的或是功能限制較多的的平台上,仍然可使用最重要的功能,整體介面「簡陋卻可用 (poor but passable)」,而不是無法使用。

2. 漸進增強(Progressive Enhancement)

這個方式與「優雅降級(Graceful Degradation)」的方式相反,是先針對最不完整或是限制最多的平台上創建最重要的基本內容,用最精簡的方式呈現;然後以這些基本內容都存在的狀況下,開始慢慢擴展其佈局,隨著平台的限制越來越少,內容的完整度也越來越高。這也是「行動裝置優先 (Mobile First) 」的設計方式。我們在下一篇會提到什麼是「行動裝置優先 (Mobile First) 」。

本篇為「前端工程師必懂RWD概念」三部曲第二篇,全系列目錄如下:

(目錄)

  1. RWD網頁與傳統網頁設計的差異
  2. 網頁設計的「優雅降級」與「漸進增強」
  3. 行動設備的設計考量

 

 

 

推薦文章:
前端工程師暑假先修班(三)-行動優先設計考量


CSS中空格逗號區別為何?跟著前端工程師做一次就知道!


SEO無痛該怎麼做?資深前端工程師教你對的方法!


中國IT教育領導品牌 達內教育集團第一家海外授權中心


達內教育評價-故事背後事實的真相甚麼是這樣?!


AI”改編”我最愛的哈利波特!Python課程根本就是萬能的!


“之前提到的SEO優化的結構化資料,這次直接教你如何快速上手! “

前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性

前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性
前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性

想趁暑假結束前成為一名前端工程師嗎?一起來認真來了解RWD網頁跟傳統網頁的差別吧!

在智慧型手機等行動上網的裝置普及以前,早期的前端工程師網頁設計師在做網站時都比較輕鬆。因為網站只需適應一種規格,在製作程序上對比今日的 RWD 網站顯得比較單純。製作程序差異如下:

從上圖可以得知,前端工程師在開發 RWD 網站時,假設要符合不同裝置 (就是電腦、手機與平板等) 的網頁需求,就需要開發出 4-5 種版面,無論是在設計、或是撰寫程式上都比較費時且難以銜接。因此在流程的前半段,必須要規劃 Media Query 的尺寸斷點再去進行網頁設計、應用UI程式撰寫,再根據不同的尺寸斷點進行反覆測試、調整與修正。

(相關文章:Media Query使用方法Media Query中的視窗與頁面尺寸媒體特性一覽表)。

在著手各種載具版面的網頁設計前,應先根據與客戶討論後的結果,粗略進行各種載具的網頁框架規劃 (Wireframe)。Wireframe 是低保真度的設計原型,是在除去所有視覺設計細節 (如色彩、字型等) 之下,進行頁面架構、功能與內容的規劃,藉此更能集中地檢視整個介面流程和架構,方便與客戶溝通想法。

(相關文章:與前端溝通更順利!從了解整體網站的規劃流程開始)。

網頁框架規劃 (Wireframe) 是運用文字線條、方塊,把每個區塊所要呈現的內容表現出來。盡可能減少設計元素,藉以突顯網頁所呈現的介面、動線流程與階層,確認使用者體驗如何。有時為了在視覺上清除區隔不同區域,可以使用灰階色塊作補助。下圖為個人網站的 Wireframe 網頁框架範例。

本篇為「前端工程師必懂RWD概念」三部曲第一篇,全系列目錄如下:

(目錄)

  1. RWD網頁與傳統網頁設計的差異
  2. 內容優先的「優雅降級」與「漸進增強」
  3. 行動載具的設計考量

 

 

 

推薦文章:
前端工程師暑假先修班(二)-“優雅降級”與”漸進增強”使用時機


SEO無痛該怎麼做?資深前端工程師教你對的方法!


還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!


達內教育海外合作企業


達內教育評價-故事背後事實的真相甚麼是這樣?!


網路行銷課程幫你解析3D虛擬人偶APP—-Zepeto爆紅原因!!


想跟上主流進修Python課程,現在是絕佳時刻!