亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

作為軟件產(chǎn)品的設(shè)計者，你是否有過設(shè)計還原度的困擾？比如開發(fā)的界面總是對不齊，界面顏色、組件行為總是不統(tǒng)一，排查設(shè)計問題需要大量的時間，并且總是沒辦法根治？

作為一名資深設(shè)計師，今天我和大家分享下在設(shè)計還原度方面的一些方法和思考。

一、什么是設(shè)計還原度？

設(shè)計還原度是指設(shè)計以及最終產(chǎn)品符合頂層設(shè)計理念和設(shè)計規(guī)范，在不同界面、不同系列的產(chǎn)品中，保持相應(yīng)的一致性，嚴格還原設(shè)計稿。設(shè)計還原度除了指界面上的還原度外，交互和動效設(shè)計的還原度也包含在內(nèi)，今天我們重點分析UI設(shè)計和交互設(shè)計的還原度問題。在業(yè)內(nèi)，我們常說設(shè)計還原度低，是指最終開發(fā)完成的產(chǎn)品未還原設(shè)計。

常見的設(shè)計還原度問題包括：

• 基本界面還原問題，通常以不符合4大基本設(shè)計原則（親密、對齊、重復(fù)、對比）的形式出現(xiàn)。
• 界面一致性問題，比如不同界面的按鈕尺寸、樣式不一致，顏色存在細微差異等。
• 交互一致性問題，比如產(chǎn)品中不同彈窗的彈出和關(guān)閉方式，是否都支持使用Esc、Enter快捷鍵等交互細節(jié)差異。
• 不同平臺的自適應(yīng)問題，比如設(shè)計稿是iOS的，但還要開發(fā)H5和安卓平臺，進而導(dǎo)致的適配問題。
• 功能未還原，比如漏掉了界面元素或某種狀態(tài)，導(dǎo)致產(chǎn)品功能不如預(yù)期。

二、還原度低的原因有哪些？

設(shè)計還原度低的原因錯綜復(fù)雜，軟件開發(fā)的各個環(huán)節(jié)都可能對還原度造成影響，我們主要從設(shè)計階段和開發(fā)階段進行分析，并給大家分享我們團隊的解決方案。

1、設(shè)計階段

設(shè)計階段是定義最終產(chǎn)品的重要環(huán)節(jié)，分析還原度問題，源頭是重點考察的因素，根據(jù)我的經(jīng)驗，設(shè)計階段以下環(huán)節(jié)很容易出問題。

1）規(guī)范定義和維護問題：團隊如果有多名設(shè)計師，需要制定明確的規(guī)范維護、更新機制，確保大家的信息始終是同步的，如果大家不是采用相同版本的規(guī)范的進行設(shè)計，勢必會在設(shè)計階段便出現(xiàn)不一致的情況。所以設(shè)計規(guī)范的修訂和同步是首要需要解決的問題。

2）設(shè)計質(zhì)量不過關(guān)：設(shè)計質(zhì)量一般根據(jù)設(shè)計師的水平以及設(shè)計評審來進行保障，設(shè)計評審是設(shè)計階段最后一道關(guān)卡，需要有明確的流程和工具進行控制。

3）缺少設(shè)計說明：有很多設(shè)計思想是設(shè)計師之間的默契（或者說設(shè)計師的常識），但對于后續(xù)工序，比如開發(fā)、測試人員，他們極有可能缺少相關(guān)背景知識，此時需要補充設(shè)計說明給予輔助，明確闡述設(shè)計意圖。

4）交付流程混亂：設(shè)計的最后一個環(huán)節(jié)是交付給開發(fā)，因為敏捷開發(fā)的緣故，節(jié)奏十分緊湊，設(shè)計往往在交付給開發(fā)后，還會有一些細微的改動，如何讓開發(fā)能固定到對應(yīng)的設(shè)計版本進行開發(fā)，是很困難的一個管理問題。

2、開發(fā)階段

