設計Landing Page的必備要素

lander-full

建立任何的網站最終目就是讓進入網站的訪可能夠成為你的用戶或買家,當他們願意留下來成為你的會員、提供資料,這個網站目的已經達成,但如果你的網站存在著任何可疑惑瑕疵的問題,這些人非常有可能掉頭就放棄了。

什麼是Landing Page

Landing Page指的是訪客點擊你的刊登廣告或其他形式後直接到達的頁面,這個頁面的任務就是要在簡單的幾個步驟告知使用者你是誰,你會給使用者帶來什麼服務,帶給他們什麼價值,通常這個頁面會清楚的解釋清楚我是誰。

建立Landing Page的目的在於說服你的訪客,並希望他們可以:

  • 填寫表格
  • 提供個人資訊
  • 購買商品
  • 付費訂閱及下載
  • 繼續閱讀更多訊息

Landing Page必要元素

  • 醒目的產品Logo
  • 明確的產品意象或表達產品價值(通常會帶有一張清楚的意象圖)
  • 有限Step中介紹完該產品(通常不超過4步)
  • 簡單又清楚的表單(註冊或登入及搜尋)或按鈕(試用或購買)
  • 增加可信度的合作廠商Logo(或是Facebook讚數、使用者數量)

landing page

繼續閱讀

滿足主流與專業的抉擇

滿足主流與專業的抉擇

一個產品會給各式各樣的使用者來使用,不論這個產品是一般性還是專業性的,產品提供的功能對於不同的人來說感受皆是不同的,一些專家會喜歡複雜、功能多、技術高的產品,但一般使用者只需要滿足需求的功能即可,通常在開發產品之前就要先決定你的TA(Target audience)是誰,他們想要的是什麼,大致上我們可以把產品的使用者分為三種,分別為專家型、隨意型、主流型三種,以下分別介紹

專家型使用者

身為專家型使用者,他們懂得許多專業的技術、術語(甚至比你還專業),喜歡嘗試探索你的產品,並且會提供你各種改良的意見,非常捨得花時間在研究探索你的產品。

隨意型使用者

這群使用者可能用與你類似的產品或服務,他們非常有興趣使用比原先更棒的產品,如果你要提供新的功能給他們,除非這項功能非常簡單,不然他們會非常反彈,因為他們較不喜歡學習新的東西,學習意願較低。

主流型使用者

也就是產品的主要的用戶群,這些人不會因為你的技術高強而使用你的產品,他們使用你的產品單純只是為了完成他們的某項任務,他們喜歡簡單的事物,不喜歡學習,如果你讓他們感到困惑他們很可能馬上換下一家。

幾乎每個人都使用過Office word,也許你已經用了3年、5年,你可能知道一些進階的功能(快速鍵、校正、樣板),但我敢保證還是有很多人用了五年仍然使用word所提供的基本功能,80%的使用者只用了word所提供功能的20%,這80%的使用者就是這些主流型使用者。

8020

忽略專家型用戶

如果你的產品TA(Target audience)屬於廣大的一般使用群,那麼你大可不必理會那些專家使用者所提出來的意見,因為他們完全無法體驗、瞭解一般使用者想要的是什麼,他們老是在追求主流使用者不在乎的功能。你必須謹慎評估他們所提出來的建議,一旦你聽信了他們的意見,你的產品極有可能會讓廣大的主流用戶感到複雜、難用,然後就不用了。

先為主流型用戶設計

為什麼要先為主流用戶設計,因為

  • 主流用戶佔了所有用戶的80%以上
  • 達到主流用戶的需求相對較容易
  • 一旦你滿足主流用戶的需求,他們會忠心的跟隨你

福特的T型車並不是市場上的第一輛汽車,但卻是第一輛為平民大眾製造的汽車。亨利‧福特之所以能徹底改變汽車業,就是因為他毫不動搖地把典型用戶作為自己的目標。他的核心理念就是簡單。

我們要為大多數人製造一輛汽車。這輛車足夠小,哪怕一個人也可以駕駛它、修理它。我們要為它設計出最簡單、最先進的引擎,然後再投入生產。但這輛車的售價卻非常低,不會有人因為工資不高而買不起它。  – 亨利‧福特談T型車

