亚洲国产精品久久精品成人_国产步兵社区视频在线观看_国产不卡免费视频_午夜私人影院免费体验区

400-611-9921

當前位置:首頁 > 新聞資訊 > 建站知識
移動端交互/視覺設計的一些技巧

2016-09-01

2529

回顧近些年來大多數(shù)成功的交互設計,都嚴格遵循著一些基礎準則。他們適應人類的自然行為,悄無聲息得減少干擾,專注于視覺呈現(xiàn)和交互體驗以及其擴展性。一起了解一下這些重要的設計技巧,并且學以致用吧
  有效的排版方式
  應用中的內(nèi)容可以建立用戶和APP之間的精確關系,并且?guī)椭脩暨_成訴求。在這個交互過程中,排版起到了很大的作用。文字大小和布局影響了最終的屏幕閱讀體驗:小的文字、小的行距、留白不夠都會耗費較長的閱讀時間,因此用戶會忽略掉大部分信息。在高亮的小屏手機中尤其明顯。因此,屏幕越小,排版意義就越重大。

  移動端的排版要注意權衡易讀性和空間利用率。選擇一個合適的字體尺寸及留白是設計師最關注的。為了減輕閱讀負擔是內(nèi)容易讀,字體應當足夠大

  簡單的配色方案
  配色是視覺設計中最復雜的部分。簡化配色方案能提高用戶體驗,復雜的配色反而會有一些消極的影響;要拒絕混亂的配色方案!通過調(diào)節(jié)某個色相的明度和飽和度,你就可以得到多種顏色,這種組合也不會讓人覺得有視覺負擔。

單一色相-藍色配色組合。

  PS:自己創(chuàng)造一套配色方案會比較難,但也沒有大多數(shù)人想象得那么復雜。比如將一種亮色添加到另一種中性色調(diào)中就是一種簡單的配色方法。亮色可以簡單且有效地吸引眼球。

  無論你想讓APP頁面承載怎樣的內(nèi)容,你總是希望用戶盡可能多得感知到內(nèi)容?;趦?nèi)容的導航是在概述和詳細內(nèi)容之間進行跳轉的一種設計模式。這種導航通常表現(xiàn)為卡片,卡片在用來組織和擴展信息量較大的內(nèi)容上真是一項偉大的發(fā)明,它使內(nèi)容更容易被識別和理解
  - 卡片將內(nèi)容篩選到有效區(qū)域內(nèi),因此占用了更少的空間。類似于在一篇文章中的類似“句子”“段落”這種文本組合方式,卡片將內(nèi)容篩選并且組合成一條有效信息。
  - 卡片更利于手勢操作,用戶不必費心理解這些內(nèi)容該怎么用,他們潛意識中能理解物理卡片的意義,打開一張卡片來查看更多信息,或者跳過查看其它卡片信息。
  
  PS:應當盡量讓你的UI設計弱化,讓用戶關注內(nèi)容。
  圖層和層次
  PC端和移動屏幕之間最大的不同就是尺寸。移動端網(wǎng)頁和APP的空間比較有限,為了克服這個缺點,越來越多的頁面開始充分利用多個圖層在Z軸上疊加的表現(xiàn)形式。

  分層的設計可以參考google的Material design的規(guī)范,還原在現(xiàn)實生活中人與物體之間的交互。圖層幫助用戶理解設計。面和投影在傳達頁面結構上有重要的意義,通過投影來表現(xiàn)元素和物體不在一個平面之內(nèi)。

  投影描述元素之間的相對關系
  一些常見的應用中分層設計頁面有以下這些元素:
  - 懸浮按鈕:這種形式的按鈕用于正向操作。一個圓形圖標很明顯得懸浮在頁面上。

  - 放大:通常表現(xiàn)在當用戶選擇列表中的某項后,信息會跟蹤到放大的詳情頁面并且可以返回到列表頁。

  - 導航置頂:在用戶與頁面交互過程中,簡化的菜單入口應當始終保留在屏幕中(譯者注:現(xiàn)在也有很多沉浸式體驗的APP會隱藏導航,但當我們進行上滑等逆向操作時,導航會立刻復現(xiàn),如AppSo)。

  固定位置的導航,

  置頂導航
  - 動態(tài)窗口:就像PC端一樣,你可以將一個窗口完全覆蓋在當前頁面之上,以確保用戶能夠注意到,比如登錄、廣告,提醒功能。

  PS:簡化用戶流——確保每個頁面能傳達一件事并且只傳達一件事。
  重復的操作手勢
  電容屏、大屏手機的興起很大程度上改變了人機互動方式。屏幕不僅是閱讀的目標也成為了手勢動作的目標。滑動,點擊和放大是最常用的手勢,已經(jīng)成為類似移動和點擊這樣的本能動作。通過手勢操作可以執(zhí)行返回、查看菜單、調(diào)整當前視圖或刪除類目等功能。
  
  一個應用依賴的手勢操作越多,屏幕上的按鈕越少,可以節(jié)約更多的空間來表現(xiàn)內(nèi)容。這是真正的沉浸式體驗。

  PS:以上提到的都屬于標準手勢。如果你要使用原創(chuàng)的手勢一定要謹慎。在判斷使用手勢(標準或者原創(chuàng))時,心中要謹記一點,手勢都是隱藏的。所以如果沒有視覺提示,用戶可能會疑惑以至于不知道如何使用你的APP。
  實用的動效
  實用的動效其實就是在用戶操作流中插入的一些微妙的動態(tài)效果。它像是你的交互助理:
  - 提供給你視覺反饋

  當用戶通過點擊看到一個動畫反饋時,能馬上明白動作被頁面感知到了。
  - 平緩的狀態(tài)轉換并且讓用戶感知到變化
圖標從一個狀態(tài)變成另一個來標記不同時間的差異狀態(tài)。圖片來源:Material Design
  PS:你可以通過微妙的動態(tài)效果和轉換來提高用戶體驗。但也要慎用動效,并且懷有目的性。不僅僅出于好玩高興這樣的理由,應當專注于能服務用戶的實用的動效。
  小結

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


本文來自廣州品牌網(wǎng)站建設網(wǎng)站設計制作公司-縱天科技

標簽:移動網(wǎng)站建設,高端網(wǎng)站建設,企業(yè)網(wǎng)站建設,手機建站

免費咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F

業(yè)務 QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項目顧問通話

400-611-9921

您也可以咨詢我們的在線客服或預約資深顧問

信息保護中,請放心填寫
關閉
免費獲取方案