開發(fā)階段是產(chǎn)品的生產(chǎn)環(huán)節(jié)，有一句話說得很好：“優(yōu)秀的產(chǎn)品是生產(chǎn)出來的，不是測試出來的。”生產(chǎn)質(zhì)量也是開發(fā)環(huán)節(jié)的重中之重，我們也常將設(shè)計還原度作為開發(fā)生產(chǎn)質(zhì)量最重要的保障。開發(fā)階段容易在以下環(huán)節(jié)出問題：

1）開發(fā)對的設(shè)計稿：這個問題看起來很可笑，但確實存在大量開發(fā)開發(fā)錯了版本的情況。在沒有規(guī)范的流程下，開發(fā)很容易拿著舊版本的設(shè)計稿進行開發(fā)，直到測試環(huán)節(jié)才發(fā)現(xiàn)一開始的參考就錯了。

2）設(shè)計語言轉(zhuǎn)換為開發(fā)語言：開發(fā)的本質(zhì)其實就是將設(shè)計語言翻譯成代碼語言，這個轉(zhuǎn)換的過程開發(fā)主要依賴于設(shè)計稿上的標(biāo)注、說明和視覺效果?？村e或看漏說明往往會導(dǎo)致還原度問題；

3）用錯變量或不用變量：設(shè)計一致性如果要保證，研發(fā)側(cè)必須要對顏色、間距等基礎(chǔ)內(nèi)容制定統(tǒng)一的全局變量，便于和設(shè)計規(guī)范進行對齊。同理要保證所有組件的行為一致，則研發(fā)需要封裝統(tǒng)一的組件庫，通過復(fù)用組件代碼的方式開發(fā)產(chǎn)品，才能確保所有組件的行為是一致。

三、如何提高設(shè)計還原度？

我們分析完了還原度低的原因，再一起看看如何通過方法和工具，來提高產(chǎn)品設(shè)計還原。

其實問題主要集中在設(shè)計階段和設(shè)計與開發(fā)的信息同步上，需要確保設(shè)計師和設(shè)計師之間的協(xié)同順暢，設(shè)計師和開發(fā)之間的協(xié)作高效。

設(shè)計師之間的協(xié)同主要在設(shè)計工具中進行，目前支持協(xié)作的工具已經(jīng)有很多了，下方推薦幾種常見的設(shè)計工具解決方案：

1、Sketch + 三方云

Sketch作為經(jīng)典的UI設(shè)計工具，相信很多團隊仍在使用，但協(xié)同問題如果不購買Sketch Cloud就無法使用，這時可以考慮三方的平臺。目前能滿足云同步組件庫、設(shè)計源文件的產(chǎn)品只有一個摹客（https://www.mockplus.cn/?home=1），它可以通過插件同步組件庫和設(shè)計源文件。

2、Web端的設(shè)計工具

云端化趨勢明顯，F(xiàn)igma、摹客DT、即時設(shè)計等web端的UI設(shè)計工具，可以完美的設(shè)計師之間的協(xié)同問題。這些設(shè)計工具都支持原子化設(shè)計，并在win和mac上都可以使用。Figma的組件庫如果要跨文件使用，是需要收費的，摹客DT、即時設(shè)計等設(shè)計工具目前是完全免費的，可以嘗試一下，目前我們團隊的設(shè)計已經(jīng)全部遷移到了摹客DT，并運行了半年了。

目前Web端的工具都不支持完全離線使用，如果你對離線場景有很高的要求，Sketch + 三方云目前是最好的選擇。

解決完設(shè)計師之間的問題，我們再看設(shè)計和研發(fā)之間的問題，主要是三類信息同步的問題：

1）設(shè)計規(guī)范和開發(fā)組件庫對齊，開發(fā)可以直接在設(shè)計稿上獲取到變量、組件代碼最佳；

2）設(shè)計稿標(biāo)注和說明：開發(fā)可以在一個地方看到開發(fā)所需要的所有信息，設(shè)計說明和設(shè)計標(biāo)注、切圖、原型等。

