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