六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

主題設(shè)計(jì)神器來啦!知識(shí)點(diǎn)Get了嗎?

2021-3-22    ui設(shè)計(jì)分享達(dá)人

設(shè)計(jì)系統(tǒng)基本就是組織如何構(gòu)建數(shù)字產(chǎn)品的故事,在公司內(nèi)部,設(shè)計(jì)系統(tǒng)改善了產(chǎn)品團(tuán)隊(duì)之間的協(xié)作,而設(shè)計(jì)和工程團(tuán)隊(duì)之間面臨的一個(gè)常見問題是:共享品牌準(zhǔn)則和界面信息。在開發(fā)過程中,應(yīng)該遵守還原設(shè)計(jì)的內(nèi)容,但是我們都知道這并不是那么簡(jiǎn)單。


從目標(biāo)達(dá)成的角度來說,設(shè)計(jì)規(guī)則的創(chuàng)建與執(zhí)行同樣重要。我們期望參與產(chǎn)品的每一個(gè)角色,都能記住設(shè)計(jì)規(guī)范,結(jié)合設(shè)計(jì)原則(Perceptual Pattern )最終達(dá)成界面展示在用戶面前的樣子。這也就需要設(shè)計(jì)系統(tǒng)內(nèi),有一套控制性強(qiáng)、拓展性高的方法來維系產(chǎn)品的風(fēng)格呈現(xiàn),也就是我們今天將要討論的設(shè)計(jì)變量(Design Token)


構(gòu)成


什么是設(shè)計(jì)變量(Design Token)


在數(shù)字產(chǎn)品的概念中,許多中心和微小的UI信息片段將在多個(gè)平臺(tái)上使用,被稱為:設(shè)計(jì)變量(Design Token),他們是設(shè)計(jì)系統(tǒng)中設(shè)計(jì)語言的構(gòu)建塊,也是設(shè)計(jì)決策的呈現(xiàn)。他們維護(hù)核心樣式的所有值:間距,顏色,版式,斷點(diǎn),動(dòng)畫,字體,平臺(tái)比例尺,組件狀態(tài)等,最終通過數(shù)據(jù)表示。命名規(guī)范和結(jié)構(gòu)化的約束,可確保產(chǎn)品體驗(yàn)的統(tǒng)一度與靈活性,更進(jìn)一步可為產(chǎn)品打造賦有情感的品牌認(rèn)知。


而對(duì)于SaaS類或者APass類的公司而言,設(shè)計(jì)變量還可提供給多個(gè)合作商所用,滿足多種定制化的訴求。



實(shí)施例舉


在以往的真實(shí)產(chǎn)品中,示例(如下),設(shè)計(jì)人員會(huì)發(fā)現(xiàn),實(shí)現(xiàn)和樣式管理的環(huán)節(jié)在開發(fā)過程中是完全斷掉的,設(shè)計(jì)語言轉(zhuǎn)化為開發(fā)的語言時(shí),缺少風(fēng)格系統(tǒng)完整性的延續(xù)。我們通??吹降膕tyle代碼都是一些幾乎沒有體感的參數(shù),且公司產(chǎn)品體量越龐大復(fù)雜,想要全局迭代就越是痛苦。


但如果我們將這些參數(shù)封裝起來,用語義化的方式來進(jìn)行描述,就增強(qiáng)了“系統(tǒng)下的畫面感”,如“font-size-level03”、“border-distinguish-background” 等,就是設(shè)計(jì)準(zhǔn)則下情景化的歸類與描述。


但語義命名只是一個(gè)最終呈現(xiàn),真正讓設(shè)計(jì)與開發(fā)者都能”讀語義,識(shí)運(yùn)用“。還需要我們?cè)谠O(shè)計(jì)系統(tǒng)中建立一整套完整的設(shè)計(jì)變量對(duì)應(yīng)表,并讓大家對(duì)它們有著清晰的記憶。

這里我們將以群核科技旗下,工具設(shè)計(jì)系統(tǒng)(Tools )中的設(shè)計(jì)變量為例,來給大家進(jìn)行詳細(xì)分析。首先在設(shè)計(jì)原則下,我們引申出設(shè)計(jì)變量規(guī)則的制定原則:精準(zhǔn)、靈活、易讀。

意指歸類與對(duì)象的精準(zhǔn)性,配置化的靈活度,語意命名上的易讀性。


對(duì)所需范圍進(jìn)行定義,命名規(guī)則與前端書寫規(guī)則達(dá)成約定。


變量的“結(jié)構(gòu)完整”,有助于設(shè)計(jì)與工程團(tuán)隊(duì)在長(zhǎng)期維護(hù)上,提升靈活度,3層繼承結(jié)構(gòu),很大程度保證了“精準(zhǔn)”“靈活”這一原則。


