交互乾貨必收 | App界面互動設計規範

2020-12-11 人人都是產品經理

在上篇《APP界面設計風格》確定下來後，產品經理（兼互動設計）還不用著急將所有的交互稿扔給設計師進行細緻的界面設計。在細節設計啟動前，拉上設計師和安卓前端開發、ios前端開發一起商議確定設計規範先吧！

APP設計規範指對APP界面進行風格統一，對界面元素的樣式、顏色和大小設定統一的規範和使用原則。與設計、前端約定好統一的設計規範很重要，約定設計規範可以減少產品、設計、前端的溝通成本；可以使界面設計整潔、統一，減少界面元素的重複設計；可以減少設計素材，控制安裝包的大小。

APP設計規範主要包括對界面布局、背景色、字體顏色大小、界面元素間距、彈層、loading、圖標、按鈕常態點擊態等進行統一的梳理和規範。

一、頁面布局規範

頁面布局

頁面布局和交互規範上建議安卓、ios儘量統一，這樣可以避免安卓和ios分別設計一套稿子。當然土豪公司可以忽略這個建議，安卓和ios分別做專門的設計當然更好。在中小型項目來看，設計資源緊張的話可以考慮安卓和ios用同一個稿子，分別做相應的微調後輸出適用安卓和ios不同的尺寸要求就可以。

推薦使用mac矢量設計工具」sketch」。以ios平臺的iPhone5的尺寸640*1136px作為標準尺寸設計。在界面設計完成後可以做相應的微調導出適用ios和安卓尺寸的稿子。這裡可以首先統一設計稿輸出規範：

  • 安卓（720*1280px）：界面預覽圖、界面坐標圖、標準界面的圖標png文件
  • IOS（640*1136px）：界面預覽圖、界面坐標圖、1-3倍圖矢量圖標pdf文件

PS：界面坐標圖指在設計已定稿的界面預覽圖上標註：界面元素的間距、文字的顏色、文字的字號大小、圖標的尺寸、按鈕不同狀態顏色、按鈕的尺寸等等

界面坐標圖實例

二、標準色規範

標準色規範

標準色規範：重要、一般、弱。標準色重要：重要顏色中一般不超過3種，這裡的例子重要顏色之一紅色需要小面積使用,用於特別需要強調和突出的文字、按鈕和icon；而黑色用於重要級文字信息比如標題、正文等。標準色一般：都是相近的顏色，而且要比重要顏色弱，普遍用於普通級信息、引導詞比如提示性文案或者次要的文字信息。標準色較弱：普遍用於背景色和不需要顯眼的邊角信息。

標準色實例

三、標準字規範

標準字規範

文字是APP主要信息的表現，尤其新聞閱讀、社區APP等制定標準的設計規範和良好的排版方式，用戶使用APP也覺得毫無疲勞感，這一點很重要。標準字規範重要、一般、弱。這裡主要規範標準字的大小，標準字要注意跟上文的標準色進行組合突出APP重要的信息和弱化次要的信息。標準字重要：大字號普遍用於大標題、top導航，較小字號用在分割模塊的標題上。標準字一般：主要用在大多數文字，比如正文。標準字弱：普遍與標準色較弱組合用於輔助性文字如一些次要的文案說明。

標準字實例

四、界面元素間距

界面元素間距

APP界面要給人簡潔整齊，條理清晰感，依靠的就是界面元素的排版和間距設計。這裡間距設計還要注意考慮適配不同的屏幕解析度。一般解決方案有據屏幕等比放大縮小間距，或者固定某些界面元素的間距，讓其他空間留空拉伸。為了滿足屏幕解析度較大的設備，有時甚至需要改變APP界面的頁面布局。

微信iPad版vs微信iPhone版

五、彈層規範

彈層規範