3）設(shè)計稿版本和流程，開發(fā)可以直接通過開發(fā)任務(wù)獲取到對應(yīng)的設(shè)計稿，并可以確認當(dāng)前版本已經(jīng)通過了設(shè)計審核。

3、設(shè)計規(guī)范和開發(fā)組件庫對齊

這個問題主要有兩種解決方案：

1）方案一：設(shè)計師在工具中定義組件庫文件時，顏色的名字包含開發(fā)所需要的變量名，目前無論是設(shè)計工具自帶的標(biāo)注功能還是三方協(xié)作平臺上的標(biāo)注功能，都能顯示出該信息。這樣可以解決變量和開發(fā)對齊的問題，不完美的是組件代碼信息不能關(guān)聯(lián)，同時設(shè)計師的體驗會降低，因為開發(fā)的命名規(guī)則和設(shè)計不一樣，需要設(shè)計師做一些妥協(xié)。

2）方案二：借助設(shè)計系統(tǒng)類的產(chǎn)品，作為膠水層，將設(shè)計語言和開發(fā)語言做映射，目前此解決方案只支持Sketch，且產(chǎn)品也只有摹客的協(xié)作平臺支持，其優(yōu)勢是除了顏色、樣式變量，還可以關(guān)聯(lián)組件代碼。

4、設(shè)計標(biāo)注和說明

自動標(biāo)注已經(jīng)很成熟了，三方平臺的標(biāo)注功能比設(shè)計軟件自帶的會好用一些，開發(fā)可以直接點選到可見的圖層，而不用去選擇編組層級，效率會高不少。

重點是設(shè)計說明，如果你將說明直接寫到設(shè)計稿上，不會存在這個問題，如果說明寫設(shè)計稿上會影響到設(shè)計稿美觀度，有這方面需求的，則需要專門的設(shè)計說明工具了。設(shè)計說明工具目前主要有兩種：

• 使用圖釘添加設(shè)計說明：比如藍湖或設(shè)計工具內(nèi)，你可以用評論的圖釘為設(shè)計稿添加設(shè)計說明。
• 專門的設(shè)計說明工具：目前在Invision和摹客協(xié)作上有這個功能，你可以連續(xù)撰寫設(shè)計說明，支持富文本和與圖層關(guān)聯(lián)。

5、設(shè)計稿版本和流程管理

這個方面，我更推薦將設(shè)計環(huán)節(jié)和開發(fā)環(huán)節(jié)分開的方式，即設(shè)計師在設(shè)計軟件中設(shè)計，開發(fā)在協(xié)作平臺查看標(biāo)注。有這樣一個區(qū)隔后，信息流轉(zhuǎn)會更可控。開發(fā)直接到設(shè)計軟件中查看標(biāo)注真容易出問題，如果權(quán)限沒給對，不小心改了設(shè)計稿，會帶來很多很難追溯的問題。

設(shè)計還原度是軟件產(chǎn)品中的一個重要問題，它涉及到設(shè)計稿與最終產(chǎn)品的一致性。設(shè)計還原度不僅關(guān)乎界面的一致性，還包括交互和動效設(shè)計的一致性。常見的問題包括界面元素不統(tǒng)一、交互細節(jié)差異、不同平臺的適配問題以及功能未完全實現(xiàn)等。

這些問題的出現(xiàn)可能與設(shè)計階段和開發(fā)階段的多個環(huán)節(jié)有關(guān)，如規(guī)范定義和維護、設(shè)計質(zhì)量、缺少設(shè)計說明以及交付流程混亂等。為了提高設(shè)計還原度，需要確保設(shè)計師之間的協(xié)同順暢，以及設(shè)計與開發(fā)的信息同步。這可以通過使用合適的設(shè)計工具和協(xié)作工具來實現(xiàn)。此外，將設(shè)計環(huán)節(jié)與開發(fā)環(huán)節(jié)分開管理也有助于提高信息流轉(zhuǎn)的可控性。提高設(shè)計還原度是一個復(fù)雜的過程，需要從多個方面進行考慮和優(yōu)化。

Powered by Froala Editor