主流 vs 專家

  • 主流用戶希望需求能夠立即的完成,專家用戶喜歡先設定自己的偏好。
  • 主流用戶認為簡單易操作最有價值,專家用戶在乎操控是不是很精確。
  • 主流用戶想要得到滿足需求的結果,專家用戶則是想得到完美的結果。
  • 主流用戶害怕隨意操作弄壞了什麼,專家用戶熱愛拆開產品看的詳細。
  • 主流用戶喜歡看生動的範例和故事,專家用戶則是想看看產品的原理。
  • 主流用戶用戶很討厭複雜的說明書,專家用戶願意看完那無趣的說明。

你是主流型還是專家型使用者?記得,不論你是哪一種類型,當在開發自己的產品時,先了解自己的TA是誰,在以他們的需求判斷你的產品需要主流型或專家型思維,但不管是哪一種,沒有人會討厭簡單的設計

一天一篇,學習思考、分享

Images via wallbase CC License.

參考資料

簡約至上 – Giles Colborne 著

設計四大基本原則

設計四大基本原則

本文為『the non-designer’s design book』一書(Robin Williams著)內容心得系列文章第一篇,這本書如它的書名一般,即使是沒受過正規設計教育的人也能學到正確的設計概念,本系列文章共有六篇,分別為 :

  • 設計四大基本原則
  • 設計第一原則:親密性
  • 設計第二原則:對齊
  • 設計第三原則:重複
  • 設計第四原則:對比
  • 設計四大基本原則總結

沒聽過所以你沒注意過

本書提到一個很重要的觀念,「一旦能夠說出什麼東西的名字,就會很容易注意到它的存在。你就會開始掌握它,擁有它,使它在你的控制中。」。當我們不曉得這些設計觀念的存在,我們也很難會注意到設計作品上問題、缺漏,更不可能做出良好的設計。

四大原則學習步驟

學習四大基本原則  >  認識到自己沒有運用到這些原則  >  應用基本原則

對比(Contrast)

對比的就是避免頁面上有太多相似的元素,透過對比讓最重要的內容能夠稱脫出來,吸引使用者的目光。對比可以使用字體、顏色、大小、線寬、形狀、空間等方式,對比能夠讓訊息更準確傳達、內容更容易被記住、內容更迅速尋找,是設計必備的技巧。

猶豫不絕,如果你想要讓對比效果明顯,就不要害怕,對必的差距要夠大:不要將黑色與咖啡色拿來做對比,這樣的對比力道完全不足。
太多對比,不要在一個頁面使用太多種字體,造成沒有主角的窘境。

重複(Repetition)

重複的目的就是「一致性」,讓設計中的視覺元素在整個設計中重複出現。重複這項技巧在設計上也十分常見,例如你會重複的使用相同顏色、形狀、材質、空間關系、線寬、字體、大小和圖片等。

太多的重複元素,這樣會讓原本想呈現的主體被埋沒,而且令人討厭。

對齊(Alignment)

任何東西都不能在頁面上隨便放置,每個元素都應該與頁面上的任何元素有某種視覺關係,讓設計能夠保持清晰、精巧,提昇整體的可讀性。

避免在一個頁面上混合使用多種對齊模式,也就是不要有一些置左,一些又置右。

盡量避免使用置中對齊,除非這是比較正式、穩重的設計。

親密性(Proximity)

彼此相關的項應當靠近,歸組在一起。如果多個項相互之間存在很近的親密性,它們就會成為一個視覺單元,而不是多個孤立的元素。這有助於組織信息,減少混亂,為使用者提供清晰的結構。

一個頁面有太多孤立的元素

不要在元素間留有相同的空白,除非這些元素互相之間是存在著關係的。

任何的設計理論都有一定的價值存在,Robin所提除的四大基本原則更是基礎中的基礎,雖然這四種元素都是極為簡單的觀念,我們卻時常沒去注意誤觸了許多設計上的陷阱。知易行難,在說明瞭解與實際操作的差距,如果連「知」都無法達到(瞭解),那根本無法做到「行」這點(實作),做任何東西皆如此,「無知難行」。

一天一篇,學習思考、分享

Images via wallbase CC License.

參考資料

the non-designer’s design book – Robin Williams著

簡單卻又不簡單

簡單卻又不簡單

簡單並不意味著欠缺或低劣,也不意味著不注重裝飾或完全赤裸。裝飾本身應該緊密接近設計本身,任何無關的要素都應該予以剔除。 – Paul Jacques Grillo 

簡單的設計在最近很熱門,很多的設計師最近都在討論,而且還出現了許多的設計法則,最有名的應該就是『設計減法法則』,我認為簡單的設計最大的價值在於它能讓產品最吸引人的特色完整清楚的表現出來。

別製造無用又複雜的產品