彈層規範要注意分別設計安卓和ios的彈層，比如ios大多操作彈層由底部彈出，而安卓直接顯示操作再頁面中央，這樣的交互搞作應該遵循各自平臺的設計要求。彈層需求根據不同的功用設計不同的樣式。比如操作性彈層-右上角更多按鈕觸發；提示性彈層：弱提示性的應用系統的token飄字提示即可；需要強提示可以使用取消、確定的模塊彈層；更強提示而且彈層需要承載一定操作的使用強引飛彈層，右上角提供關閉操作或者可以點擊非彈層區域關閉彈層。

六、Loading規範

Loading規範

頁面loading動畫是APP界面必不可少的元素，增加loading可以給用戶明確的反饋功能正在加載，減少用戶在等待功能響應引起的煩躁感。另外loading動畫除了常規的菊花還可以考慮使用npc，讓APP更生動、活潑；或者使用logo口號加強APP的品牌形象。

次元社、閨蜜圈loading截圖

七、圖標/按鈕規範

圖標按鈕規範

圖標規範要注意安卓和ios平臺需求不同的大小和不同的文件格式：如安卓需要720*1280px標準頁面的png圖標格式；ios需要3個尺寸320*（1-3）倍圖的圖標pdf文件。圖標還應該根據不同的功能需求設計不同的狀態：如常態、選中態、點擊態等。

按鈕規範按狀態分有：常態、點擊態、不可點擊態。按鈕規範因不同功能和場景需要，設計不同的樣式和顏色，在尺寸上也分有：長、中、短；而且按不同手機平臺長中短尺寸也注意有所不同。

八、頁面加載失敗、頁面為空展示

加載失敗、頁面為空

頁面加載失敗、頁面為空可以統一規範為NPC、文案、按鈕。要注意根據不同的場景顯示不同的NPC和文案。

……

…

設計規範主要由設計童鞋來梳理，但必須要與前端開發、產品經理達成共識，嚴格遵守約定的規範，否則這個設計規範就毫無意義了。在制定設計規範過程中，產品經理要積極主動充當橋梁角色組織設計師、前端開發一起制定設計規範，保證設計規範考慮的更切合實際、更全面、更完整。

#專欄作家#

鷹眼Eeyes，閨蜜圈產品經理，人人都是產品經理專欄作家。擅長產品策劃，產品運營，項目管理。專注於移動社交方向，深度調研女性社交；關注O2O電商、智能硬體、物聯網發展。厚積薄發，總結，升華中…

本文原創發布於人人都是產品經理，未經許可，不得轉載。

