国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > GUI設(shè)計規(guī)范的規(guī)范大全

GUI設(shè)計規(guī)范的規(guī)范大全

時間：2023-06-05 18:00:01 | 來源：網(wǎng)站運營

時間：2023-06-05 18:00:01 來源：網(wǎng)站運營

GUI設(shè)計規(guī)范的規(guī)范大全：

1. 前言

很多著名的軟件企業(yè)都有GUI設(shè)計規(guī)范，如 Apple 和 Google，得益于這些設(shè)計規(guī)范（或者叫指南），設(shè)計者才可以開發(fā)出符合平臺視覺及交互要求的UI。其實除了這些大公司，軟件公司都最好有自己的GUI設(shè)計規(guī)范，即使這個規(guī)范簡略一些，也可以幫助團隊改善工作、提高工作效率及傳遞品牌價值。

2. 什么是GUI設(shè)計規(guī)范

各個公司的GUI設(shè)計規(guī)范各不相同，有的十分詳盡，有的比較簡略；有的只有設(shè)計口號，有的嚴格到每個元素的像素都有規(guī)定；有的注重設(shè)計，有的提供了完整的代碼示例；有的提供了一整個網(wǎng)站，有的只是幾頁PDF。

總的來說，GUI設(shè)計規(guī)范是指導(dǎo)設(shè)計人員完成GUI設(shè)計的規(guī)則和范例。

3. 為什么要做

4. 為誰做

設(shè)計規(guī)范應(yīng)該是為公司全體做的。

公司用設(shè)計規(guī)范體現(xiàn)公司的設(shè)計品味和企業(yè)價值；設(shè)計人員和開發(fā)人員通過設(shè)計規(guī)范協(xié)助自己的工作，測試人員以設(shè)計規(guī)范作為UI驗收的標準；對營銷部門設(shè)計規(guī)范也是重要的參考資料。

5. 由誰做

設(shè)計規(guī)范應(yīng)該由使用到這些設(shè)計的人制作。

6. 包含什么內(nèi)容

雖然設(shè)計規(guī)范各種各樣，有的很簡單，有的簡直可以作為前端教學(xué)，不過大部分都包含以下各部分：

6.1 設(shè)計理念/設(shè)計語言

各個設(shè)計規(guī)范都有不同的設(shè)計理念（或不同的設(shè)計語言），這是最能體驗公司品味的地方。這方面通常通過顏色、字體、布局、公司Logo的使用等展示。







6.2 原則

設(shè)計原則有很多種，如格式塔原則、親密性原則等，設(shè)計規(guī)范應(yīng)該將這些不同的原則提煉、整合成適合自己團隊的設(shè)計指導(dǎo)原則。







6.3 模式

模式是指從經(jīng)驗中提煉出來的解決某一類問題的方法論。如業(yè)務(wù)中多次遇到數(shù)據(jù)展示的場合，設(shè)計人員會從過去的經(jīng)驗總結(jié)出最適合數(shù)據(jù)展示的一種或多種做法，并成為數(shù)據(jù)展示模式。







對營銷/產(chǎn)品/需求人員來說模式也是它們最好的武器。假如客戶要求UI進行某些改進以符合他的要求，比起這些：

“我不清楚怎么做，我回去問問研發(fā)團隊能怎么做吧?！?br>“我不清楚能不能做到，這還需要研發(fā)團隊配合?！?/blockquote>客戶更滿意下面這種回復(fù)：

“關(guān)于這個需求，我們有這幾種解決方案，它們各有…的優(yōu)點，您可以參考一下?！?/blockquote>

6.4 組件

組件是平臺提供的，或公司購買/研發(fā)的控件、字體、圖標、主題等資源庫。很多設(shè)計規(guī)范還提供了組件的使用代碼示例。

統(tǒng)一的控件可以使各個軟件有統(tǒng)一的體驗，也減少開發(fā)人員選擇和學(xué)習(xí)控件使用方式的時間。







6.5 其它

摹客，定制你的設(shè)計規(guī)范
設(shè)計系統(tǒng)

很多設(shè)計規(guī)范還把動效和交互單獨說明，可能由于這是比較深入的內(nèi)容或者難于在PDF上展示，所以也有不少設(shè)計規(guī)范沒有這些內(nèi)容。設(shè)計自己團隊的設(shè)計規(guī)范時可以把這些內(nèi)容留到最后。

7. 什么時候做

