很高興今天有機(jī)會能在這里與大家分享我們在海外項(xiàng)目中有關(guān)UED設(shè)計(jì)規(guī)范及組件庫的經(jīng)驗(yàn)。
此次分享的目標(biāo)是：介紹海外產(chǎn)品的設(shè)計(jì)規(guī)范及其組件庫的基本概念和特點(diǎn)。比較海外組件庫與國內(nèi)設(shè)計(jì)規(guī)范的異同。為設(shè)計(jì)和開發(fā)團(tuán)隊(duì)提供參考，提升設(shè)計(jì)規(guī)范的全球適應(yīng)性。
在海外市場中，我們面臨的一個(gè)主要挑戰(zhàn)是如何設(shè)計(jì)出符合多元文化需求的產(chǎn)品。每個(gè)國家和地區(qū)都有其獨(dú)特的文化背景、語言習(xí)慣和用戶期望，這要求我們在設(shè)計(jì)過程中充分考慮本地化和國際化因素。
本次分享聚焦于海外UED設(shè)計(jì)規(guī)范與組件庫，以及海外產(chǎn)品與國內(nèi)產(chǎn)品組件庫的差異對比。
第一部分：海外UED設(shè)計(jì)規(guī)范和組件庫
海外UED設(shè)計(jì)規(guī)范概述
UED的核心理念為：用戶中心設(shè)計(jì): 強(qiáng)調(diào)以用戶需求為中心，關(guān)注用戶體驗(yàn)。一致性與標(biāo)準(zhǔn)化: 確保用戶能有連貫的體驗(yàn)，解釋一致性在設(shè)計(jì)中的重要性。可用性與可訪問性: 設(shè)計(jì)應(yīng)易于使用，并能被所有用戶訪問，包括有障礙的用戶。
設(shè)計(jì)規(guī)范的價(jià)值是：一致性: 確保產(chǎn)品在不同平臺和設(shè)備上的一致性，提升用戶體驗(yàn)。可用性: 提供直觀、易用的界面和交互，降低用戶的學(xué)習(xí)成本。高效性: 提供標(biāo)準(zhǔn)化的設(shè)計(jì)模式和組件，提升設(shè)計(jì)和開發(fā)的效率。
主要海外設(shè)計(jì)規(guī)范有以下幾種：
Human Interface Guidelines: Apple的HIG強(qiáng)調(diào)簡約、美觀和高效的設(shè)計(jì)，適用于Apple生態(tài)系統(tǒng)。
Material Design: Google的Material Design強(qiáng)調(diào)視覺一致性、響應(yīng)式布局和自然的交互體驗(yàn)。
Fluent Design: Microsoft的Fluent Design系統(tǒng)強(qiáng)調(diào)流動(dòng)性、深度和光影效果，為用戶提供沉浸式體驗(yàn)。
這些年，我們研究了不同平臺（IOS，android和PC）的主要海外設(shè)計(jì)規(guī)范，對沙特當(dāng)?shù)氐淖诮涛幕M(jìn)行調(diào)研，了解當(dāng)?shù)厝藢ι剩褂昧?xí)慣和偏好的具體要求。
通過《myCommunity》 APP的不斷迭代和優(yōu)化，基于海外UI設(shè)計(jì)規(guī)范的主要理念（用戶中心，一致性，可用性，可訪問性，響應(yīng)性），我們提煉并制定了適合自身的海外UI設(shè)計(jì)規(guī)范。
在此過程中，我們搭建了自己的組件庫，旨在通過設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)化對組件庫的應(yīng)用與管理
。
組件庫的價(jià)值是：（提高效率: 提供可重用的UI組件，減少開發(fā)時(shí)間和工作量。保持一致性: 確保不同項(xiàng)目和平臺上的視覺和交互一致性。提升質(zhì)量: 提供經(jīng)過測試和優(yōu)化的組件，減少錯(cuò)誤和提高用戶體驗(yàn)。）
接下來，我將簡要介紹海外組件庫的關(guān)鍵功能。
這是APP的樣式布局實(shí)例。我們的組件庫是基于統(tǒng)一設(shè)計(jì)語言創(chuàng)建的，包含了各種UI組件，如按鈕、表單、導(dǎo)航菜單等。這些組件經(jīng)過精心設(shè)計(jì)和測試，確保在不同項(xiàng)目中都能高效、穩(wěn)定地使用。
在海外市場中，我們常常需要根據(jù)本地需求對組件進(jìn)行定制和擴(kuò)展。
例如，在不同國家可能需要不同的日期格式、地址格式等。我們的組件庫設(shè)計(jì)了靈活的擴(kuò)展機(jī)制，允許團(tuán)隊(duì)快速適應(yīng)各種需求變化。
在沙特地區(qū)，受當(dāng)?shù)匚幕挠绊懀蛻魧︻伾刑囟ǖ钠茫褂昧?xí)慣也略有不同。我們?yōu)榭蛻籼峁┝藢貯PP顏色，并增加了顏色自定義配置及淺色模式和暗黑模式切換的功能。
基于海外組件庫的核心設(shè)計(jì)原則和特性：交互與反饋，視覺層次與信息密度，簡潔與功能性。我們?yōu)椤秏yCommunity》項(xiàng)目的制定專屬規(guī)范，涵蓋按鈕，輸入框，卡片樣式，列表，圖標(biāo)及主題定制換膚等相關(guān)組件庫。
顏色的價(jià)值在于傳達(dá)品牌和情感，并增強(qiáng)可讀性。
文字是信息傳遞的主要載體，標(biāo)準(zhǔn)化的文字設(shè)計(jì)有助于提升可讀性和一致性。
我們不僅制定了文字規(guī)范，還升級了字體規(guī)范，新增了客戶指定的字體，并加入了沙特當(dāng)?shù)氐陌⒗Z字體。
圖標(biāo)在視覺傳達(dá)中扮演重要角色，能有效傳達(dá)信息并提升用戶體驗(yàn)。
按鈕作為作為用戶與系統(tǒng)交互的基本組件，具有觸發(fā)操作，提供用戶反饋等功能，如提交、取消、導(dǎo)航等。
按鈕支持多種狀態(tài)和樣式，如默認(rèn)、懸停、點(diǎn)擊、禁用等，確保在不同場景下提供一致的用戶體驗(yàn)。
主題定制方面，支持根據(jù)項(xiàng)目需求定制UI組件的顏色、字體和樣式。特點(diǎn)包括主題切換和實(shí)時(shí)預(yù)覽功能，確保設(shè)計(jì)的一致性和靈活性。
了解了海外項(xiàng)目的設(shè)計(jì)規(guī)范之后，接下來對比海外項(xiàng)目與國內(nèi)產(chǎn)品組件庫的差異。
在全球化背景下，理解和運(yùn)用海外設(shè)計(jì)規(guī)范及組件庫對設(shè)計(jì)師和開發(fā)者至關(guān)重要。這些規(guī)范和組件庫不僅提供了高效的工具和標(biāo)準(zhǔn)，還能提升產(chǎn)品的用戶體驗(yàn)，確保在不同市場中的一致性和可用性。
接下來，我選取了兩個(gè)易于理解的項(xiàng)作對比：字體閱讀順序和用戶表單設(shè)計(jì)。
國內(nèi)UI設(shè)計(jì)規(guī)范中，書寫采用從左到右（LTR）的方式，這種順序在大部分國家及地區(qū)的語言中是常見的，如漢語、英語。
然而，由于歷史和文化原因，還有部分國家的語言書寫是從右到左（RTL）的，如阿拉伯語、波斯語、希伯來語等。因此，我們的海外UI設(shè)計(jì)規(guī)范不僅支持LTR，還支持TRL，以適應(yīng)不同語言的書寫習(xí)慣。
在UI設(shè)計(jì)中的應(yīng)用：
文本方向，國內(nèi)產(chǎn)品的設(shè)計(jì)規(guī)范在LTR模式下，文字從左向右排列，阿拉伯文書寫和閱讀則從右向左。文本右對齊，標(biāo)點(diǎn)符號位于文字的最左側(cè)。文本右對齊，標(biāo)點(diǎn)符號位于文字的最左側(cè)。
表單布局：在LTR模式下，表單標(biāo)簽（如“姓名”）位于輸入框左側(cè)，用戶從左到右輸入姓名。適配阿拉伯語言時(shí)，標(biāo)簽位于右側(cè)，用戶從右到左輸入。
國內(nèi)的UI設(shè)計(jì)遵循從左到右的視覺流向，確保內(nèi)容展示符合用戶的瀏覽習(xí)慣。
在適配阿拉伯語言時(shí)，頁面布局會鏡像，文本和導(dǎo)航項(xiàng)從右向左排列。
閱讀和導(dǎo)航，在LTR模式下，導(dǎo)航菜單從左到右排列，如首頁、產(chǎn)品、聯(lián)系我們等。
適配阿拉伯語言時(shí)，導(dǎo)航菜單從右到左排列。
對比國內(nèi)產(chǎn)品規(guī)范：
文本對齊：國內(nèi)產(chǎn)品通常采用文本左對齊，確保排版整齊和視覺效果一致性。
操作習(xí)慣方面也存在著明顯的差異，阿拉伯用戶的操作習(xí)慣不同，頁面之間涉及的左右手勢需要鏡像，如右滑退出頁面變?yōu)樽蠡?/span>
同理，表示退出的左向箭頭會鏡像成右向箭頭；涉及到左右分布的操作例如按鈕，tab，加減器開關(guān)都需要鏡像。
為了契合當(dāng)?shù)匚幕?xí)俗，阿拉伯用戶有特定的節(jié)假日和習(xí)慣，部分國家對著裝和飲食有嚴(yán)格要求。
我們?yōu)榘⒗脩粼O(shè)計(jì)了特定的日歷，通過下載我們的APP《myCommunity》來體驗(yàn)這些細(xì)節(jié)。
在移動(dòng)端設(shè)計(jì)中，表單布局是影響用戶體驗(yàn)的關(guān)鍵因素。常見布局有左右結(jié)構(gòu)和上下結(jié)構(gòu)。
國內(nèi)設(shè)計(jì)規(guī)范中，根據(jù)輸入內(nèi)容的多少選擇左右或上下結(jié)構(gòu)。
在海外項(xiàng)目中，優(yōu)先考慮使用上下結(jié)構(gòu)，因?yàn)橥馕淖帜篙^長，左右布局受限。
上下結(jié)構(gòu)：標(biāo)簽和輸入?yún)^(qū)域垂直排列，減少視覺干擾，提高可讀性。
以上是我對海外UED設(shè)計(jì)規(guī)范及其組件庫的相關(guān)分享。
感謝大家的閱讀。希望此次的內(nèi)容能夠給大家?guī)韱l(fā)和幫助。
作者：子非魚安知魚子醬鏈接：https://www.zcool.com.cn/article/ZMTYyNjQ1Ng==.html來源：站酷著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