功能增加的越多,就越難發現真正對使用者有價值的新功能。盲目添加的新功能早晚會成為用不到的垃圾功能,每次所添加的功能都會造成整體產品維護的成本越來越高,面對多變市場的彈性也越會來越低,到最後使用者開始找不到你真正想提供的價值,讓他們感到不高興,自然市場就會離你而去。

簡單不是簡陋

簡單並無意味要最簡化,以腳踏車為例子,如果我們把腳踏車最到極簡化就會成為一部單輪車,如圖

單輪車

這輛車擁有腳塔車最核心的元素,可是說是一個簡單的設計,但是把你抓上去騎你會騎嗎?

一樣以單輪車為例子,獨輪車,如圖

獨輪車 

獨輪車是一個以人力推動的小型運載工具,最早或希臘人或漢朝人發明。它符合工效學,能夠抵受在崎嶇路面行進,但是不能在太過傾斜的地面作物資或工具運輸。這種車具有極佳的操控性,並能夠將承載物體的重量平均分佈在拉動者與車輪本身。

同樣是以單輪為設計核心,一個極其難用,一個極其有用,實用性天差地遠,這也顯示了好的設計是『簡單而不是簡陋』。

簡單卻又不簡單

簡單的設計看來簡單,其實非常的難。發想一個新功能也許不容易,但要抉擇刪除一個功能、隱藏元素卻比這難上許多,很多時候你無法得知刪除這個功能會帶來怎樣的影響,也許使用者會愛上你這個決定,相對的你也可能引來使用者的抱怨。

簡單設計的核心是為了讓使用者發現最核心、最重要、最有價值的部份,最重要的是讓他們使用最少的力氣就能完成目標。功能多不一定表示它是複雜、不好的,市場上還是有很多的all in one的產品備受喜愛。

一天一篇,學習思考、分享

Images via wallbase CC License.

參考資料

獨輪車

簡約至上

良好使用者介面的八項特質

良好使用者介面的八項特質

任何一款應用程式都是透過它的介面與使用者來溝通,使用者並不會直接接觸在背後的技術,介面是應用程式與使用者溝通的橋梁,一款應用程式的成敗時常決定於它的介面設計。

那麼怎麼樣的使用者介面才能稱作好的呢,一般來說良好的介面皆擁有這八項特質,它們分別是

清晰

應用程式必須清楚的透過文字、圖形、流程圖等方式告知使用者如何使用,一個清晰的應用程式不需要操作手冊,並還可以減少使用者操作上錯誤。

簡潔

應用程式必須保持介面上的簡潔,不要在螢幕上同時充斥的大量的資訊,這樣使用者要找到他想要的東西會非常的困難,操作起來也會相當的複雜繁瑣,最好畫面上的資訊要能夠做到不多不少的境界。

熟悉

人類對見過的事物容易留下印象,在介面擁有一些人們熟悉的標誌,或是一些生活上公認的意象,幫助使用者理解。

反應

反應可以分為兩個方面來看,一個是應用程式執行的反應速度,會不會讓使用者感覺到停格、遲緩,另一方面是使用者操作的回饋,使用者在主動行為操作時,有沒有給予一些提示以及回饋。

一致

良好的應用介面必須有用一致性的體驗,應用程式的操作、美觀、與回饋都能夠維持相同的風格以及流程。

美觀

喜歡美麗的事物是人性的特質,擁有美麗的外觀當然是一個良好的介面設計的重點。

高效

時間就是金錢,一個良好的介面不需要透過繁雜的流程才能達到使用者的目標,它能提供一些更簡便的方式來完成,例如手勢、快速鍵、重力感應等…

容錯

人有失手、馬有亂蹄,每個人都有可能會犯錯,良好的應提供犯錯的使用者從來或復原的機會,不會因為使用者不當的操作給予嚴厲懲罰。如勿刪檔案、信件復原。

我們在喝湯的時候需要的是湯匙,如果拿了一隻叉子給你喝湯你肯定時分痛苦,我們會拿著碗作為盛湯的器具,並不會拿著盤子去盛湯。使用者介面就好比是用餐時的餐具,提供正確的方式輕鬆的讓使用者查看(喝)應用程式的資訊(這碗湯),設計應用程式介面的時候,你可以檢查你的設計是否符合這八點特質。

一天一篇,學習思考、分享

Images via wallbase CC License.

對比

對比

對比的基本思維是,要避免頁面上的元素太過相似。如果元素(字體、颜色、大小、线寬、形狀、空間等)不相同,那就干脆讓它們截然不同。要讓頁面引人注目,對比通常是最重要的一個因素,正是它能使讀者首先看這個頁面。