設(shè)計規(guī)范的工作應(yīng)該隨時都在進行。
設(shè)計其實是有生命的“生物”，它每天都在變化，不斷發(fā)展。尤其在軟件行業(yè)，需求、技術(shù)、設(shè)計潮流、競爭對手不斷頻繁變化，甚至休假回來連自己公司的母公司都變了。另外，由于設(shè)計規(guī)范中每一條內(nèi)容都是經(jīng)過精心制作的，很容易產(chǎn)生“不想破壞以前的心血”這樣的思想，導(dǎo)致過時的規(guī)范遲遲不能更新。

設(shè)計規(guī)范一旦落伍就容易不被認同，漸漸地就沒人看，沒人執(zhí)行，最后設(shè)計規(guī)范將變得毫無意義。所以設(shè)計規(guī)范應(yīng)該持續(xù)改進，以使得基于設(shè)計規(guī)范的工作不斷得到改善。

8. 怎么才能做好

8.1 簡單明確

不要太信任設(shè)計人員和開發(fā)人員的閱讀能力，何況夾雜著各種術(shù)語或英文單詞，大段大段的說明很可能變成天書。要做到簡單明確，可以這樣做：

  • 精簡語言，使用明確的語句，刪除艱澀的術(shù)語和長語句；
  • 使用列表代替大段的文字；
  • 使用圖片或視頻；






8.2 范例

既然是規(guī)范，范例是必須的。







8.3 統(tǒng)一

統(tǒng)一并不是指某個控件只能有一種樣式，某個功能只能有一種模式。而是指相同或相似的場景下，使用的樣式或模式應(yīng)該統(tǒng)一。

壞的設(shè)計規(guī)范有可能參考控件庫的指南把控件的所有樣式都展示出來而沒有說明應(yīng)該在什么情況下使用，而好的設(shè)計規(guī)范會給出元素需要統(tǒng)一的部分，如間距、邊框、字體、顏色，然后給出各種情況下的做法：





如果設(shè)計規(guī)范自己都不統(tǒng)一，不能自圓其說，使用者將無所適從。

8.4 代碼示例

有些設(shè)計貴伐會將代碼也展示出來，以方便開發(fā)人員。







8.5 案例

設(shè)計規(guī)范最好有已成功的案例，這才是對設(shè)計規(guī)范最好的展示。

9. 設(shè)計規(guī)范網(wǎng)站分享

以Button為例，比較一下各大公司的GUI設(shè)計規(guī)范

Apple










Google










Microsoft










Ant Design










SAP










yelp










Atlassian










Buzzfeed










10. 結(jié)語

希望這篇文章可以幫組讀者建立自己團隊的GUI設(shè)計規(guī)范。尤其是對桌面開發(fā)的團隊，由于缺乏GUI設(shè)計規(guī)范導(dǎo)致很多桌面軟件的設(shè)計都馬馬虎虎，真的希望將來這點可以得到改善。




作者：dino.c
出處：http://www.cnblogs.com/dino623/




文末福利：

最后，給各位設(shè)計師大大推薦我們團隊開發(fā)的設(shè)計協(xié)作神器。

用設(shè)計協(xié)作神器-摹客iDoc，設(shè)計師交付作品更輕松：

  • 完成設(shè)計一鍵上傳，標注和切圖自動生成；
  • 支持Sketch、PS、XD的設(shè)計原稿和設(shè)計圖；
  • 全貌畫板展示流程，頁面任務(wù)完成度一目了然；
  • 設(shè)計規(guī)范自動采樣生成，還可分類管理、同步應(yīng)用、一鍵導(dǎo)出設(shè)計風(fēng)格指南。
官網(wǎng)：摹客iDoc，更快更簡單的產(chǎn)品設(shè)計協(xié)同軟件

【福利】戳這里免費領(lǐng)取團隊版：團隊版領(lǐng)取




相關(guān)閱讀：

獨家設(shè)計系統(tǒng)發(fā)布——摹客，定制你的設(shè)計規(guī)范！

移動端UI界面設(shè)計之-注冊登錄

『多級目錄結(jié)構(gòu)』在移動端的交互設(shè)計

易被忽略的App界面設(shè)計細節(jié)

產(chǎn)品經(jīng)理沒人引導(dǎo)，該怎么進步？

【附源文件】5款精美小程序原型設(shè)計模板，觸手可得

設(shè)計體系，你所不知道的“前世今生”

小小圖標功能大，10個最佳Material Design 圖標資源你不可錯過

什么樣的原型更受開發(fā)歡迎 ？





























關(guān)鍵詞：規(guī)范,設(shè)計

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