GOGOGO免费完整国语版_GOGOGO手机高清在线观看_GOGOGO免费完整国语_GOGOGO高清完整版_GOGOGO免费高清在线完整版_GOGOGO免费高清完整版

400-611-9921

當(dāng)前位置:首頁(yè) > 新聞資訊 > 建站知識(shí)
移動(dòng)端交互/視覺(jué)設(shè)計(jì)的一些技巧

2016-09-01

2718

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

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

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

單一色相-藍(lán)色配色組合。

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

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

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

  投影描述元素之間的相對(duì)關(guān)系
  一些常見(jiàn)的應(yīng)用中分層設(shè)計(jì)頁(yè)面有以下這些元素:
  - 懸浮按鈕:這種形式的按鈕用于正向操作。一個(gè)圓形圖標(biāo)很明顯得懸浮在頁(yè)面上。

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

  - 導(dǎo)航置頂:在用戶(hù)與頁(yè)面交互過(guò)程中,簡(jiǎn)化的菜單入口應(yīng)當(dāng)始終保留在屏幕中(譯者注:現(xiàn)在也有很多沉浸式體驗(yàn)的APP會(huì)隱藏導(dǎo)航,但當(dāng)我們進(jìn)行上滑等逆向操作時(shí),導(dǎo)航會(huì)立刻復(fù)現(xiàn),如AppSo)。

  固定位置的導(dǎo)航,

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

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

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

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

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


本文來(lái)自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天科技

標(biāo)簽:移動(dòng)網(wǎng)站建設(shè),高端網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),手機(jī)建站

免費(fèi)咨詢(xún)熱線(xiàn)

400-611-9921

020-29860991

聯(lián)系方式

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

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢(xún)
官方微信
微信咨詢(xún)
在線(xiàn)咨詢(xún)
TOP

立即與縱天項(xiàng)目顧問(wèn)通話(huà)

400-611-9921

您也可以咨詢(xún)我們的在線(xiàn)客服或預(yù)約資深顧問(wèn)

信息保護(hù)中,請(qǐng)放心填寫(xiě)
關(guān)閉
免費(fèi)獲取方案
余庆县| 苍南县| 密山市| 壶关县| 长寿区| 通州区| 墨玉县| 象山县| 枣阳市| 阳春市| 石嘴山市| 阳春市| 阳西县| 太白县| 石柱| 彰武县| 龙口市| 古丈县| 大英县| 南川市| 民丰县| 阿克苏市| 新平| 确山县| 宁波市| 开原市| 叶城县| 四子王旗| 仙游县| 湟源县| 双流县| 清流县| 车险| 毕节市| 土默特左旗| 白朗县| 怀化市| 昌都县| 基隆市| 乐都县| 南木林县|