【干貨】App交互規(guī)范

APP設(shè)計(jì)規(guī)范指對APP界面進(jìn)行風(fēng)格統(tǒng)一竟贯,對界面元素的樣式锌杀、顏色和大小設(shè)定統(tǒng)一的規(guī)范和使用原則甩栈。與設(shè)計(jì)、前端約定好統(tǒng)一的設(shè)計(jì)規(guī)范很重要糕再,約定設(shè)計(jì)規(guī)范可以減少產(chǎn)品量没、設(shè)計(jì)、前端的溝通成本突想;可以使界面設(shè)計(jì)整潔殴蹄、統(tǒng)一究抓,減少界面元素的重復(fù)設(shè)計(jì);可以減少設(shè)計(jì)素材袭灯,控制安裝包的大小刺下。


APP設(shè)計(jì)規(guī)范主要包括對界面布局、背景色稽荧、字體顏色大小橘茉、界面元素間距、彈層蛤克、loading捺癞、圖標(biāo)、按鈕常態(tài)點(diǎn)擊態(tài)等進(jìn)行統(tǒng)一的梳理和規(guī)范构挤。

一髓介、頁面布局規(guī)范

頁面布局

頁面布局和交互規(guī)范上建議安卓、ios盡量統(tǒng)一筋现,這樣可以避免安卓和ios分別設(shè)計(jì)一套稿子唐础。當(dāng)然土豪公司可以忽略這個(gè)建議,安卓和ios分別做專門的設(shè)計(jì)當(dāng)然更好矾飞。在中小型項(xiàng)目來看一膨,設(shè)計(jì)資源緊張的話可以考慮安卓和ios用同一個(gè)稿子,分別做相應(yīng)的微調(diào)后輸出適用安卓和ios不同的尺寸要求就可以洒沦。

推薦使用mac矢量設(shè)計(jì)工具"sketch"豹绪。以ios平臺(tái)的iPhone5的尺寸640*1136px作為標(biāo)準(zhǔn)尺寸設(shè)計(jì)。在界面設(shè)計(jì)完成后可以做相應(yīng)的微調(diào)導(dǎo)出適用ios和安卓尺寸的稿子申眼。這里可以首先統(tǒng)一設(shè)計(jì)稿輸出規(guī)范:

o安卓(720*1280px):界面預(yù)覽圖瞒津、界面坐標(biāo)圖、標(biāo)準(zhǔn)界面的圖標(biāo)png文件

oIOS(640*1136px):界面預(yù)覽圖括尸、界面坐標(biāo)圖巷蚪、1-3倍圖矢量圖標(biāo)pdf文件

PS:界面坐標(biāo)圖指在設(shè)計(jì)已定稿的界面預(yù)覽圖上標(biāo)注:界面元素的間距、文字的顏色濒翻、文字的字號(hào)大小屁柏、圖標(biāo)的尺寸、按鈕不同狀態(tài)顏色有送、按鈕的尺寸等等


界面坐標(biāo)圖實(shí)例


二淌喻、標(biāo)準(zhǔn)色規(guī)范

標(biāo)準(zhǔn)色規(guī)范:重要、一般雀摘、弱似嗤。標(biāo)準(zhǔn)色重要:重要顏色中一般不超過3種,這里的例子重要顏色之一紅色需要小面積使用,用于特別需要強(qiáng)調(diào)和突出的文字届宠、按鈕和icon烁落;而黑色用于重要級(jí)文字信息比如標(biāo)題乘粒、正文等。標(biāo)準(zhǔn)色一般:都是相近的顏色伤塌,而且要比重要顏色弱灯萍,普遍用于普通級(jí)信息、引導(dǎo)詞比如提示性文案或者次要的文字信息每聪。標(biāo)準(zhǔn)色較弱:普遍用于背景色和不需要顯眼的邊角信息旦棉。

標(biāo)準(zhǔn)色實(shí)例


三、標(biāo)準(zhǔn)字規(guī)范


標(biāo)準(zhǔn)字規(guī)范

文字是APP主要信息的表現(xiàn)药薯,尤其新聞閱讀绑洛、社區(qū)APP等制定標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)范和良好的排版方式,用戶使用APP也覺得毫無疲勞感童本,這一點(diǎn)很重要真屯。標(biāo)準(zhǔn)字規(guī)范重要、一般穷娱、弱绑蔫。這里主要規(guī)范標(biāo)準(zhǔn)字的大小,標(biāo)準(zhǔn)字要注意跟上文的標(biāo)準(zhǔn)色進(jìn)行組合突出APP重要的信息和弱化次要的信息泵额。標(biāo)準(zhǔn)字重要:大字號(hào)普遍用于大標(biāo)題配深、top導(dǎo)航,較小字號(hào)用在分割模塊的標(biāo)題上嫁盲。標(biāo)準(zhǔn)字一般:主要用在大多數(shù)文字篓叶,比如正文。標(biāo)準(zhǔn)字弱:普遍與標(biāo)準(zhǔn)色較弱組合用于輔助性文字如一些次要的文案說明羞秤。