things which look different from one another

對於剛進入設計領域的人來說,對比是一堂必修課,修練這項技能使你想要表達的訊息更容易的被接收,通常這些相互並存,對比越鮮明,視覺效果就越強烈。 陳穎青(老貓)曾在『二十年編輯生涯悟一辭』一篇中提到 : 『出版業是個仰賴對比的事業,從印刷字的原理,到寫作的方法,到行銷技巧,到如何說一個好故事,對比都是一個迷人且威力無窮的概念。』

對比的種類

點 / 線        面 / 線
平面 / 體積      面 / 體
大 / 小        線 / 體
高 / 低        平滑 / 粗糙
長 / 短        硬 / 柔
寬 / 窄        靜 / 動
厚 / 薄        輕 / 重
明 / 暗        透明 / 不透明
黑 / 白        連續 / 間斷
多 / 少        液態 / 固態
直 / 曲        甜 / 酸
尖 / 鈍        強 / 弱
水平 / 垂直      大聲 / 輕聲
斜線 / 圓形

Ittens’s contrast list

對比作品欣賞

https://i0.wp.com/image.fotomen.cn/2011/02/012-contrast.jpg https://i0.wp.com/image.fotomen.cn/2011/02/013-contrast.jpg https://i0.wp.com/image.fotomen.cn/2011/02/016-contrast.jpg https://i0.wp.com/image.fotomen.cn/2011/02/025-contrast.jpg https://i0.wp.com/image.fotomen.cn/2011/02/031-contrast.jpg https://i0.wp.com/image.fotomen.cn/2011/02/037-contrast.jpg https://i0.wp.com/image.fotomen.cn/2011/02/041-contrast.jpg對比

對比的核心

對比讓表達可以更清楚的傳遞

對比讓重要資訊可以更快速找到

對比可以強化表達主題

對比可以留下更深刻的印象

對比會讓好的更好壞的更壞

對比可以讓你更認識你自己!!

來玩個遊戲

透過對比的方式,列出一張表格,橫向分別是五年前的自己、現在的自己、以及五年後的自己,分別在縱向列出自己能力或者(已完成/正在做/想要)完成的事情,比較這張表的自己有甚麼差別。

五年前的我

現在的我

五年後的我

從今天開始留意觀察,讓我們發現更生活上的對比!

每天一篇,學習思考、分享

認識通用設計 Universal Design

何謂通用設計?

讓我引用通用設計小魚的一句話來解釋何謂通用設計 :

通用設計是希望儘可能讓設計能為更多數人所使用

來說說通用設計的歷史,在1970年代時,歐洲及美國一開始是採用「廣泛設計」(accessible design),針對在不良於行的人士在生活環境上之需求,並不是針對產品。當時一位美國建築師麥可‧貝奈(Michael Bednar)提出:撤除了環境中的障礙後,每個人的官能都可獲得提升。他認為建立一個超越廣泛設計且更廣泛、全面的新觀念是必要的。也就是說廣泛設計一詞並無法完整說明他們的理念。

1987年 ,美國設計師,朗‧麥斯(Ron Mace)開始大量的使用「通用設計」一詞,並設法定義它與「廣泛設計」的關係。他表示,「通用設計」不是一項新的學科或風格,或是有何獨到之處。它需要的只是對需求及市場 的認知,以及以清楚易懂的方法,讓我們設計及生產的每件物品都能在最大的程度上被每個人使用。

而後來通用設計又被稱為全民設計,意思是符合所有使用者皆可以使用的一個設計。

通用設計的原則

在1990年 中期,羅納德‧麥斯與一群設計師為「全民設計」訂定了七項原則,以下會以加入我的想法與大家分享 :

原則一:公平地使用

通用設計的必須是具有公平性的,不論任何的年紀、種族、文化都要能夠公平地使用你的產品。

原則二:可以靈活地使用

通用設計必須能夠迎合不同使用者的操作行為及習慣。

原則三:簡單而直觀

通用設計的產品必須是簡單易用的,使用者不需要透過特別的知識背景或是技術訓練就能夠使用,通用設計也必須是直觀的,即使無法認知某些語言或符號使用者也可以透過直觀的提示完成目的。

原則四:能感覺到的信息

色盲患者無法察覺到一些顏色,設計上必須也將顏色納入考量,讓大多數的使用者皆可接受到產品所傳達的訊息。

原則五:容錯能力

