回顧近些年來大多數(shù)成功的交互設(shè)計，都嚴(yán)格遵循著一些基礎(chǔ)準(zhǔn)則。他們適應(yīng)人類的自然行為，悄無聲息得減少干擾，專注于視覺呈現(xiàn)和交互體驗以及其擴(kuò)展性。一起了解一下這些重要的設(shè)計技巧，并且學(xué)以致用吧
有效的排版方式
應(yīng)用中的內(nèi)容可以建立用戶和APP之間的精確關(guān)系，并且?guī)椭脩暨_(dá)成訴求。在這個交互過程中，排版起到了很大的作用。文字大小和布局影響了最終的屏幕閱讀體驗：小的文字、小的行距、留白不夠都會耗費(fèi)較長的閱讀時間，因此用戶會忽略掉大部分信息。在高亮的小屏手機(jī)中尤其明顯。因此，屏幕越小，排版意義就越重大。
移動端的排版要注意權(quán)衡易讀性和空間利用率。選擇一個合適的字體尺寸及留白是設(shè)計師最關(guān)注的。為了減輕閱讀負(fù)擔(dān)是內(nèi)容易讀，字體應(yīng)當(dāng)足夠大
簡單的配色方案
配色是視覺設(shè)計中最復(fù)雜的部分。簡化配色方案能提高用戶體驗，復(fù)雜的配色反而會有一些消極的影響；要拒絕混亂的配色方案！通過調(diào)節(jié)某個色相的明度和飽和度，你就可以得到多種顏色，這種組合也不會讓人覺得有視覺負(fù)擔(dān)。
單一色相-藍(lán)色配色組合。
PS：自己創(chuàng)造一套配色方案會比較難，但也沒有大多數(shù)人想象得那么復(fù)雜。比如將一種亮色添加到另一種中性色調(diào)中就是一種簡單的配色方法。亮色可以簡單且有效地吸引眼球。
無論你想讓APP頁面承載怎樣的內(nèi)容，你總是希望用戶盡可能多得感知到內(nèi)容?；趦?nèi)容的導(dǎo)航是在概述和詳細(xì)內(nèi)容之間進(jìn)行跳轉(zhuǎn)的一種設(shè)計模式。這種導(dǎo)航通常表現(xiàn)為卡片，卡片在用來組織和擴(kuò)展信息量較大的內(nèi)容上真是一項偉大的發(fā)明，它使內(nèi)容更容易被識別和理解
- 卡片將內(nèi)容篩選到有效區(qū)域內(nèi)，因此占用了更少的空間。類似于在一篇文章中的類似“句子”“段落”這種文本組合方式，卡片將內(nèi)容篩選并且組合成一條有效信息。
- 卡片更利于手勢操作，用戶不必費(fèi)心理解這些內(nèi)容該怎么用，他們潛意識中能理解物理卡片的意義，打開一張卡片來查看更多信息，或者跳過查看其它卡片信息。
PS:應(yīng)當(dāng)盡量讓你的UI設(shè)計弱化，讓用戶關(guān)注內(nèi)容。
圖層和層次
PC端和移動屏幕之間大的不同就是尺寸。移動端網(wǎng)頁和APP的空間比較有限，為了克服這個缺點(diǎn)，越來越多的頁面開始充分利用多個圖層在Z軸上疊加的表現(xiàn)形式。
分層的設(shè)計可以參考google的Material design的規(guī)范，還原在現(xiàn)實生活中人與物體之間的交互。圖層幫助用戶理解設(shè)計。面和投影在傳達(dá)頁面結(jié)構(gòu)上有重要的意義，通過投影來表現(xiàn)元素和物體不在一個平面之內(nèi)。
投影描述元素之間的相對關(guān)系
一些常見的應(yīng)用中分層設(shè)計頁面有以下這些元素：
- 懸浮按鈕：這種形式的按鈕用于正向操作。一個圓形圖標(biāo)很明顯得懸浮在頁面上。
- 放大：通常表現(xiàn)在當(dāng)用戶選擇列表中的某項后，信息會跟蹤到放大的詳情頁面并且可以返回到列表頁。
- 導(dǎo)航置頂：在用戶與頁面交互過程中，簡化的菜單入口應(yīng)當(dāng)始終保留在屏幕中（譯者注：現(xiàn)在也有很多沉浸式體驗的APP會隱藏導(dǎo)航，但當(dāng)我們進(jìn)行上滑等逆向操作時，導(dǎo)航會立刻復(fù)現(xiàn)，如AppSo）。
固定位置的導(dǎo)航，
置頂導(dǎo)航
- 動態(tài)窗口：就像PC端一樣，你可以將一個窗口完全覆蓋在當(dāng)前頁面之上，以確保用戶能夠注意到，比如登錄、廣告，提醒功能。
PS：簡化用戶流——確保每個頁面能傳達(dá)一件事并且只傳達(dá)一件事。
重復(fù)的操作手勢
電容屏、大屏手機(jī)的興起很大程度上改變了人機(jī)互動方式。屏幕不僅是閱讀的目標(biāo)也成為了手勢動作的目標(biāo)?；瑒樱c(diǎn)擊和放大是最常用的手勢，已經(jīng)成為類似移動和點(diǎn)擊這樣的本能動作。通過手勢操作可以執(zhí)行返回、查看菜單、調(diào)整當(dāng)前視圖或刪除類目等功能。
一個應(yīng)用依賴的手勢操作越多，屏幕上的按鈕越少，可以節(jié)約更多的空間來表現(xiàn)內(nèi)容。這是真正的沉浸式體驗。
PS：以上提到的都屬于標(biāo)準(zhǔn)手勢。如果你要使用原創(chuàng)的手勢一定要謹(jǐn)慎。在判斷使用手勢（標(biāo)準(zhǔn)或者原創(chuàng)）時，心中要謹(jǐn)記一點(diǎn)，手勢都是隱藏的。所以如果沒有視覺提示，用戶可能會疑惑以至于不知道如何使用你的APP。
實用的動效
實用的動效其實就是在用戶操作流中插入的一些微妙的動態(tài)效果。它像是你的交互助理：
- 提供給你視覺反饋
當(dāng)用戶通過點(diǎn)擊看到一個動畫反饋時，能馬上明白動作被頁面感知到了。
- 平緩的狀態(tài)轉(zhuǎn)換并且讓用戶感知到變化
圖標(biāo)從一個狀態(tài)變成另一個來標(biāo)記不同時間的差異狀態(tài)。圖片來源：Material Design
PS：你可以通過微妙的動態(tài)效果和轉(zhuǎn)換來提高用戶體驗。但也要慎用動效，并且懷有目的性。不僅僅出于好玩高興這樣的理由，應(yīng)當(dāng)專注于能服務(wù)用戶的實用的動效。
小結(jié)

UI設(shè)計正朝著 簡化一切不必要的元素而專注功能的方向發(fā)展。干凈的界面，簡單的配色方案以及愉悅的視覺感官使頁面更有現(xiàn)代感也更有易用性。

本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：移動網(wǎng)站建設(shè),高端網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),手機(jī)建站

標(biāo)題名稱：移動端交互/視覺設(shè)計的一些技巧
本文地址：http://m.rwnh.cn/news2/171052.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航、網(wǎng)站建設(shè)、軟件開發(fā)、網(wǎng)站策劃、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)