標(biāo)準(zhǔn)字實(shí)例


四澜共、界面元素間距


界面元素間距

APP界面要給人簡潔整齊,條理清晰感锥腻,依靠的就是界面元素的排版和間距設(shè)計(jì)。這里間距設(shè)計(jì)還要注意考慮適配不同的屏幕分辨率母谎。一般解決方案有據(jù)屏幕等比放大縮小間距瘦黑,或者固定某些界面元素的間距,讓其他空間留空拉伸奇唤。為了滿足屏幕分辨率較大的設(shè)備幸斥,有時(shí)甚至需要改變APP界面的頁面布局。


微信iPad版vs微信iPhone版


五咬扇、彈層規(guī)范


彈層規(guī)范


彈層規(guī)范要注意分別設(shè)計(jì)安卓和ios的彈層甲葬,比如ios大多操作彈層由底部彈出,而安卓直接顯示操作再頁面中央懈贺,這樣的交互搞作應(yīng)該遵循各自平臺(tái)的設(shè)計(jì)要求经窖。彈層需求根據(jù)不同的功用設(shè)計(jì)不同的樣式坡垫。比如操作性彈層-右上角更多按鈕觸發(fā);提示性彈層:弱提示性的應(yīng)用系統(tǒng)的token飄字提示即可画侣;需要強(qiáng)提示可以使用取消冰悠、確定的模塊彈層姑躲;更強(qiáng)提示而且彈層需要承載一定操作的使用強(qiáng)引導(dǎo)彈層俯画,右上角提供關(guān)閉操作或者可以點(diǎn)擊非彈層區(qū)域關(guān)閉彈層。

六敦冬、Loading規(guī)范

Loading規(guī)范

頁面loading動(dòng)畫是APP界面必不可少的元素搬泥,增加loading可以給用戶明確的反饋功能正在加載桑寨,減少用戶在等待功能響應(yīng)引起的煩躁感。另外loading動(dòng)畫除了常規(guī)的菊花還可以考慮使用npc忿檩,讓APP更生動(dòng)尉尾、活潑;或者使用logo口號(hào)加強(qiáng)APP的品牌形象休溶。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末代赁,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子兽掰,更是在濱河造成了極大的恐慌芭碍,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件孽尽,死亡現(xiàn)場離奇詭異窖壕,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)杉女,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進(jìn)店門瞻讽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人熏挎,你說我怎么就攤上這事速勇。” “怎么了坎拐?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵烦磁,是天一觀的道長。 經(jīng)常有香客問我哼勇,道長都伪,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任积担,我火速辦了婚禮陨晶,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘帝璧。我一直安慰自己先誉,他們只是感情好湿刽,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著谆膳,像睡著了一般叭爱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上漱病,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天买雾,我揣著相機(jī)與錄音,去河邊找鬼杨帽。 笑死漓穿,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的注盈。 我是一名探鬼主播晃危,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼老客!你這毒婦竟也來了僚饭?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤胧砰,失蹤者是張志新(化名)和其女友劉穎鳍鸵,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體尉间,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡偿乖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了哲嘲。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贪薪。...
    茶點(diǎn)故事閱讀 38,605評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖眠副,靈堂內(nèi)的尸體忽然破棺而出画切,到底是詐尸還是另有隱情,我是刑警寧澤囱怕,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布霍弹,位于F島的核電站,受9級(jí)特大地震影響光涂,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜拧烦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一忘闻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧恋博,春花似錦齐佳、人聲如沸私恬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽本鸣。三九已至,卻和暖如春硅蹦,著一層夾襖步出監(jiān)牢的瞬間荣德,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工童芹, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留涮瞻,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓假褪,卻偏偏與公主長得像署咽,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子生音,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,745評論 25 707
  • 在上篇《APP界面設(shè)計(jì)風(fēng)格》確定下來后宁否,產(chǎn)品經(jīng)理(兼交互設(shè)計(jì))還不用著急將所有的交互稿扔給設(shè)計(jì)師進(jìn)行細(xì)致的界面設(shè)計(jì)...
    不懂馮先生閱讀 1,665評論 1 20
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件缀遍、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,059評論 4 62
  • 雪花注定會(huì)遇見太陽慕匠,這是她一生的宿命。 雪是至柔的水瑟由,也是至尖的刃絮重。 Yuki的朋友們說她總是有一個(gè)自己的世界,一...
    凌雪懿閱讀 152評論 0 1
  • 女神節(jié)快樂! 給你們的寄語! 相逢是首詩 無論你笑還是在猜測 如果他人是我們的碎片 我們理應(yīng)仔細(xì)端詳每一個(gè)擦肩之人...
    Fatehpal昱閱讀 435評論 2 4