通用設計必須要能夠接受使用者操作上錯誤,必須將錯誤發生的所帶來的傷害降到最低,設計上可以加上一些直觀的提示避免減低錯誤機率。

原則六:儘可能的減少體力上的付出

就好比剪刀、板手這類的工具,設計因盡可能降低使用者的負擔。

原則七:提供足夠的空間和尺寸

提供足夠的空間和尺寸,使使用者能夠接近使用   提供適當的大小和空間,讓使用者接近、夠到、操作,並且不被其身型、姿勢或行動障礙的影響

Dean McMenamin錄下了影片為我們介紹實際的例子

審視產品是否符合通用設計

一個產品或設計是很難符合所有人的習慣的,而你必須建立一個大多數人都能接受的方法,我認為的通用設計審視方法是 :

1. 色彩

你的產品必須讓不同色彩感覺的人都能辨識操作它,否則將可能讓使用者產生危險(紅色警示訊息)

2. 族群

你的產品要盡量符合各種文化差異的種族的習慣,以及各種年齡族群的使用,特別是老人及小孩。

3. 習慣

你的產品不可為了達到通用而違反了大多數使用者的操作習慣

4. 用心

就像星爺在食神電影所說的,設計的關鍵在『心』這個字上,為什麼你想要設計一個通用的產品,是因為可以賣給更多人嗎? 還是可以得到名聲成就? 我認為都不是,通用設計是一個很美麗的概念,通用設計讓所有的人都享有設計所帶來的方便。

通用設計的例子

色彩應用

http://blog.yam.com/yocofish/article/36781850

台北市常見的馬路呱呱鳥

http://blog.yam.com/yocofish/article/29509716

考慮視障者的馬路設計

http://blog.yam.com/yocofish/article/27416374

汽車設計

https://www.youtube.com/watch?v=IpYFqtqgHnA

參考資訊 :

通用設計小魚維基百科

Images via wallbase CC License.

平面設計和網頁設計的差異

今天在ㄇㄞˋ點子上看到這篇『平面設計和網頁設計的區別』覺得分析的非常精闢,也讓我想更進一步的瞭解這兩者

不是設計背景出身的我特別加上了實作以及理念的概念加以分析

以該篇文章為基礎,我認為平面設計與網頁設計的差別有三點

設計過程 –

平面設計師使用排版軟體依照想法把視覺元素排列組合

網頁設計師依照功能需求,使用html+css方式將設計草圖實做出來

我認為最大的差異就在設計過程直觀及不直關,平面設計者較能隨心所欲地控制視覺元素而不受框架限制,而網頁設計會受限於html以及css結構(還記得css3還沒出來之前的網頁設計嗎?)

設計理念 –

平面設計利用色彩、排版展現以品牌、訴求、品牌、概念為出發點去設計,目的在於吸引使用者目光,展現100%的魅力。

網頁設計目的在於與使用者溝通,因展現100%的溝通力設計得更佳人性、在實作上會盡可能的將訊息的排列整齊,顏色中和(避免疲勞),讓使用者能夠更輕鬆的接收訊息。

呈現載體 –

平面設計最終會使用影印機的方式輸出,使用的色彩單位是CMYK,而網頁設計使用螢幕作為輸出設備因此色彩單位為RGB、

平面設計的字體較不受載體限制(印在紙上就對了),而網頁設計受限於實際載體限制(例如對方電腦沒有需要的字體、或是作業系統的差異)、

平面設計使用實體紙張,使用尺寸單位為吋/公分等,網頁設計使用螢幕之解析度像素作為單位。

平面設計為靜態呈現,網頁設計帶有動態及互動的方式呈現。

平面設計輸出後無法在同一個載體上二次更新,網頁設計可N次更新。

平面設計具有紀念價值與實體質感,網頁設計則無

平面設計傳播成本高且範圍較小較慢,網頁設計傳播成本低且範圍高較快

平面設計觀看學習成本低(老少皆宜),網頁設計觀看學習成本較高(老一輩的人不懂得使用電腦)

Images via wallbase CC License.

配色的含意

網頁常用配色

網頁常用配色

今天在UX Movement上看到一篇教你如何正確使用網站配色的文章,在這邊加上自己的經驗與大家分享。

為網站選擇配色是一個很重要的任務,要如何選擇一個正確的顏色是不容易的,網站的顏色選錯很有可能會惹惱你的使用者,因為他們會感到不適、盲目、不信任問題等等,身為設計師的你就必須要知道如何使用正確的顏色。 繼續閱讀