定義完基礎(chǔ)規(guī)則,我們具體來看設(shè)計(jì)變量在產(chǎn)品構(gòu)建中,三大主用途——1,主題定制   2,跨平臺(tái)呈現(xiàn)  3,優(yōu)化工作流


主題定制


我們找到產(chǎn)品界面中定義“核心樣式”的部分,例如顏色,字體大小,空間,動(dòng)畫,陰影,斷點(diǎn)等等。通過這些具有統(tǒng)一命名規(guī)則的實(shí)體,用于代替硬編碼的值,直接集成到設(shè)計(jì)系統(tǒng)下的組件庫里,也在日常的產(chǎn)品界面開發(fā)中使用。


通過繼承,別名變量起到了銜接全局變量和指定變量的作用,指定變量影響了最終的樣式呈現(xiàn),從而實(shí)現(xiàn)主題功能。


單個(gè)主題可供多個(gè)產(chǎn)品團(tuán)隊(duì)使用,主題本身也提供可配置化,即擁有不同的主題外觀體驗(yàn)?zāi)芰Α纭翱蛻粼V求”、“用戶自定義”,“產(chǎn)品定位差異”等,也可通過創(chuàng)建新的主題,完成新的對(duì)應(yīng)表,繼而產(chǎn)生相應(yīng)的風(fēng)格模式,例如“暗夜/日光模式”或“舒適/緊湊”布局模式,“企業(yè)品牌”定制模式等等。


主題功能在產(chǎn)品中體現(xiàn)


跨平臺(tái)呈現(xiàn)


多端設(shè)計(jì)是未來發(fā)展趨勢(shì)。最新的iPadOS 14還為許多應(yīng)用程序添加了側(cè)邊欄,包括音樂,照片,文件和快捷方式,更加高效。它使iPad更具M(jìn)ac感,也降低了學(xué)習(xí)成本。


目前我們很多產(chǎn)品都要考慮在 Web、iOS、Android 上設(shè)計(jì)。如果有新的功能增加,設(shè)計(jì)和開發(fā)會(huì)消耗較多的時(shí)間在上面,而且很難去統(tǒng)一把控。


Design Token 在跨多端設(shè)計(jì)中不僅是存儲(chǔ)樣式的變量,更是一套用于各操作系統(tǒng)間進(jìn)行翻譯的口令。我們希望通過變量來控制一些樣式的屬性,在不同終端做到自動(dòng)化的映射。


假設(shè)在移動(dòng)端正文字用14x,而在pc端為12px,雖然它們值不一樣,但他們都是使用的color_text__primary,在不同終端變量會(huì)自動(dòng)根據(jù)設(shè)備來取不同的值,通過一套設(shè)計(jì)就能實(shí)現(xiàn)多端運(yùn)行,提升效率節(jié)約成本。


優(yōu)化工作流

擁有了強(qiáng)大的設(shè)計(jì)變量樣式庫之后,它對(duì)我們的工作流程將帶來什么革新呢?


顯而易見的是,團(tuán)隊(duì)將節(jié)省非常巨大的工作量,我們不再依賴單個(gè)工程人員的修改質(zhì)量,且能更大程度減少跨組依賴。此外,早期設(shè)計(jì)工具無法與設(shè)計(jì)變量生成器進(jìn)行本地通信,我們通過優(yōu)化Sketch插件,完成了變量命名數(shù)據(jù)的輸出,使得工程人員可直觀看見變量名稱。這將為設(shè)計(jì)驗(yàn)收節(jié)省大量時(shí)間。


產(chǎn)品的大批量的歷史問題也得到解決。數(shù)字化的自動(dòng)識(shí)別效率遠(yuǎn)高于痛苦的人工調(diào)整,設(shè)計(jì)師和產(chǎn)品團(tuán)隊(duì)都將收獲全新的迭代方式,這是有歷史意義的一刻。


結(jié)語


簡(jiǎn)而言之,設(shè)計(jì)變量作為一個(gè)管理風(fēng)格樣式的有效手段,可集成主題管理,對(duì)跨平臺(tái)開發(fā)也同樣起到作用。簡(jiǎn)化團(tuán)隊(duì)合作協(xié)作流程,提升迭代維護(hù)效率。尤其適用于需要構(gòu)建多個(gè)Web應(yīng)用程序和跨終端應(yīng)用程序的組織。


文章來源:站酷   作者:酷家樂UED

藍(lán)藍(lán)設(shè)計(jì)www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



分享本文至:

日歷

鏈接

個(gè)人資料

存檔