Design system / Guideline分析 #2

洪晴
Oct 24, 2020

--

設計111 / 洪晴 / 40768017T / 20.10.22

-

本週的品牌系統分析分別選用兩款通訊軟體:Line以及Messenger的Guideline分享。

Line的Guideline將說明有關App icon、按鈕中的色彩與字型等規範;Messenger的Guideline則說明有關協作中的icon使用規範。

LINE

參考來源:https://line.me/en/logohttps://developers.line.biz/zh-hant/docs/line-login/login-button/#design-guidelines=

1. icon

原則上,LINE的所有icon都必須照原樣使用,不得變更或修改。

icon有提供不同型態檔案,皆可單獨下載使用。

另外,icon在淨空區最小尺寸方面也有制定標準規範:
使用上需要為icon提供一個“淨空區”,以保持其可見性和獨立性。
而淨空區內不得放置其他元件。
此外,由於不能確保是否有足夠的可讀性,因此不得在最小尺寸以下使用icon。

官方的禁止行為包括:
更改(縮小、拉伸、傾斜或旋轉)、間距變化更改字體顏色變化套用效果(陰影、輪廓、3D顯示)、置於淨空區內的外加物件在降低可見度的背景上使用以及於文本內使用

另外,LINE也有提供三種類型的社交icon(社交媒體上的按鈕,可讓您鏈接到外部網站並在社交媒體上共享該頁面上的信息)可以使用。官方建議盡可能使用基本類型,但根據需求亦可選用其他類型的社交icon。
而社交icon亦有相對應的淨空區及最小使用尺寸規範。

2. 登錄按鈕

LINE制定了將其登錄按鈕添加到外部應用程式時,需要遵守的設計準則:只要圖像符合「LINE圖標的高寬比不變、LINE圖標仍然清晰可見」兩條件,就可以根據將要顯示的設備來放大或減小LINE Login按鈕的大小。

另外,LINE的登錄按鈕只能使用以下幾種顏色

  • 基本顏色:#00C300
  • 懸停:#00E000
  • 按:#00B300
  • 禁用:#C6C6C6
  • 字體顏色:#FFFFFF

至於登錄按鈕中的文字內容,官方推薦的LINE登錄按鈕文字為“ Log in with LINE ”。並表列出了各種語言的推薦短語:

如果要使用自行決定的自定義按鈕文字內容,務必確保遵循以下準則:

  • 沒有換行
  • 文字清楚地向用戶指示該按鈕用於使用LINE登錄

此外,也可以單獨使用LINE icon,而無需使用任何按鈕文字內容作為LINE 登錄按鈕。

關於文字內容字體的規範:按鈕文字內容使用的字體必須具可讀性。相對於各圖像尺寸推薦的字型尺寸也都附加在官方提供之PSD檔案中。

左:Padding規範 / 右:淨空區

登錄按鈕在Padding與淨空區也有相關的規範,圖片較易理解,此處不再多加贅述。

最後,LINE官方也列出了三項針對登錄按鈕的常見錯誤:

  • 使用非指定顏色
  • 使用舊版的LINE icon
  • 使用其他icon或修改後的icon代替標準版LINE icon

3. LINE app 連結按鈕

“ 添加朋友 ” 和 “ LINE登錄 ”是在點擊時將用戶重新定向到LINE帳戶的一些按鈕範例。官方將它們統稱為“ LINE app 連結按鈕 ”
這些按鈕上的文字內容是可以被編輯的。對文字內容進行編輯時,務必使用清晰的字體(如英文字型:Helvetica Neue;日語字型:UD新ゴPro),亦不要添加任何斷行,並將其保留在規定的可編輯區域內。

最後是LINE app 連結按鈕關於淨空區、最小尺寸及最大尺寸的相關規範:

左:淨空區 / 中:最小尺寸 / 右:最大尺寸

Messenger

參考來源:https://en.facebookbrand.com/messenger/assets/messenger-zh-hant?audience=messenger-landing

1. 品牌許可

Messenger規定在以下情況下使用Messenger品牌時,需要經過品牌許可:

  • 電視或網絡上出現的行銷或廣告
  • 書籍、戲劇、電視節目或電影劇本中提及
  • 包裝之印刷輸出

Messenger上出現的廣告將由廣告政策小組審核,並且不需要此處的許可。而所有其他形式的行銷均不需要許可,但必須遵守品牌Guideline。

申請品牌許可信中,需要包括以下內容:

  • Messenger標誌會被使用的顯示方式之最終版本
  • 廣告、電影或節目的詳細說明
  • 引用提及Messenger的該段腳本
  • 非英語的申請信必須先被翻譯

2. 擺放位置

正確擺放位置範例

Messenger Logo絕對不能在品牌Logo旁邊或上方,因為它可能暗示了正式的合作夥伴關係或營銷材料歸Messenger所有。Messenger Logo應始終放置在品牌Logo下方,作為輔助Logo。

3. 最小尺寸

Messenger Logo應始終小於非合作夥伴Logo,但不能小於30px x 30px或0.25in x 0.25in

4. CTA(號招性用語)

在非合作夥伴關係的情況下使用Messenger時,必須始終附有CTA,例如“在Messenger上與我們聯繫”,以加強觀者對非合作夥伴關係的辨識度。

請選擇以下批准的CTA之一與Messenger Logo一起使用:

  • 在Messenger上與我們聯繫
  • 在Messenger上與我們聊天
  • 通過 m.me/username 在Messenger上與我們聊天

另外,不要使用Messenger Logo代替“ Messenger ”一詞,也不要在提及Messenger 時使用“ Facebook ”或“ FB ”等字眼,錯誤示範如:

  • “ Facebook Messenger ”
  • “ FB上的Messenger Bot ”

5. 針對官方合作夥伴

官方合作夥伴意指已與Facebook簽訂了合同,並且是Messenger團隊的聯繫人

針對官方合作夥伴的Logo擺放位置規範

雙方Logo應始終並排,並且應始終包含“ + ”。切勿將它們堆疊或彼此分開。

針對官方合作夥伴的Logo尺寸規範

雙方Logo的大小應相同。Messenger Logo絕對不能變小,或從屬於其他Logo或合作夥伴Logo之下。

6. 官方規定的「要做」與「不要做」

要做:

一定要使用Messenger Logo和明確的CTA(號召性用語),例如「在Messenger上與我們聯繫」。

務必使用默認的紫外線漸層色與白色螺栓形狀的Messenger Logo,若因技術限制無法使用正確顏色,可將Logo轉為黑色與透明螺栓形狀之版本來使用。

不要做:

請勿使用舊版Logo。舊版Logo具有尖角特徵,新版Logo則是圓角的。

請勿以任何方式修改Messenger Logo,例如更改設計、比例或顏色。如果由於技術限制而無法使用正確的顏色,請使用黑色。

請勿對Messenger Logo做變形或旋轉、修飾或嘗試重新創建Messenger Logo。要調整大小請確保在大多數軟件程序中按住Shift鍵,以在放大或縮小時保持比例。

除非您與Facebook簽署了正式的合夥協議,否則請勿在Messenger Logo旁邊擺放您的Logo,這樣的作法可能暗示存在合夥、贊助或認可。另外,不要使Messenger Logo比您的Logo更突出。

不要使用Messenger Logo代替“ Messenger ”一詞。

不要在提及Messenger時使用“ Facebook ” 或 “ FB ”,錯誤示範如:“ Facebook Messenger ” 或 “ FB上的Messenger Bot ” 等。

--

--