相關焦點

  • 乾貨:VR APP界面設計實踐指南
    二、傳統界面設計流程我們多數人對於移動app的設計流程早已輕車熟路，然而VR界面的設計工作流程仍然沒有所謂的標準定義。我們在著手啟動第一個VR app項目時，首先做的就是對設計流程進行定義。1、傳統流程，新領域我們第一次體驗Gear VR時便注意到其中的界面設計與傳統移動app有著相似之處，譬如在交互流程方面，用戶都是通過與界面元素的互動來實現頁面間的跳轉。當然這個例子太過籠統，目前只要記得這個結論便好。
  • iOS10互動設計啟示
    著名的互動設計專家Jon Kolko在他的《互動設計沉思錄》中指出：「行為是發生在第四個維度（時間維度）上的，而互動設計的目標是試圖隨著時間的推移，逐漸理解並進而塑造人的行為」。舉個例子，iOS10最明顯的細節之一：拿起手機就亮屏。很多人之前會有這樣的困擾：我只是想看個時間，一按Home鍵，duang！一不小心就進入系統界面了。
  • 互動設計是什麼?深入分析互動設計專業,附全球互動設計院校推薦
    隨著網際網路時代高速發展，越來越多的交互設備開始進入人們的生活，互動設計師就開始顯得愈發重要。據統計，即使是互動設計專業的應屆畢業生，月薪平均也在1萬以上，有2年以上工作經驗的互動設計師，月薪可達2萬5以上。互動設計儼然成為了設計領域一個炙手可熱的專業。那到底互動設計是什麼？哪些大學的互動設計專業最好？未來的就業前景又如何？
  • 長沙UI設計、互動設計主要學什麼
    第二階段：設計基礎與工具UI設計與互動設計歷史與趨勢UI設計&UE設計工具介紹Photoshop在UI&UE設計中的運用Sketch介紹與熟悉MindManager>建立產品構架第四階段：交互界面繪製界面互動設計原則草圖與原型圖繪製技巧低保真與高保真原型圖設計方法交互軟體使用與實戰原型的閱讀技巧與規範
  • 嵌入式人機互動界面研究與實現
    需要特殊指出的是蘋果公司IOS系統屬於封閉系統，開發者僅能針對應用程式界面進行開發，無法修改系統界面。目前，嵌入式人機互動界面開發可以選擇作業系統主要分為WinCE和Linux兩大陣營，隨著2012年底微軟公司宣布Wince停止更新，越來越多的開發人員在選擇作業系統時轉而選擇Linux以及Linux衍生出的Android等作業系統。
  • 什麼是設計——交互&UI
    而UI的價值在於：圍繞產品定位塑造風格與形象，為產品、用戶創建情感連接，從而更好的實現業務轉化與增長三、什麼是互動設計1. 交互的定義互動設計是指人與產品、系統或服務之間創建的一系列對話。互動設計師可以被稱為是行為的塑造者。
  • 「產品入門」UI互動設計 vs UI設計 vs 互動設計
    UI互動設計vs UI設計vs互動設計對比之概念UI設計UI設計或稱界面設計（英文UserInterface Design, 縮寫為UID），它是指對軟體的人機互動、操作邏輯、界面美觀的整體設計。簡單來說，把互動設計的理念體現在UI界面上，就是UI互動設計。從設計重心方面來看，UI設計的重心是色彩和視覺，以界面美觀設計為主，主要考慮產品看起來怎麼樣。而互動設計則是以用戶為中心進行人機互動部分的設計，主要考慮產品用起來怎麼樣。而UI互動設計則需要兼顧UI與交互兩個方面進行設計，將交互的理念體現在UI界面上。2.
  • 「界面設計」「視覺設計」「互動設計」之間的關係是什麼?如何理解?
    、視覺設計、互動設計這三者有了自己的看法，但同時也看到很多不同的見解，我需要驗證自己的理解是否正確，所以請各位大神幫忙賜教（尤其是三者之間的關係）...界面、視覺、交互這三個詞在實踐中其實結合非常緊密。在不同的公司這三個叫法的設計師做的事情很可能是一樣的。我們不妨先來看看他們在理想環境中的工作職能。I.
  • iOS 11人機互動指南概覽:主題(Themes)
    iOS 設計主題（iOS Design Themes）作為一個app開發者， 您將有機會開發出一個優秀的、可能排在app store榜首的產品。當然，您必須對產品質量和產品功能有更高的要求。區分iOS和其他平臺的三大主題：清晰性（clarify）縱觀整個系統，各種尺寸的文字都是清晰可見的，圖標都是精確醒目，裝飾都是恰當的，打磨產品的功能可以驅動設計。留白、配色、字體、圖標以及其他的界面元素能巧妙地突出重要內容，並表達交互特性。
  • UI互動設計培訓機構淺析UI設計和互動設計的不同之處
    一、UI設計和互動設計概念區別UI設計：界面設計或界面設計（英文UserInterface design，簡稱UID），是指軟體的總體設計，用於人機互動、操作邏輯和美觀的界面。UI設計主要分為物理UI和虛擬UI兩種類型。網際網路行業常用的用戶界面設計是虛擬用戶界面，簡稱用戶界面。
  • 淺析APP之間相互交互的原理
    在產品設計中，經常會遇到APP之間相互調用的功能設計，比如：實現三方登錄。用QQ帳號快速登錄，如果安裝了 QQ，那麼應用會調用QQ的快速登錄界面，確認後， QQ會回調到原來的應用，同時將登錄的狀態信息返回給了原應用。實現分享。
  • 移動端APP應該如何定義交互規範
    每個APP都有很多交互功能，不同APP的交互效果也有差異，但是它們基本上都遵守統一的交互規範。比如相似的動作、位置、樣式、邏輯。頁面間交互頁面間交互，其實就是一個頁面進入另外一個頁面的交互效果。ios常見使用覆蓋移入效果。Android常見使用向左平移效果，當然返回的時候就是向右平移效果。
  • 語音交互時代,UX設計該怎麼做?
    對用戶而言，持續增長的語音交互體驗無疑是一個受歡迎的新趨勢。語音技術平臺與設備的激增、使用人數的增長，都證實了這一點。但對於網頁和app設計師來說，語音交互可能是自觸屏時代以來最大的UX挑戰了。
  • APP界面設計之頁面布局的22條基本原則
    移動APP頁面布局(Layout)是我們設計app界面的時候，最主要的設計任務。一個app的好與不好，很大部分取決於移動APP頁面布局的合理性。下圖為APP最原始的布局模型。移動APP經典布局界面欣賞，以首頁為例展示：頁面布局顧名思義就是對頁面的文字、圖形或表格進行排布、設計。優秀的布局，需要對頁面信息進行完整的考慮。即要考慮用戶需求、用戶行為，也要考慮信息發布者的目的、目標。
  • 視聽整合:人機互動界面的新方向
    迄今為止，人機互動界面的發展大致經歷了三個階段：命令行界面（Command-Line Interface，CLI）、圖形用戶界面（Graphical User Interface，GUI）、自然用戶界面（Natural User Interface，NUI）。
  • 如何編輯互動設計說明書
    互動設計說明書的閱讀對象互動設計文檔都是給誰看的？這個文檔會根據閱讀的對象做什麼優化嗎？下面利用場景化模擬解釋互動設計說明文檔的使用場景。互動設計說明書由互動設計師完成編輯、修訂、發布。互動設計師提交互動設計說明書給產品經理。互動設計師提交互動設計說明書給 UI 設計師。
  • B端UI界面交互基礎組件:會話框
    導語：在前一篇文章《B端UI界面交互基礎組件-表單》中，一起學習了B端「表單」組件UI設計規範，其中包括「基礎表單」、「全頁表單」；並從表單組件的需求場景、內容布局以及交互方式等方面對以上組件進行了詳盡的規範描述；今天我們繼續介紹了B端「會話框」組件的交互規範。一、基礎會話框1.
  • 我理解中的互動設計與淺談對蘋果產品的人機互動與其設計哲學的感受
    1.1最初的認識首先對於互動設計這門學科來說我承認在一開始我接觸他的時候，他並不像其他的例如環藝、視傳那樣容易理解，在最開始我對它的理解也只停留在界面中的一些動效的設計，現在回想起來實在是淺顯。下面將對互動設計的目標進行細分分析。
  • 人機互動簡述,一起來了解人機互動的世界!
    一、HCI綜述HCI（WIKI）是一門研究系統和用戶之間交互的學問。系統可以是各種各樣的不同的機器，也可以是計算機化的系統和軟體。人機互動界面通常是指用戶可見的部分。用戶通過人機互動界面與系統交流，並進行操作。通俗的講就是研究各種通過交互系統、交互體驗的學科。Physical的交互界面比如收音機的播放按鍵，virtual的界面比如網站、app界面。
  • 全能NM/UE/UI互動設計專業13.0
    >輸出設計規範能力項目對接能力學習效果：學會可從事金融、電商、智能家居、旅遊、新聞、醫療、機器人等行業工作學習結果：課程包括Ipad、iwatch、人工智慧界面設計數據分析設計AR增強現實界面應用智能車載系統智能電視畫面對應就業點職位：產品UI設計師運營UI設計師技術UI設計師2