做一全套的APP設計，流程是：
1、界面設計：設計IOS界面；設計Android界面。
2、切圖：切IOS的2倍圖和3倍圖；切Android的hdpi,xhdpi,xxhdpi這三個尺寸的圖。
3、標注：以px為單位標注IOS界面的尺寸；以dp為單位標andriod的尺寸。
----------------------------------------------------------------------
IOS端_界面設計
————————
一、界面設計：
1、【界面分類】：IOS有 iphone5/5s/5c、 iphone6\6 plus、iphone7\7 plus、iphone8\8 plus、iphoneX等分辨率。
2、【設計方法】： 以iphone8為標準進行界面設計，讓開發進行適配。即750px*1334px以基準（72像素\英寸）。
3、【設計標準】：750*1334界面——狀態欄40px； 導航欄88px；標簽欄98px；工具欄88px；文字最大34px; 最小18px；常用28px。
————————
二、切圖：（所有開發寫不出來的都得切，如icon, 默認頭像，背景圖等）
1、【切圖尺寸】：IOS 只用切【二倍圖】和【三倍圖】。注意：有些button, 需要更改顏色，切一個“被點擊的狀態”（如btn-xxx-pressed@2x,btn-xxxx-pressed@3x）。
2、【切圖命名】：如btn-xxxx@2x,btn-xxx@3x(按紐); img-xxx@2x,img-xxxx@3x(圖像); bg-xxx@2x,bg-xxx@3x(背景圖)
3、【方法一】：【photoshop圖層-右鍵-導出為...】
設置大?。ˊ1x+@2x)；設置好icon的畫布尺寸（如導航欄上的幾個icon的畫布尺寸應保持一致）
【方法二】：【sketch-選中icon-右下角-make exportable】
（如需切相同尺寸的icon，需建立相同尺寸的畫布，并選擇整個畫布整體導出）
————————
三、標注：
1、【標注內容】：顏色＼長寬＼字號＼距離；
2、【標注單位】：IOS的標注以px為單位進行標注。（注意：數字最好為偶數）
3、【標注軟件一】: 標注神器－parker/markman，標注前請在“設置”里將單位改為px；
【標注軟件二（強烈推薦）】：zeplin軟件——無需標注，只需將界面導入zeplin，開發直接訪問zeplin，即可查看所有的尺寸、間距、色值、字體、字號等。
下載地址：https://zeplin.io/，軟件圖標和界面如下：
Android設計：
————————
一、界面設計：
1、【界面分類】：Android的尺寸非常多，非常雜。總的說來，就分為這幾種模式：idpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi。
2、【設計方法】：以xhdpi為基準進行界面設計，讓開發進行適配。即以720px*1280px為標準(72像素\英寸)。
3、【設計標準】： 720px*1280px界面——狀態欄50px, 導航欄96px，標簽欄96px，工具欄96px，實體鍵96px；文字最大36px;最小18px；常用28px。
————————
二、切圖：
1、【分類】：Android 的切圖需要切三個尺寸的：hdpi, xhdpi, xxhdpi。
2、【方法一】：切圖神器－cutterman，也可以一鍵切出hdpi, xhdpi, xxhdpi三個尺寸的圖, 而且還可以切出“點九圖”。
【方法二】：photoshop、sketch、illustrator皆可直接導出icon。
————————
三、標注：
1、【單位】：Android的標注以dp為單位。（parker里, 在“設置”里將單位改為dp）
2、【標注軟件】：同上，推薦zeplin軟件（建立文件夾時需選擇安卓版本）
----------------------------------------------------------------------
補充 _ 2019/4/10:
目前流行的是以【一倍圖】的分辨率來進行設計，也就是sketch、PS、AI上給的分辨率：
iPhone 8的分辨率是750*1334，而sketch、PS、AI上iPhone 8給的分辨率是375*667.
意思是設計平臺鼓勵設計師用一倍圖來設計，一方面是因為開發環境是以一倍圖的環境來開發的，因此一倍圖的設計稿無需開發再進行換算。
另一方面是icon導出時：@2x就是iPhone 8的尺寸、@3x就是plus的尺寸。利于icon尺寸的整數換算。
所以推薦大家用【一倍圖】的分辨率來設計。icon切圖分別導出2倍圖和3倍圖供開發使用。（而且sketch提供的IOS控件也是1倍圖的尺寸啊～～）
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
寫在前面
B端產品和C端產品作為兩種很不一樣的產品形態一直服務著廣大的用戶。它們各有各的作用，有很多B端產品還是一個非常龐大的系統工程，甚至有很多的公司就是專注于開發B端產品，我從業以來曾經參與過很多的（兩位數）B端產品項目，有的是從0到1的開發，也有的是在原基礎上更新優化，下面就從我個人的設計經驗整理出一些觀點。
什么是B端和C端產品
概念：B端面向商家和公司，組織；C端面向普通的大眾用戶；
B端是指：business--泛指生意，商業，公司和組織； To B即是面向商家和公司，組織，是給專職專業的用戶使用的產品，例如微信公眾平臺給制定的公眾號持有人使用，某公司的指揮調度系統，某停車管理系統，以及相關的后臺管理系統等。C端是指：consumer--消費者，顧客，用戶，是指被設計為能給普通大眾使用的產品；To C即是面向普通的老百姓用戶，例如微博，QQ，微信，新聞客戶端，淘寶等；
幾乎男女老少都會使用的微信
面向專職崗位人員使用的后臺管理系統
兩者的不同點
C端產品追求極致的體驗，；B端產品追求簡約、高效的完成工作
C端產品是為了滿足用戶某一主要的、固定 的核心需求，因此設計的目標是圍繞著這個核心需求，簡單直接解決用戶的需求，追求的是極致的用戶體驗，因為對C端產品而言，產品不好用，體驗不好，用戶就流失了，也就沒有盈利的可能了。
B端產品的目標是幫助用戶把大量的復雜的工作，整理歸納，使得他們能高效便捷的完成工作，追求的是產品的簡約實用，提高效率，能很好的處理工作，有時候為了達成業務目標，甚至不惜犧牲部分用戶體驗。
To B端界面的設計應該要重點注意什么
很多新手設計師在接到新的需求的時候會沒有頭緒，不知道如何開展工作，在不了解業務的前提下很多時候被產品牽著鼻子走。那么問題來了，是拿到產品給過來的原型之后就開始設計了嗎？又或者沒有原型只有一些簡單的描述，又該如何開展呢。以下是我的幾個建議
1，要了解業務
因為B類產品不同于C類產品，并不是大多數人日常都會很普及用到的，所以就需要設計師主動的去了解行業，了解業務需求，不同的行業有不同流程和規則，甚至是一些特殊的需求；啟動用戶群體調研和用戶使用場景調研，有條件的可以開展用戶問卷調研甚至面對面訪談，整理出用戶的使用流程，調研后要求設計師自己能非常清楚這個產品的作用、用戶人群、和在特定的使用場景下的使用目標、和不同情境下的操作流程等。
2，交互流程設計
B端產品往往包含了比較復雜的業務，那在復雜的業務背景下如何通過設計來提高用戶的工作效率，這就對設計師有比較高的要求。在交互流程上要整理出一些操作路徑，要考慮它們的層級關系，先后順序，行業習慣等。通過操作體驗給用戶留下明確的印象，可以降低用戶的學習成本，提高產品的易用性。
To B端界面的視覺設計
①、界面布局，分固定的和自適應的分辨率兩種，一般來說自適應的布局比較適合操作和展示內容比較多的系統，固定的寬度的分辨率的布局一般多用1200px以適應適配更多低分辨率的顯示器，現在的大屏幕設備非常普及了，很多系統轉為以1400px的寬度來設計，至于用哪一種的布局要取決于產品的功能了。
界面布局視覺上的區分；當我們設計一個系統的主頁到時候，B端產品通常會分為很多功能模塊，即便產品經理會提供原型給UI設計師，他們有時候往往會在原型按照他們的想法來布局，這時候設計師需要主動地去了解業務去弄清楚各個模塊的主次之分。通過調研后，整理歸類任務模塊，按照業務流程和規則來區分模塊優先級。（圖例）
②、顏色，B端系統的界面顏色也非常考究，按照系統的功能特性來定，一般常規的系統界面都是以白色底色配以一種主色調的顏色來搭配的；第二深色的底色界面，深色界面能起到一種很好的襯托界面內容（如大量文字，數據，圖形，視頻等）的作用，深色界面再附以一些點線面和光的元素就能營造出一種炫酷的科技感。三是現在流行漸變色，漸變色和純色會給人一種繽紛，輕松愉悅，有活力的年輕的感覺，所以大家在設計不同的B端系統界面的時候要考慮產品的功能性質來選擇用顏色。
③、導航，導航可以解決用戶在訪問頁面時：在哪里，去哪里，怎樣去的問題。一般導航會有「側欄導航」和「頂部導航」2 種類型。一：側欄導航：可將導航欄固定在左側，提高導航可見性，方便頁面之間切換；頂部可放置常用工具，如搜索條、幫助按鈕、通知按鈕等。適用于復雜的、功能多的中后臺的管理型、工具型網站。二：頂部導航，順應了從上至下的正常瀏覽順序，方便瀏覽信息；頂部寬度限制了導航的數量和文本長度
④、按鈕，通常B端產品分為較多的功能模塊，也對應有很多不同的按鈕，在設計按鈕的時候，我們第一要分清楚哪些按鈕對應哪些功能，在設計上要做出區分。
⑤、表格，表格的設計遵循簡潔和易讀性為主，表里面的文字內容是主要的設計重點，例如信息層次的明確、對齊的原則等。
⑥、彈窗，不僅有操作反饋的作用，同時又是一個承載更多的操作功能的容器，彈窗的設計要有規范性，組件化。
視覺設計方面除了常規的設計流程，我想說的是綜合考慮和相關的系統銜接，體驗的一致，視覺風格的統一和品牌的建設。
設計師還能做些什么
雖然設計師和產品經理以及開發已經溝通過相關的業務需求，但設計師一定要懂得切換角度來看待問題，一方面設計師的視角相對注重視覺上和交互上的設計細節；第二我們也要懂得站在開發和產品的角度考慮，哪些效果能不能實現，也是需要我們和開發同事密切配合的；另一方面要更加注重代入用戶的角度來思考，這樣才能做出合理適用的設計，甚至能挖掘新的需求，提出一些很好的建議，給產品和項目帶來加分和利好。
總結
因為B端產品業務需求，用戶目標，使用場景和用戶群體都不相同，所以設計師接到B端產品的設計需求時一定要先了解清楚業務，做好前期調研，其次要多站在用戶的角度來看待和設計產品。其實C端和B端產品，它們都要求要簡單實用和有效準確，都是為了更好的滿足用戶的需求，解決用戶的痛點。做好了以上這些關鍵點，無論遇到多么復雜的B端產品，我相信所有問題都會迎刃而解。
作者： chrisHCZ
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
如果你是一位經驗豐富的設計師，你應該會同意這個觀點：從他人的作品中獲取到靈感并不算偷竊他人的作品。這是屬于在對設計進行深入研究呀，這也屬于一種設計模式呀，而且還遵守設計規范呢。所以，當然要以用戶們所熟悉的那些模式來創造出可用性界面。
不過，有的設計師則會認為，過于遵守設計規范，而且，經常性的從他人的作品中獲取靈感的話，自己本身的創造能力就會下降，這就導致了這樣一個結果——一天下來，你的所有APP都長一個樣。
從交互設計的角度看，我們會發現一個問題。什么問題呢？
習慣性的去應用一些所謂的最好的設計模式，可能會讓你覺得Google，Facebook，Instagram或者說其他的一些你最喜歡的APP總是做的非常棒，你會覺得，他們的設計目標和你自己的設計目標并沒啥差別，但是，人家成功了，而你的作品卻失敗了。所以，這里推薦一些被公認為是(至少曾經被公認為)最好的設計模式，可能在你第一次看來，這些設計模式也就那樣。
1、隱藏導航
關于漢堡圖標，已經有不下于50萬的文章來爭論它了。如果你一篇都未曾讀過，試著去讀一兩篇吧。其實，簡單說來，這些文章討論的主題更主要的是這個圖標里所隱含的那些導航，而不是這個圖標自身。
上面圖片這樣的設計對于設計師來說其實是很有吸引力的，而且簡直太方便了。根本不用擔心屏幕大小的限制，只需要這樣一個圖標，然后，把所有的導航全部塞進這個可以上下滾動的東西里，然后，讓他默認隱藏。就這樣，就這么簡單。
但是，實驗證明，與完全隱藏導航相比，適當的展示出一些導航能夠更多的增加用戶的依賴度和滿意程度，甚至為你帶來更多的收入。所以說，現在的好多大公司的播放器都拋棄了以前的漢堡圖標，將最常用的一些導航一直顯示給了用戶。
如果說你的導航比較復雜，那么，請在考慮優先級的基礎上適當地隱藏導航。
2、圖標，隨處可見的圖標
由于移動端的屏幕大小限制，許多無腦的設計師為了節省空間，在任何只要能夠使用圖標替換的文本域，都使用了圖標。大家都這樣想，象形文字或者圖標占的空間又少，不需要額外的轉換，而且，人們都很熟悉這些圖標，難道不是這樣嗎？所以，每一個APP都這樣做了。
設計師們將上面的那種假設放在腦海里，于是，有的時候，他們將實用性的功能蘊含在了圖標里面，但事實上，那個圖標是難以識別的。比如，你能猜到在下圖的Instagram里的這個圖標點擊之后能夠發送什么信息嗎？
或者說，假如你從來沒用過谷歌翻譯，那么，你會期待下圖的這個圖標實現什么樣的功能呢？
你總是假設你的用戶們非常熟悉那些抽象的圖標，或者說，你總以為用戶們會花大量的時間去研究和學習你的這個圖標的含義。這是一個很普遍性的錯誤，很多設計師都會犯這個錯誤。
Bloom.fm上讓人覺得迷糊的標簽欄
如果說你曾經設計過一個需要一個彈出框來解釋從而提高可用性的圖標，那么，即使你的用戶們會不管怎么樣都能了解它，你的這個做法也是錯誤的。
當然，并不是說你在設計中就一點都不使用圖標。你的用戶們熟悉大量的圖標，這些圖標中，有很大一部分都是能夠代表普通的功能的，比如搜索，播放視頻，郵件，設置等等。(但是，用戶們可能不會很確定當他們點擊一個心形圖標的時候，會發生什么。)
一些能夠被大多數用戶所識別的圖標并且被認為是通用的
對于復雜的和抽象的圖標，在顯示的時候，應該總是在旁邊加上一個文本來進行說明。這樣，你的圖標才是真正有用的。同時，還能夠提高菜單的可發現性，也能夠為你的APP添加漂亮的觸感和個性。
Pixelmator的導航
對于基本的功能，可以使用圖標來展現；但是，對于復雜的功能，就需要使用文本來說明了。(如果你要使用圖標的話，要時常性的做可用性測試)
3、基于手勢的導航操作
當蘋果公司在2007年發布了iPhone的時候，多指觸控技術就成為了人們關注的主流技術，用戶們發現他們不僅可以在屏幕上進行點擊，還可以進行放大，縮小和左右輕掃。
手勢在設計們的圈子中流行了起來，許多的APP都圍繞著手勢操作來進行設計。
Clear里的手勢操作
就像隱藏的導航欄和使用圖標代替文本一樣，手勢看起來似乎能夠為設計師節約一些屏幕空間。(“屏幕上不應該有刪除按鈕的存在，人們只需要向左或者向右輕掃就可以進行刪除了。我們會決定怎么操作的。”)
關于手勢，你首先需要知道的是，手勢是不可見的。人們需要記住它們，就像漢堡菜單的例子一樣。如果你隱藏了一個選項，那么，用到那個選項的人就會越少。
另外，手勢存在著與圖標相同的問題：眾所周知的手勢有點擊，放大，上下滾動，同時，每個APP也有那些需要慢慢發現和學習的手勢。
不幸的是，觸屏界面的設計仍然是一個新的領域，在各個APP中，大多數手勢還不標準和統一。一個很簡單的手勢，比如左右輕掃，在各種各樣的郵件APP中可能都會大相徑庭。
在Apple的Mail APP中，向右輕掃，顯示出了“標記為未讀”的選項
同樣的手勢，在Mail Box中，就表示將郵件存檔
或者說，想一想，搖晃你的手機，在兩個APP中，也會有兩種不同的含義。在iOS中表示撤銷，在Google Maps中表示發送反饋信息。
永遠都要記住，手勢是隱藏的操作，人們不得不去記住它們。對于你的用戶，這需要大量的努力。如果你是一個發起人，也許你可以讓全世界的向右輕掃的含義都一樣——但是，只有當它是你APP的概念設計里必不可少的一個部分的時候。
4、新手引導
新手引導，最近很火的一個話題，適用于用戶第一次與APP打交道的時候。在很多情況下，這個簡單的方式能夠在一個透明的覆蓋層上為用戶展示一些標記來解釋界面元素。
dcovery APP里的新手引導
為什么說這是一個很爛的解決方案呢？因為許多用戶都會跳過你的介紹，他們想做的就是趕緊使用這個APP。即使他們注意到了你的這些標記，當他們把這個關掉的時候，這些所謂的教程也被他們忘得一干二凈了(尤其是當屏幕上擠滿了信息的時候)。最后說一句重要的，在你的屏幕上添加這些引導的標記，并不會提高APP的易用性，記住下面這句話：
原圖翻譯：用戶界面就和講笑話一樣，如果這個笑話還需要解釋才能明白的話，那么，這也不是一個好笑話。
對于你的用戶來說，新手引導也許可以使用其他的方式來設計的更加有用。比如Slack這個APP，使用第一屏來創建一個用戶場景。簡單的介紹一下他們自己，著重于利益而不是屏幕上的功能。
留住你的第一批用戶的一個更有效的方法就是逐步的引導。比如Duolingo，他沒有向用戶們解釋這個APP是如何工作的，而是促使人們做一個指定語言的快速測試(甚至不需要登錄)，因為用戶們可以在做測試的過程中了解到這個APP是如何使用的。同時，這也是展示這個APP的價值的一個更有影響力的方法。
記得住左右輕掃的手勢在Apple的Mail APP里和在MailBox里的不同嗎？看看他們的逐步引導是如何做的：用戶們在開始使用APP之前，必須在APP所提供的一個練習場景里嘗試使用這個APP里的每一個手勢。
在你準備在一個半透明的覆蓋層上設計你的引導標記的時候，停下來好好想想第一次使用你的APP的用戶會有寫什么樣的經歷。關注一下使用環境，通常情況下，有更好的方法來歡迎你的用戶們。
5、充滿了創造力，但是并不直觀的空白狀態
很多沒有經驗的設計師很容易忽略APP的空白狀態。但是，從一個APP的整體用戶體驗上來說，這是一個很重要的方面。
有的時候，設計師們把錯誤信息和空白狀態的界面當作一塊展示他們創造力的畫布。
比如下面這張Google Photo的空白狀態界面：
第一眼看去，簡直太棒了不是嗎？一個漂亮的矢量圖加上完全符合設計規范的布局。
但是，再看一下，就會覺得有寫奇怪的東西了：
?這塊屏幕里什么收藏也沒有，但為什么這里會有一個那么顯眼的搜索按鈕呢？難道是想讓用戶在什么都沒有的界面里搜索什么？
?第二個很顯眼的元素就是這個矢量圖，很明顯不可以點擊(雖說會有很多人去嘗試點擊)。
?屏幕上的提示說，我應該找到在頂部的那個超級不起眼的“＋”標志。為什么這個提示自己不包含一個添加按鈕呢？就像是在說“點擊繼續按鈕來繼續”
總而言之，上面這個空白屏幕沒有能夠幫助用戶理解用戶所在的這個環境：
?什么是收藏？他們為什么有用呢？
?為什么我什么都沒有呢？
?我可以做些什么嗎？(我應該做什么？)
當需要創造力時，越少有時會越有用。下面這個空白狀態屏在可用性上就做的十分完美。(先讓我們忽略那個“現在就點擊下面這歌按鈕吧”的引導提示)
在Lootsy里的空白狀態屏
記住，空白狀態(類似于網頁里的404頁面)并不只是美感和品牌特色。在可用性上，他們更為重要。要讓空白狀態更為直觀。
多問多想
不要說我是錯的：設計模式和最佳的實踐仍然是你的好伙伴。但是要知道，APP和用戶是不一樣的：在一個APP里能夠適用的方案，在你自己的APP里，也許就一點不適用。這不是一個通用方案就能解決的事情。另外，你永遠不可能知道為什么一個APP會以某種方式來設計。
自己要多想想，多設計，多研究。
衡量，測試，驗證——如果能夠做得更好，就不要害怕打破設計規范。
作者： 鄭小小莊
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
交互輸出文檔的作用
文檔這個東西，我們又愛又恨，愛的是它能夠記錄并且在工作中讓大家高效的協調合作，恨的就是很多人對文檔嗤之以鼻非常敷衍，以至于文檔不但沒有起到它應有的作用，反而成為了一個不負責任的借口。所以一份合格或者優秀的交互輸出文檔對于一個項目的流轉以及團隊的配合來說是至關重要的。交互文檔的主要利益相關者通常是以下幾個角色：交互、產品、開發、UI
交互
首先優秀的交互文檔必須在交互組內部進行過審核，包括一致的撰寫標準和模式的使用，一個比較規范的交互設計組對于交互的撰寫標準也是有嚴格的規范的，以及在什么情況使用什么交互模式還有組件庫的調用都會有詳細的說明，那么你的交互輸出文檔就必須滿足團隊設定的規范。
其次對于其他交互設計師來說，你的設計方案中是否會出現其他人負責的模塊，那么在評審的時候需要同步，雖然交互輸出文檔對于其他交互來說不是直接受益人，但是在團隊同步過程中也是非常重要的。
產品
每個公司對于文檔的要求和規則不一樣。小公司可能沒有交互設計這個崗位，那么可能產品連prd文檔也沒有，僅僅只是一個簡易的需求說明文檔，就更不用說針對交互規則的說明文檔了。
很多有完善規模和流程的團隊不僅會有詳細的需求說明文檔也有很完善的交互說明文檔。我們首先要明確的一點是那么多文檔最后是給誰看的，一共在項目中會有多少文檔產生。
通常產品經理會在項目初期做一份prd文檔（Product-RequirementDocument，需求說明文檔），這個prd文檔主要是給業務方、交互和開發看的，在這個文檔中需要包含一些業務規則以及交互規則，所以交互的輸出文檔是需要和產品的prd文檔合并的。
當然如果你是一位很有自驅力的人，那么你可以自己推進需求并落地，一個人就可以完成prd文檔的撰寫和需求的落地了。
開發
特別想給各位提個醒，在開發需求評審的過程中，請一定記住你們評審的目的，開發同學也要注意，請把重點放在需求是否能實現以及開發相關的地方即可，請不要考慮為什么要這樣做，或者你覺得應該怎么設計，一旦進入了開發對需求和設計的評頭論足那么這個會議效率就相當低下。專業的事情就交給專業的人去做吧，可以私下討論但不要在評審會上各抒己見。
交互輸出文檔對于開發的作用就是，開發可以更好的還原該功能中交互的跳轉以及邏輯，所以我們盡量把交互規則寫明白寫詳細，比如按鈕在press和default時候是否樣式會有變化，或者頁面轉場的方向，這都是一些細節，減少不必要的低效溝通。你會發現有些時候為什么開發總是來問一些規則，就是因為文檔中沒有描述準確，所以開發和交互都需要花時間去同步這個細節。
所以這個也非常考驗交互設計師對需求文檔撰寫的功底，并不是圖片文字隨意擺放就可以的。和開發合作時也是一項內部的體驗設計，你把文檔寫好了，開發看起來也舒服，滿意度也高。如果是一堆文案，連基本的對齊都沒做到的話，誰來看都會看不下去。
UI
交互輸出文檔對于UI來說，作用就非常簡單了，但是這里也會碰到問題，那就是交互同學只需要把信息的層次表示出來即可，千萬不要畫到連視覺同學都沒有發揮余地的程度。所以為什么現在UXD體驗設計那么火，就是因為交互和UI其實重合度是很高的，只要有智能化組件庫和工具做支撐，那么在交互和UI的設計流程中，時間就會大大降低。
交互輸出文檔的內容
在這里，我們就將整個prd文檔的內容給大家分享一下，不僅僅是交互需要輸出的部分。因為一個高階的交互是需要能夠獨自產出prd文檔的。然后不同的公司對與文檔的要求也是不同，大家做參考即可。
一份基礎的prd文檔主要由這幾部分組成（其實就是這個需求的來源以及推導過程和如何落地的說明）：
1.項目概要
a.需求背景
這個是一個項目最重要的部分，可以說背景沒有搞清楚，后面都可以不用做。這個指的就是我們做這個需求的價值和原因。比如我們app中業務方（運營）需要做一個掃一掃功能，那么這個功能首先我們就從業務價值和用戶價值兩個方面去評估，根據對業務方的溝通之后我們發現掃一掃功能將會在周年慶的時候通過物流包裹上的二維碼，讓用戶進行掃碼參與活動這樣的玩法。
所以這個需求對于業務方來說是一個轉化手段，通過掃碼參與活動-領券-消費，確實是一個不錯的玩法，但是大家如果只盯著眼前的問題或許就不夠了，比如當周年慶結束之后這個功能還有什么用，他在以后的規劃中的存在是怎樣的。在所有的包裹中印上活動的二維碼這個時間周期和成本有多大。
其次，對于用戶來說，掃一掃并不是幫助他們解決了某個問題，而是我做了一個東西，同時搭配著這個功能讓你們去使用，對用戶來說是一個很可有可無的功能，如果線下包裹上的二維碼破損了也是非常影響體驗并且是不可控的。那么綜上所述，既然要做一個臨時的活動用其他的方式會不會更好？
所以在這個文檔中的第一步，首先就是要確定需求的背景、價值，也就是說，你這個需求是怎么來的，比如再來講我們一個店鋪的優化項目，在這個項目中，首先我們必須在評審的時候說清楚我們為什么要對其進行優化和改版，一定是出現了或者我們定義到了某個比較嚴重的問題，這邊大家對我們app業務可能不是很了解我就簡單說了，就是個人中心和店鋪營銷場景重合過多，并且賣家的同時可以買和賣兩個場景存在，所以店鋪頁通過我們的數據分析和用戶的訪談我們發現了一些機會點，以及我們必須突出一個核心場景讓用戶有明確的分辨。
另外就是背景的描述也可以帶上你的調研結果和分析，比如之前我們做首頁優化，我們觀察了近5個月的數據，都呈現下降的趨勢，所以之后有進行了一系列的訪談和用戶體驗地圖分析才有了這個需求的背景產生。
b.需求目標
目標很好理解，就是我們希望通過這次需求迭代達到一個什么成果，比如我們之前做過一次整體的體驗優化改版，那么我們的目標就是減少用戶的流程跳失、提升整體體驗滿意度、提高用戶的任務轉化率，其中我們做了一個商品關注的功能，由于是限時特價商品所以是限量的，在規定時間進行搶購，為了讓用戶的使用場景統一我們打算在應用內做一個商品關注功能，所以在這個需求的初期，我們對這個功能的目標和預期是提升xx百分比的轉化，提高x%比的gmv，提高用戶對關注商品下單的效率和滿意度，之前很多用戶想要購買商品需要自己在手機端設置鬧鐘，不方便。所以這個功能的一個目標就是解決用戶場景遷移的問題。設定目標之后，就是為了在上線后對其進行復盤和數據跟蹤還有用戶跟蹤。
可以用一句話來描述：針對什么用戶在什么場景下解決用戶的什么問題，達到什么目的？
c.需求范圍
需求范圍也相當于范圍層，指的就是在該需求中我們需要做哪些相關功能以及功能涉及面。舉個例子，之前說的掃一掃功能，不同的產品定位對于掃一掃功能的要求也是不同的，比如說微信在掃一掃功能中承載了：掃一掃、相冊、封面、街景、翻譯、手電筒等諸多功能，再比如淘寶，有掃一掃（ar、拍立淘）、相冊、歷史、幫助、手電，這說明了不同產品對掃一掃功能有不一樣的要求，所以在需求范圍內我們需要把本次需要做的功能進行描述，并且該功能是否影響其他功能的使用和對整個產品的影響范圍。并且我們也會講所需要的功能進行拆解和優先級拆分，在表格中編輯。
d.調研分析
調研分析其實就是為我們第一步背景和價值做準備，由于匯報方案和評審，或者在項目推進時，我們需要有相應的論據來支撐我們方案的客觀性，所以在這一板塊中輸出的結論就非常重要，比如之前的首頁改版，經過用戶研究小組的訪談和數據分析得出相關的結論，通過埋點找到相應板塊的點擊數據和異常點，然后再進行一系列的問卷和訪談研究，找到結果，都是為了輔助項目的背景以及在評審中大家對需求價值的靈魂拷問。由于數據和調研結果比較敏感就不過多放了。
e.版本日志
日志是一個非常重要的組成部分，做過開發的同學都知道log 的重要性，當我們跑不通的時候我們都會去檢查log，然后多測試幾遍可能就找到問題所在了，其實我們的版本日志的作用也是這樣，但是一個是對自己來說可以記錄自己的工作過程，還有思路的變化，第二就是對外，包括和需求方的討論，會議的紀要等。
要注意的是會議紀要在備注中需要詳細說明，以做證據。同時也要郵件通知相關人員和負責人。可能有些公司還會放一些評審記錄，比如各部門負責人對方案和需求的建議，業務方和技術負責人的一些建議也會放在項目概要中，而這個prd文檔也可通過內部服務器進行實時更新和保存，如svn。方便大家對需求的進度和迭代有一個直觀的追蹤。
f.項目成員
這個就不用多說了，產品、運營、交互、視覺、開發各司其職，照相館人員即可，就不至于當項目開始進行了人員分配還沒到位就尷尬了。
2.需求方案設計
a.業務、任務、界面流程圖
有些同學不是特別明白業務流程圖和任務流程圖的區別，這邊給大家簡單介紹一下
業務流程圖：
意思就是在這個需求系統中，相關利益者的業務關系，任務信息的流向的一個圖標。比如這個簡單的例子，用戶在點外賣這個場景中，相關的利益者有用戶、店家、外賣員三者，那么當用戶開始觸發流程后，這3者在這個流程中就會各司其職，而業務流程圖也很明顯的告訴大家所有聯動者的指責和流程走向。
任務流程圖：
用戶在具體執行某一個任務時候的工作流程，以及其核心任務的操作步驟，比如在登錄注冊這個任務中，用戶需要進行一系列的操作，在這個流程中用戶的操作引發的系統判斷需要詳細說明。
界面流程圖：
界面之間的跳轉關系和路徑，在這個流程圖中，我們不需要吧詳細的說明寫上，只需要將需求中涉及到的頁面跳轉進行敘述即可。
b.相關說明和規則
接下來就要開始我們交互文檔最為關鍵的部分了，如何書寫交互說明，以及交互說明應該包含的內容。
1.全局思考
在做交互方案也就是我們畫原型的時候會思考一些問題：
a.整體思考
1.信息架構是否容易理解，信息分類是否合理，比如我們的信息架構是否采用了用戶容易理解的，市面上常用的信息架構。
2.信息層級和路徑是否合理，不一定要最簡，但是要高效，信息的優先級是否放置準確，信息組織是否具有相關性、邏輯性。
3.主題是否清晰，3秒內告訴“我”在哪里，并且可以做什么
4.方案的延展和后續功能規劃的可擴展性
b.用戶權限
根據不同用戶的權限對該需求進行檢查，比如普通用戶、vip用戶、內外網用戶、游客用戶，在登錄未登錄時候對需求內功能的使用是否有影響
c.登錄方式
用戶登錄和注冊、終端的兼容，不同方式注冊的用戶是否需要補填相關信息等等
d.流程
1.該需求中的功能流程是否和其他類似或者相同功能流程保持一致性；
2.逆向流程和非正常流程的思考有沒有完全；
3.流程的閉環有沒有做好；頁面跳轉的方式是否合理；
4.中斷后的恢復狀態如何呈現；
5是否保留原信息等等
2.內容、狀態和顯示
a.內容的獲取來源
例如下方的圖片為例，banner的圖片來源和發現feed流的圖片來源肯定是不同的，那么就要寫清楚，圖片或者數據的來源是來自于用戶的上傳還是系統后臺的配置獲??；并且獲取的方式是如何的，是需要手動下啦刷新還是切換頁面自動刷新，還是設定時間自動刷新。
字段、圖標是從接口獲取還是前端寫死，以及氣泡展示的規則等等。另外一張圖片可能用在多個地方，而可能呈現的尺寸不同，所以在涉及到相關圖片使用時要注意剪裁規則和圖片的來源。
b.緩存機制
圖片以及一些資源通常我們需要對其進行緩存，有些同學不清楚什么是緩存，緩存是在計算機上的一個原始數據的復制集，一般來說需要緩存的內容是通過瀏覽產生的，包括圖片以及cookie等，瀏覽過的視頻和廣告也會被緩存。同時在不同的網絡環境下緩存的時間標準也不同，無網絡那肯定只能讀取緩存文件，wifi環境下緩存時間可設置的短一些，而流量環境下時間就可以設置的偏長。
c.狀態
狀態大家都應該都會寫，主要包含的就是初始狀態（冷啟動無緩存第一次進入）、空狀態（無任何內容比如空的購物車）、常規狀態、異常狀態（網絡中斷、接口報錯）還有過期狀態等
d.顯示
數據和內容的極限值，最大和最小，比如粉絲和關注的數量，小于1萬人則顯示完整的數量，大于等于1萬小于11000則顯示1萬，大于11000小于12000則顯示1.1萬，這樣的方式。另外包括標題極限為一行顯示，超過部分的顯示規則。敏感信息、錯誤提示以及超時的信息提示。金額的格式使用￥xxx還是xxx元，小數點保留的規則。日期的顯示格式是xxxx年xx月xx日還是xxxx-xx-xx還是xxxx/xx/xx等等
3.反饋、提示、手勢
反饋和提示的樣式有很多種，一般反饋指的是用戶對某一個控件進行觸發后獲得的反饋，比如按鈕按下的反饋，以及之后收到的反饋，是進行跳轉還是給用戶提示，采用的是模態還是非模態的提示。比如點擊關注某個人的按鈕后會提示關注成功，比如退出某個圖文編輯會二次確認是否退出，再比如抖音長按后出現的3個操作反饋，還有支付成功后的動效提示、惡意多次操作后的提示等等
如果有手勢交互也需要說明，比如滑動后內容置頂、拖拽、左右輕掃的tab滑動、重按的3dtouch等等
4.加載
使用模態還是非模態，如果是模態加載請盡量使用情感化設計來減少用戶焦慮。如果是非模態，根據信息呈現和體驗采用分步加載還是預加載還是智能加載。如果是分布加載就選擇先加載資源較小的內容，再加載圖片，可以先將圖片模糊化粗渲染給用戶呈現，包括在瀏覽信息流的時候的分頁加載也是可以的。如果更智能化一些也可以預判用戶的行為進行內容加載，例如當用戶在某個圖文前停留時間達到某個值后就預先給用戶加載里面的內容。
加載的全局方式在方案中需要考慮，頁面加載、下啦刷新等等，需要統一。
5.環境、設備與場景
a.不同設備、廠商的不同版本
都會影響到方案的落地和用戶體驗這個要非常注意。比如一些交互控件我們在6、iphonex和大屏幕尺寸上使用起來效果很好，但是小屏幕的時候這個交互控件顯得就很難受，所以需要仔細斟酌用戶的使用情況。另外還有橫豎憑情況的交互方案是否兼容、是否需要與其他硬件進行兼容。
b.白天和晚上是否需要做不同的風格設計，以及在是否需要給用戶遮擋隱私的功能。
6.文案
文案這點很多設計師都忽略了，你們有沒有聽說過一個叫文案設計師的崗位。其實文案在我們產品設計中是非常重要的。首先一個產品的文案對應的語氣和產品調性也是相關的，就好比我們說產品有它自己的性格一樣，另外文案的使用直接就影響用戶對該信息的理解，比如一個對話框的文案是：確定退出嗎？下面會有兩種不同的選擇，一個確定，一個是退出，大家覺得哪個比較好？還有就是不加“嗎”，就變成了：確定退出？這樣描述出來的語言給人感覺很冰冷，甚至有一些威脅。
所以首先我們的文案是否有溫度，和產品的個性是否相匹配。其次文案的表述是否準確和通俗易懂，比如你告訴程序員一句話，幫我去菜市場買西瓜，如果有西紅柿，幫我買兩個，你會帶什么東西回家？程序員版：if（看到西紅柿）西瓜等于2；else 西瓜=1。buy 西瓜。條件：看見西紅柿 執行命令：買兩個西瓜一語道破版：其實吧，看到西紅柿呢是賣兩個西瓜的觸發條件…沒看到就買一個西瓜，看到就買兩個西瓜。所以這里出現的不僅僅是程序員的思維和我們的差異化，也說明了一句話沒有表述清楚所帶來的問題是很大的。
另外就是文案用語的一致性，在整個產品同樣的場景中，我們需要統一文案用語。
7.常見控件
具體見下方列表
8.撰寫方式
作為一個設計師，不管是否在做視覺，我們都需要對文檔有一個美化意識，如果你的文檔非常凌亂，那么在別人眼里就會覺得你是一個比較粗心大意，不夠負責任的人，所以我們盡量在做交互輸出文檔的時候也畫的美觀一些。
目錄
首先在目錄的撰寫時候要進行分類，通常我做的時候會對該需求以頁面父子集關系進行創建，父集為核心頁面，子集為其下的相關子頁面，這樣頁面的流轉和歸屬關系就不會搞錯。
說明
在撰寫規則與說明時可以通過標簽法進行標簽說明的撰寫方式，同樣在視覺上保持美觀，對比與對齊的運用，具體該寫什么東西上面已經說明就不贅述了。除了交互規則以外，高階的交互設計或者產品經理還需要補充業務規則，比如排序、商品抓去規則、權重、算法、活動規則等等這里就不展開說了。
總結
文檔的形式有非常多種，針對不同的公司和產品也需要作出相應的調整，能夠滿足需求和方便協作，目的就達到了，我們并不希望過多的時間花在文檔的撰寫上，而是希望大家在做設計時多思考業務，本次分享就到這里啦～
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前段時間一直在做運營類設計，banner在其中占了較大比重，為此就想寫一篇階段性總結。其中部分觀點參考了相關視頻教程和文章，設計新手一枚，如有不足還請大家海涵。
banner由以下五部分組成：版式，字體，顏色，背景，點綴。我就針對這幾點做些具體分析。
關于版式
大家發現沒有，大體上banner版式可分為兩種：1、圖文左右排版 2、文字居中
在工作中我接觸圖文左右排版的機會較多，因此今天著重分析下。
圖文左右排版
當banner中需要包含具體的素材，如某位大咖，某件產品時，一般會選擇左右排版。并且圖文比例約為6：4（接近0.618的黃金比例）。
關于為何文字部分要大于圖片部分，我做了如下分析：如果banner中只有某位大咖、某件產品，而沒有文字襯托，用戶就不會知道banner想表達的什么。
如下圖，banner中只有一位拉大提琴的中年外國男子，人們會猜測這男子的個人專輯發布了？他是誰？所以，通過圖片用戶只能對信息有個大致了解。
相反，如果把banner中圖片部分遮去，而只保留文字部分。人們能夠獲取的關鍵詞有：5首電影歌曲、回憶過往的。因此即使沒有配圖，文字也能將信息精準地帶給用戶，文字所占比例應當比圖片多些。這也就解釋了為何大部分左右排版的banner都是文字占比大于圖片。
banner中有些文字放左邊，有些放右邊，這有什么區別呢？
下圖中第一個banner是關于歐美電影歌曲的，右側可布局拉琴的男子，也可配電影片段，還可放正在播音的留聲機。第二張banner同樣如此。
下面兩圖均是圖左字右的banner，第一張《首席醫官》，特指這本書。
第二章奧運冠軍陳一冰求婚——除了他沒別人了。
說了這么多，總結出圖右字左和圖左字右的區別了嗎？圖片在右，配圖內容比較模糊；圖片在左，配圖內容比較清晰。由于人們習慣的閱讀順序是從左到右，左邊放什么意味著用戶會先看到什么。當圖片信息清晰時圖片放左，先用特定配圖吸引用戶目光，再加以具體的文字闡述就更正常不過了。而如果把含義不清的配圖放左左邊，用戶得看到右邊的文字部分才能獲得banner想傳遞的內容，這會導致用戶接收信息時間增加。
2、文字居中
在工作中我沒怎么接觸過文字居中的排版方式，因此很抱歉沒法做太多的剖析。印象中電商比較喜歡此類排版，也許是文字放在正中的位子，底下可以放許多產品？
版式中大小標題的比例
發現沒？大小標題比例約為2：1。其實這和一級標題，二級標題是同個道理，我們在設計banner時總希望用戶能把banner上的文字看全，但又不希望大小標題混在一起主次不清，因此在排版合理，用戶能看清字的綜合考慮下，大小標題比例約為2：1。（其實小標題太小運營們也會懟的）
關于字體
banner中常用的字體有三種：襯線體（serif）、非襯線體（sans-serif）、書法體（cursive）
都說字體有各自的性格，襯線體筆畫有粗細之分，它模仿的是中國古代字體和古代碑文上的字體，因此襯線體能給人古典，文藝的感覺，適合用于文藝氣息或與女子的相關設計。
非襯線體筆畫簡潔，筆畫較粗，體現現代，簡約的特性，適合用于蒼勁有力，與男子相關的設計。
書法體源自中國古代，能體現中國文化和揮灑墨水的豪氣，適用于文藝主題和金戈鐵馬般的豪邁主題。
ps：商用字體需要注意版權?。?！這點很重要
關于顏色
在生活中，色彩心理學對人們對顏色的認知有很大的影響。
黑色：黑色是一種代表品質、權威、穩重、時尚的色彩，同時也含有冷漠、悲傷、防御的消極情感。
白色：傳遞一種簡單、純真、高雅、精致、信任、開放、干凈、暢快、樸素的情感。
灰色：代表睿智、老實、執著、嚴肅、壓抑的色彩。
紅色：傳遞喜慶、自信、斗志、權威、性感的情感。
綠色：是自然界中最常見的顏色，代表生命力、青春、希望、寧靜、和平、舒適、安全的情感。
藍色：是三原色中的一種，代表永恒、靈性、清新、自由、放松、舒適、寧靜、商務。
紫色：是一種代表優雅、浪漫、高貴、時尚、神秘、夢幻、靈性、創造性的顏色。
黃色：代表陽光、青春、活力、時尚、尊貴、年輕輕快、輝煌、希望的顏色。
因此在設計中選擇主色調也要遵從如上:point_up_2:。
例如活潑年輕的內容可選擇純度較高的藍綠色、綠色等作為主色調。
文藝類內容則適合飽和度不高，偏向白色這類能讓人平靜的色彩。
關于顏色的搭配，我一般會在花瓣上找些主題相近的banner作參考。
此外推薦幾個配色網站：
https://coolors.co/browser/latest/1
https://color.adobe.com
https://uigradients.com
關于點綴
大約有3種。橢圓點綴，圓角矩形點綴，實物點綴。圓形圓角矩形點綴可適當加些漸變和陰影。
為了不讓實物點綴太過搶眼，可以適當做些弱化，比如降低透明度或是做些模糊處理。
關于背景
大約有3種。
純色背景，實物背景，材質背景。根據畫面的需要可以選擇合適的底圖。
作者： 夜夜yue
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
總結：看了這么多手癢癢了嗎？此時此刻，打開ps做個banner練練手唄~~~~
如果你想設計出卓越，高效和流暢的用戶界面，就請參考Ben Shneiderman的“界面設計的八大黃金法則” 。蘋果，谷歌和微軟設計的產品都反映了Shneiderman的法則，這些行業巨頭制定的用戶界面指南都包含Shneiderman黃金法則中的特征，而這些公司的熱門界面設計則是法則的視覺體現。本文將告訴你如何整合8大黃金法則來改進你的工作。
界面設計的八大黃金法則
Ben Shneiderman（生于1947年8月21日）是美國馬里蘭大學人機交互實驗室的計算機科學家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其熱門書“設計用戶界面：有效的人機交互策略（Designing the User Interface: Strategies for Effective Human-Computer Interaction）”中介紹了界面設計的八個黃金法則：
一致性
當你在設計類似的功能和操作時，可以利用熟悉的圖標，顏色，菜單的層次結構，行為召喚，用戶流程圖來實現一致性。規范信息表現的方式可以減少用戶認知負擔，用戶體驗易懂流暢。一致性通過幫助用戶快速熟悉產品的數字化環境從而更輕松地實現其目標。
常用用戶使用快捷操作
隨著使用次數的增加，用戶需要有更快的完成任務的方法。例如，Windows和Mac為用戶提供了用于復制和粘貼的鍵盤快捷方式，隨著用戶更有經驗，他們可以更快速，輕松地瀏覽和操作用戶界面。
提供有用信息的反饋
用戶每完成一個操作，需要系統給出反饋，然后用戶才能感知并進入下一步操作。反饋有很多類型，例如聲音提示，觸摸感，語言提示，以及各種類型的組合。對于用戶的每一個動作，應該在合理的時間內提供適當的，人性化的反饋。如設計多頁問卷時應該告訴用戶進行到哪個步驟，要保證讓用戶在盡量少受干擾的情況下得到最有價值的信息。
作者/版權持有人：Google，Inc. 版權條款和許可：合理使用
Windows Media Player設計師應該牢記Ben Shneiderman的第三個黃金法則：提供有用信息的反饋。體驗不佳的錯誤消息通常會只顯示錯誤代碼，對用戶來說這毫無意義。作為一名好的設計師，你應該始終給用戶以可讀和有意義的反饋。
設計流程需要設計一個完結
不要讓你的用戶猜來猜去，告訴他們其操作會引導他們到哪個步驟。例如，用戶在完成在線購買后看到“謝謝購買”消息提示和支付憑證后會感到滿足和安心。
提供簡潔的錯誤操作的解決方案
用戶不喜歡被告知其操作錯誤。設計時應該盡量考慮如何減少用戶犯錯誤的機會，但如果用戶操作時發生不可避免的錯誤，不能只報錯而不提供解決方案，請確保為用戶提供簡單，直觀的分步說明，以引導他們輕松快速地解決問題。例如，用戶在填寫在線表單時忘記填寫某個輸入框時，可以標記這個輸入框以提醒用戶。
允許撤銷操作
設計人員應為用戶提供明顯的方式來讓用戶恢復之前的操作，無論是單次動作，數據輸入還是整個動作序列后都應允許進行返回操作，正如Shneiderman在他的書中所說：
“這個功能減輕了焦慮，因為用戶知道即便操作失誤，之前的操作也可以被撤銷，鼓勵用戶去大膽放手探索?！?
給用戶掌控感
設計時應考慮如何讓用戶主動去使用，而不是被動接受，要讓用戶感覺他們對數字空間中一系列操作了如指掌，在設計時按照他們預期的方式來獲得他們的信任。
減少短時記憶負擔
人的記憶力是有限的，我們的短時記憶每次最多只能記住五個東西。因此，界面設計應當盡可能簡潔，保持適當的信息層次結構，讓用戶去再認信息而不是去回憶。再認信息總是比回憶更容易，因為再認通過感知線索讓相關信息重現。例如，我們經常發現選擇題比簡答題更容易，因為選擇題只需要我們對正確答案再認，而不是從我們的記憶中提取。被彭博商業周刊稱為“世界上最具影響力的設計師之一”的Jakob Nielsen發明了幾種可用性研究方法，包括啟發式評估。信息再認而非回憶就是Nielsen界面設計10種可用性啟發式原則之一。
了解蘋果的設計如何整合Shneiderman的8大黃金法則
蘋果整合Shneiderman的八項黃金法設計出成功的產品，他們從Mac到移動設備設計都取得了巨大的成功，他們以產品設計的一致性，直觀而美麗為榮。蘋果的iOS人機界面指南也告訴我們他們的設計團隊如何應用Shneiderman的設計原則。
1. 一致性
“一致性”和“感知的穩定性”在Mac OS的設計中體現得淋漓盡致。不管是80年代的版本，還是現在的版本，Mac OS菜單欄設計都包含一致的圖形元素。
作者/版權持有人：StockSnap.io 版權條款和許可：CC0
作者/版權持有人：StockSnap.io 版權條款和許可證：CC0
隨著時間的推移，Mac OS的外觀有很大變化，Mac OS菜單欄設計都保持一致。
2. 快捷操作
如前所述，Mac允許用戶使用各種鍵盤快捷鍵，使用頻率高的包括復制和粘貼（Command-X和Command-V）以及截圖（Command-Shift-3）。
作者/版權持有人：StockSnap.io 版權條款和許可證：CC0
Mac允許用戶鍵盤快捷方式操作實現通常需要鼠標、觸控板或其他輸入設備才能完成的操作。
3. 有用信息反饋
當用戶點擊Mac桌面上的文件時，該文件會“突出顯示”，這是視覺反饋的一個很好的示例。另外，當用戶拖動桌面上的文件夾時，他們可以看到在按住鼠標時，文件夾顯示被移動的狀態。
作者/版權持有人：Euphemia Wong 版權條款和許可：合理使用
作者/版權持有人：Euphemia Wong 版權條款和許可：合理使用
4. 操作流程的設計
當用戶將軟件安裝到Mac OS時，提示信息的屏幕顯示用戶當前的安裝步驟。
作者/版權持有人：Google，Inc. 版權條款和許可：合理使用
5. 錯誤操作的解決方案
在軟件安裝過程中，如果發生錯誤，用戶將收到友好的提示信息。提供復雜的解決方案，或用戶難以理解的解決方案，或只報錯不提供解決方案，都是極大影響用戶體驗，使用戶沮喪的關鍵原因。根據錯誤操作的嚴重程度，區分何時使用小的，不會影響用戶操作的提醒，以及何時使用大的，侵入式提醒。但當錯誤操作發生時，請謹慎選擇正確的語氣和正確的語言提醒用戶操作錯誤。
作者/版權持有人：Google，Inc. 版權條款和許可：合理使用
Mac OS通過顯示一個溫和的提示消息向用戶解釋出現了什么錯誤操作及其原因。另外，解釋這是由于自己的安全偏好選擇，進一步向用戶保證，告訴他們一切在掌控范圍內。
作者/版權持有人：Manutencaonet Blogspot 版權條款和許可：CC BY 3.0
Windows系統中這個非常不友好的提示信息使用“fatal（后果嚴重的）”和“terminated（被終止）”字樣。這樣的負面的，不友好的言語肯定會嚇倒大多數用戶！
6. 允許撤銷操作
當用戶在安裝過程中提供信息時發生錯誤，允許他們重新回到上一步，而不必重新開始。
作者/版權持有人：Euphemia Wong 版權條款和許可：合理使用
7. 給用戶掌控感
讓用戶有權選擇是繼續運行程序還是退出程序，Mac的活動監視器允許用戶在程序意外崩潰時“強制退出”。
作者/版權持有人：Euphemia Wong 版權條款和許可：合理使用
8. 減少短時記憶負荷
由于人類短時記憶每次只能記住5個東西，所以蘋果iPhone屏幕底部的主菜單區域中只能放置4個及以下的應用程序圖標，這個設計不僅涉及對記憶負荷的考慮，還考慮了不同版本一致性問題。
作者/版權持有人：Brian Voo 版權條款和許可：合理使用
作者/版權持有人：Pixabay 版權條款和許可證：CC0
工作表：如何將Shneiderman的8項黃金法則應用于你的界面設計
作為設計師，你的工作是創建直觀，精美和流暢的用戶界面設計，讓用戶感到輕松和滿意。下面這個工作表可以幫你把上述這些規則應用于你的設計中。
工作表的PDF格式下載鏈接: https://pan.baidu.com/s/1nvp1EKp 密碼: mjq7
從Mac和PC到移動設備甚至是虛擬現實，以及將來可能出現的任何互動科技，只要你的設計涉及到人與界面之間的交互，這八大規則在設計過程中至關重要，不容忽視，現在就用這個工作表學習如何將它應用到你的設計中吧。
作者： oftodesign
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
以下內容主要分成兩大部分，第一是聊聊響應式和自適應的區別和原理，以及我們應該如何去設計響應式界面；第二部分也是比較關鍵的B端系統設計的核心，B端設計中臺完整構建過程的具體步驟，以及應用到的格式塔原則，和命名的一些注意事項，內容較多，大家可以根據上述目錄來選擇性閱讀。
簡單概括多端兼容設計的發展史，最早是桌面端，比如桌面的一些應用；后來出現了移動端，針對移動端大家用的都是WAP，指一種無線應用協議，大家在用手機瀏覽一些網站，會把網站翻譯成一種低流量的瀏覽方式，比如去掉圖片大圖，只剩全文字，因為當時網絡不好，早在3G和2G時代移動端用的都是WAP；在2008年之后出現了響應式，也就是做一套代碼可以兼容三端（網頁、移動端、iPad）設備，在發展的同時也遇到很多問題，但響應式同時也遇到了很多問題；于是又出現了自適應，指不同的設備打開不同的頁面進行自適應，自適應能增加效率，但需要增加工作量；2017年以后直到現在看到最常用的就是漸進式，類似完整的像在使用一個APP。這是多端兼容設計的整體的發展。
可以理解成用戶在手機、電腦、ipad打開同一個界面，所呈現的界面是一樣的。需要考慮移動端設計和網頁端怎么通過一套代碼進行兼容。
自動布局算是響應式的一種，但平時看到很多響應式其實并不是真正的響應式，而是自動布局，因為界面在不同的設備用的是不同的模板，當我們用電腦打開呈現的是一套模板，而用手機打開則是另外一套模板，這種看起來是響應式，其實不是。因為當我在開發者模式下調節不同設備展示時，就會發現，其實是換了一個網址來根據不同的設備進行自適應的，而真正的響應式是不需要刷新的，在拖小窗口的時候就會變成手機端的那個樣子。
漸進式布局是近幾年比較新起的，這種布局設計，很像一個網站或者本身它就是一個網站，但用起來就像一個APP一樣，看到這里大家很容易相到，小程序就是漸進式布局得一種，小程序明顯是一個網頁，但通過技術的一些嵌入和一些接口或者緩存的方式的操作，讓用戶在使用的時候感覺小程序就是一個APP，但核心技術還是web網頁。
響應式的原理是通過定位的方式來做響應式的各種開發，需要在頁面中至少標出這十個點：中心點，上下左右點，上左上右點和下左下右點，這幾個點其實就代表了做響應式和做布局相應的位置。這樣可能大家不容易理解，其實結合figma來看，這些點對應的就是這樣（如下圖），在figma中的布局點。設計師通過調節圖形的布局點，可以做到在頁面拉伸時，讓想動的元素跟隨變化，不動的元素靜止不動，這就是響應式的原理。換言之，我們做響應式布局的原理也就是通過figma或者sketch中的布局約束這個功能來實現的。
01、響應式
如下圖是響應式的優點和缺點。響應式其實就是只開發一套頁面，這個頁面兼容三端。雖然做了響應式，但如何響應是需要設計師去設計的。比如我們設計了一個移動端界面，然后全部做好對應的自動布局，再進行頁面拉伸，內容隨之會發生變化，比如當拉伸到1024*768的時候，也就是iPad的尺寸，就會發現局部在設計上有些不合實際情況，這時就需要設計師在對應尺寸的設計稿上進行內容上的微調，比如按鈕不可能那么長，就把按鈕設計的短一點。當繼續進行拉伸到1440網頁的寬度時，然后再酌情針對網頁尺寸的呈現樣式，局部進行尺寸的調整，比如文字和按鈕被拉伸到網頁版都需要居中對齊，電腦端的樣式就需要設計師重新排版了。
通常在B端系統，設計師需要做響應式設計時，往往是從大往小做設計，這也取決于這個B端產品是否需要進行移動端的設計，《B端設計總概二》中提到過什么情況下進行設計B端移動端。如果需要設計B端移動端，就需要我們將網頁改成移動端設計，比如B端的側邊欄導航在拉伸到移動端時，就會變成用一個折疊懸浮的iocn來替代等等這樣設計上的改變。在figma中，做三端拉伸時候，可以用斷點插件來進行演示，通過對斷點插件的設置，就可以完美的看到頁面在三端不同情況的適配呈現，斷點插件用來做演示非常方便。
02、自適應
如下圖是自適應的優點和缺點，其實就是一個項目開發三個頁面，分別做定制設計，網頁端、移動端和Ipad端。
我們都知道2021年也就是今年是我國新基建的元年，十四五規劃2035遠景目標里提到重點發展傳統企業數字化轉型，尤其是今年我們設計師更能深刻體會，C端和B端已經是完全兩個不同的行業，C端發展近十年，已經很難再做到創新上的突破，該做的功能和創新都已經做了，而B端這片藍海才剛剛開始發力，很多企業也都在考慮B端系統的搭建，降本提效率成了很多公司新的指標，因此數字化轉型重點在于B端系統探索，B端重點在于中臺的搭建！設計師通過設計中臺，構建出基本的業務類型，再分類到業務中，構建出不同的業務界面，所以設計中臺非常關鍵，很多公司經常會用這兩個系統去構建，Antdesign和Elemnet就是設計中臺，我們會發現用Antdesign可以做出很多的系統，那怎么進行設計中臺的設計呢？和我們設計師有什么樣的關聯度呢？帶著這個問題，我們深度探索B端設計中臺的落地！
概念：中臺是互聯網的術語，一般應用于大型企業，中國互聯網的變革永遠是從大型互聯網開始，大型互聯網公司引發了技術的變革，這也是中臺的興起，一般指搭建一個靈活快速應對變化的架構，快速實現前端提的需求，避免重復建設，達到提高工作效率目的。
作用：降本提效。如果沒有組件庫，普通設計師一天最多做十個頁面，再多就不太可能了，如果有組件化得產生，一天可以做一百個左右的界面。在面對B端系統這樣幾千個頁面的巨大的工作量前，組件庫的作用尤為重要。但如果落地，就需要前端工程師的密切配合，因為設計師設計的組件只是一個樣式，而前端需要把組件進行代碼化，所以組件一定是代碼化的，也就是說只有代碼化的組件才是真正的組件。所以視覺組件的復用，和前端代碼的復用，可以大大提高設計師的工作效率。
基本庫指的是一些色彩系統、字體系統、圖標系統、柵格系統、間距系統等等，之所以強調系統兩個字，有系統就要統一規則和統一規范，然后進行調用應用在系統中的各個地方，比如我們想調用一個顏色，不是去隨選用一個顏色，應該嚴格的從色彩系統中去調用，如果系統組件庫里沒有這個顏色，我們也絕對不可以使用，可以先用替代色做或者根據業務再進行補充顏色進組件庫為了后續的調用，這是一種比較嚴謹的使用方式。所以在建立組件庫的時候我們要考慮全面，組件庫中如果沒有相應的組件，我們應該試著反推一下，是否要加進組件庫中去，來進行系統的調用。在做中臺的過程中，我們一直使用Antdesign，我們對組件的名稱，組件的分類其實一點都不陌生，其實Antdesign也在借鑒國外的Bootstrap組件庫（大家感興趣可以下載Bootstrap組件庫進行查看），所以并不是Antdesign組件庫形成了一定的規則，它也是在沿用別人的規則，而這些規則也需要不斷的有大公司去繼承出來，所以慢慢衍生出來現在這樣的組件庫，那中臺設計，首先要搭建基本庫，把基本庫里的基礎一些系統搭建好后，我們繼續去做擴展庫。
如下圖，擴展庫中包含了很多內容，比如分了四類，導航系統，數據錄入，數據展示和反饋系統。其中導航系統又包含了，面包屑導航、下拉菜單、導航菜單、頂部導航等等，包括后面的數據錄入、數據展示、反饋系統也包含了很多內容。我們做這樣的擴展庫，也不需要做成像Antdesign的組件庫里包含的那么多，或者和新出得字節Arco組件庫，因為它們面向的是系統級的解決方案，各行各業都可以用它，它面向的是一個大系統，也許我們只涉及到了其中的20%，因為也沒有一個系統能用到它所有的組件，所以我們自己在設計組件庫的時候，一定是按照我們自己項目的范圍去做組件庫，而不是做一個大而全的，大而全的組件庫對我們也沒有意義。它們做的是公共平臺，而我們要做的是一個專屬平臺。
形成完基本庫和擴展庫后，第三步是建立方法庫。方法庫告訴我們的是什么時候用，比如我做了一個多選框，這個多選框應該什么時候用，是不是只要遇見一個選擇就去用多選框，肯定不是，應該加以說明什么時候用這個多選框。類似于是組件的設計說明。
最后再做一個案例庫，最佳實踐庫，具體組件什么時候用我們知道了，接著案例庫就是在告訴我們應該如何正確的使用，或者說的方法是什么。比如標簽的左對齊和右對齊，這種情況都對，什么時候用頂對齊，什么時候用左對齊，什么時候用右對齊呢？那么根據眼動儀實驗數據數據來看，并且結合給出一些工作中業務中的最佳實踐得案例放進去，給使用的人去做指引。
所以設計師做的事情，不僅僅是應用組件庫和創造組價庫，還應該指導其他設計師，指導開發人員在去復用每個頁面組件的的時候，應該怎么正確的使用，這也是在B端設計中一個關鍵的環節，同時我們的視覺系統一定也是和業務有關聯度的，所以在B端中做設計一定也不會脫離業務去做，我們一定要聯系到實際的業務場景中，這個業務場景指的就是業務和視覺的結合，在做C端的時候，業務場景一定不會比B端多，C端的業務場景大多是定制化的業務場景，它要求的是個性化，不要求通用，盡量得個性化，比如圖標、按鈕、頁面，而B端需要統一化，中臺組件庫的落地，可以大大提高設計師的工作效率和開發人員的協同效率，嚴謹的調用組件使用組件，可以使得系統頁面保持高度的一致。
如圖1：可以看出縱列的關系更緊密，因為縱間距小于行間距。
如圖2：可以看出行間距大于列間距，它得橫向關系更加緊密。通過圖中這樣的視覺設計為什么會感覺間距更加緊密呢？這屬于用戶心理學的應用，如果元素相鄰的更近，元素之間的關系就會更加的緊密。
如圖3：如果元素相鄰的關系都是保持一樣的，那么它們的關系是相對對等的。
由此可以得出結論，如果相鄰的關系越近，它們的關聯度就越近，如果相鄰的越遠，它們的關聯度就越遠。
應用案例：如圖4卡片中得標題和內容，設計中把標題和內容進行區分，所以我們會做大量的留白，這樣的留白就會讓信息結構具有層次感，層次感就是指它們信息結構的關聯度，如果想讓它們有關聯度，就讓它們距離近一點不要做區分，如果不想讓它們有關聯度，或者關聯度出現一個等級的區分，那么就可以加一條線，讓它們之間的關聯度分隔開。這就是格式塔接近性的應用。
如圖5：如果去區分右邊的形狀，通常我們會根據形狀進行區分，因為人的潛意識會認為相似的形狀會更有相關的分類性。這就是格式塔中的相似性原則。
應用案例：如果文字的標題大小是保持一致的，包括它有統一的大小，統一的色彩，統一的字號，那系統中的其他同樣功能的地方，都應該用統一的文字，這就是格式塔相似性的應用，比如圖標也是一樣，只有用了相似的圖形大小，相似的顏色，在相同的位置，用相同的圖標進行表達，圖標之間的設計才具有相似性。
如圖6：可以看到有一個L，是主體與背景進行了區分，如果在設計的時候讓L看的更加明顯，我們采用的辦法就是將主體的色彩或者形狀變的更加獨特，或者將背景的顏色變得更加分明，這樣就可以做到那個L看的更加明顯。這就是主題與背景區分原則。
應用案例：比如警告彈出，可以用色彩去區分，目標就是讓用戶看的更加得清晰，當警告的時候給用戶一個警告的信息，當成功的時候給用戶一個成功的信息。還有類似對話框的彈出，采用背景變暗和加陰影的方式，都使用到了格式塔的主體與背景變化關系的原理。因此應用在我們設計系統中，前景和背景進行區分的時候，我們就可以通過色彩進行區分，色彩的區分要保持統一，比如背景色彩透明度50%同時加一些背景模糊，其他的背景也需要保持一致，陰影也是一樣，如果把陰影放在一個平面上，距離平面越近，它得陰影越短，距離平面越遠，它得陰影越長，這也是陰影的層級關系。
如圖7：可以看出這是一個四分之一的圓形。
如圖8：這個圖可以看出是一個五角星。
封閉性應用案例：當一個形狀被另外一個形狀或者被另外一個色彩阻斷的時候，并不影響人們對這個形狀額外得認知，一定會腦補出另外一個形狀，這個原則和我們UI的關系是什么呢？比如一個loading，半圓一直在旋轉，或者圖表中的圓占比，我們就可以判斷出誰大誰小，誰多誰少，判斷出當前的進程和位置，封閉性原則通常應用在圖標的設計，圖表的設計和步驟條的設計中。
如圖9：可以看出用一些簡單得形狀來體現，其中三角形具有明顯的指向性，三角形箭頭指向右邊，上面五個是一組，可以看出它們具有連續性；另外一組三角形箭頭指向右下角，可以看出它們是連續的一組。不同的形狀會有連續性，箭頭也特別有指向性，這就是為什么返回和前要進放在不同的位置，當我們的數據需要有連續的時候，我們也要使用相似的形狀來表達，這就是連續性原則的應用。
同理如圖10：連續性一定是要有連續等階的變化，從左上角開始，向下和向右我們可以看出有明顯的顏色連續等階變化，通過色彩的透明度也可以做到連續性。
很多公司或者不同公司有不同的命名方式，這個需要和團隊開發提前做溝通，主要以方便開發習慣操作為主，如果不命名也不能非得說成是錯誤的，命名可以理解成是一件錦上添花的事情，因為一切都以效率優先，命名自然會影響工作效率，通常情況，組件的命名可以分成組件的名稱、級別、尺寸、狀態，這樣的命名順序來進行，這樣命名開發使用也比較方便，因為是按照了開發的統一規則來進行命名的。如圖所示：
當英文不好的時候，推薦大家記常用組件英文名，以及常用狀態名、級別名、內部名、尺寸名和位置名，那這些英文也幾乎涵蓋了工作中80%的英文詞匯，收藏記憶哦~
至此B端系統設計總概系列為終結篇，回顧第一篇主要內容是如何正確設計組件庫，B端業務調研的具體過程步驟，以及視覺規范的建立，可以看出第一篇屬于B端設計的方法論或者設計指導，也是為開展B端設計前的一些準備工作；回顧第二篇總概主要內容是如何設計表單、表格、圖標、儀表盤這些經常用到的設計難點，第二篇更加講究設計落地過程中遇到的疑難雜癥，專業技法；回顧當前總概三，主要內容就是中臺規范的建立和自適應、響應式適配的難點，主要是成系統的B端設計步驟。我們都知道B端市場剛剛打開，而且當下對B端設計師的需求還遠遠不能滿足我國現代化建設，數字化推進這么的大市場，作為UIUX，更早的拓寬一條路是我們當下必要的選擇，謝謝閱讀，祝愿各位2022乘風破浪，B端設計學有所成，如虎生翼！
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn
