騰訊遊戲進階設計師!為移動小屏設計的5個絕招

來源:互聯網
上載者:User

 

  編者按:行動裝置現在是網路瀏覽的主力之一,如何在寸金寸土的介面上做好使用者體驗是很多設計師頭疼的問題。今天騰訊遊戲進階設計師結合多年經驗+幾款熱門APP的介面,總結出小屏設計5個實用的招式,UI設計師們趕緊收藏起來吧!

  wayne :1997年,那是一個春天,有一位老人在南海邊畫了一個圈,這個圈就畫在咱大深圳!畫圈的人是小平同志。

  2014年,還是這個春天,行動裝置的普及成為當下互連網發展的又一次變革,我們在各種小螢幕上畫著一個又一個的圈,如今,使用者的移動體驗無意正在變得更好,因為越來越多的網站已經開始為行動裝置做了設計,設計師們也明白什麼更適合小螢幕。然而,在手機上執行任務操作仍然存在著許多障礙。

  親愛的設基師朋友們如果你正在為此困擾,請關注如下招式:

  首先即使是4G下載時間問題依然存在,其次使用者討厭需要大量下載的網站,因為他們需要為此付費,再次即使是經驗豐富的移動使用者他們在通過移動端訪問完整版網站時和普通人也沒什麼區別。這意味著使用者在整個移動體驗中依然有著很高的失敗存在。

  如果從裝置看,目前市場主要行動裝置可分為:功能型手機,智能手機,全屏手機。

  備忘:功能型手機:是準系統都具有,不具有功能擴充或少有擴充的手機,其最大的區別是智能手機。功能手機一般待機時間會長點,較穩定。

  智能型手機:是指像個人電腦一樣,具有獨立的作業系統,獨立的Runspace,可以由使用者自行安裝軟體、遊戲、導航等第三方服務商提供的程式,並可以通過移動通訊網路來實現無線網路接入的這樣一類手機的總稱。

  全屏手機:也可以稱為觸屏手機,最大的特點在於它那超大的螢幕,利用觸控螢幕的技術,將該技術應用到手機螢幕上面的一種智能型手機。是時下最熱門的手機類。

  為了實現更高的使用者效能,應該為每一種行動裝置類型設計不同的體驗:螢幕越小,功能就越少,設計也應該越簡潔。

  如何為小屏做設計?

  為行動裝置設計時,主要注意兩點:

  1.內容和導航是否足夠明顯,使用者不用花費學習成本。

  2.為小螢幕和緩慢的下載速度做設計。

  這兩點詮釋了為什麼所有移動端網站都必鬚根據目標網站的特點製作。

  寸土寸金的空間——移動螢幕是這麼的小,你這麼浪費空間你媽媽知道嗎?

  圖二的顯示方式可以呈現更多的新聞,這才是人們的實際使用。圖一相比更增加了使用者一步操作,雖然好看但華而不實。 為什麼使用者在日常使用中更偏愛普通且有點無趣的設計? 這是因為這樣的設計能讓使用者一眼看到更多內容。

  第二個案例則是成功浪費ipad的螢幕空間,它讓大多數的天氣資訊密集的排布在底部,而將大部分螢幕的空間用一張純粹的圖片做裝飾,這樣的預設設計讓人乏味。

  一個內容兩種呈現多些選擇

  同樣的資料如果有著兩種不同的呈現顯得有點多餘,通常是設計者並不清楚哪個更適合使用者,所以給出兩個方案,讓使用者自己去選擇。為資料使用兩種介面,唯一合理的情況是這兩種資料需要強調本身具有不同的兩個方向。

  美團的介面有列表視圖和地圖視圖,兩種介面能夠讓使用者查看不同的方向,列表包括詳細的資訊內容和價格,而地圖則顯示了餐廳的地理位置。

  在ibook中也同樣的表現了兩種顯示,但你會發現一種介面明顯優於另一種。事實表明,列表介面能讓使用者更加輕鬆的辨認出圖書和作者,或用書名做快速搜尋,列表中按照字母快速排序而書架中的並不是。大量圖書存在情況下,通過圖書封面快速尋找可能性也隨之降底。

  別讓虛擬元素搶了地盤

  所謂虛擬設計項目是指像使用者提供關於螢幕內容的資訊或者操作該內容的命令。這些虛擬元素通常用底層的系統提供。例如PC端他的虛擬元素就是PC的各種指令如工作列,系統托盤區等。而軟體PS工具中的功能表列,工具列等等。

  在移動端使用這些虛擬元素的代價很明顯,他們會佔據空間,而壓縮了內容的地區。

  圖一中你會發現這些虛擬元素,讓有效內容顯得更少,然而也會隨著系統內建的一些元素不斷疊加,經過堆積的虛擬元素通常會佔據一半的螢幕空間。那如果我們將這些元素暫時隱藏其實也是很危險的,因為使用者對看不見的部分通常是忽略的。那該如何是好?!!!

  其實只要你善待他們,他們自然會用更好的姿態回報你:

  1. 考慮將這些虛擬元素設計的更簡單有效

  2. 提供自始至終的一致性,讓使用者記住你這些虛擬操作正在處於隱藏狀態,而他的操作可以不斷重複這樣的模式。

  3. 通過內容的錯落差,上下文提示和漸進式暴露方法降低隱藏帶來的複雜性。

  Path從早期即將菜單做隱藏處理,長期的使用培養了使用者對這個虛擬元素的認知。並且在使用過程中你需要重複這樣的操作。

  閱讀器預設狀態工具隱藏,使用者能通過文字錯落瞭解翻頁,點擊螢幕呼出工具。

  時間都去哪兒——下載時間的秘密

  試想如果你已經把空間都利用的很好了,但等待時間卻很長,使用者可不會原諒你。因此,在為行動裝置設計的時候,將互動流程成本降到最低是關鍵。

  1. 讓操作流程少,所需要下載的介面越少越好。舉個例子,如果內容都已經儲存在手機中,這樣操作並不需要從伺服器下載資訊。

  2. 只載入需要的資訊,即那些對使用者有用的價值資訊。

  3. 不要濫用圖片。圖片越多,下載速度也越慢。(ps:也許這也是為什麼在移動端扁平化盛行的原因之一)

  4. 給使用者提供反饋。比如你的下載進行到什麼樣的一個狀態,需要讓使用者有一個認知,這樣雖然不能完全解決他們中斷操作,但可以稍微緩解一下。

  解決了如上問題是不是就能留住使用者,提高成功率?非也~~

  請看最後一招!

  必須避免過早註冊及高門檻

  行動裝置 App的最重要的原則之一就是避免讓使用者在第一步做註冊。因為初期使用者對這樣的產品並未建立認知和好感,在初期就要求使用者註冊是錯誤的。需要記住的是,使用者在一開始對你的應用投入程度是很低的。除非你真的太牛逼,太受歡迎了,值得他們去註冊。

  下面我們一起來看一下幾個案例:

  圖一中在開始第一步即要求使用者填寫資訊,造成很大流失率,因為初期使用者並未對你的資訊有所認知,你憑什麼要求別人填寫。圖二強迫使用者註冊,你長這樣憑什麼要我註冊?!許多人會就此退出應用,而且從此碰都不碰。這樣你便失去了給別人帶來良好的第一印象。

  上圖所示的案例即為合理的體驗:

  1. 展示使用者需要的資訊

  2. 讓使用者制定自己的訂單

  3. 顯示價格資訊,以及相應訂單時間。

  4. 接受訂單,此時要求填寫註冊等相關資訊,恰到好處。

  在移動端的設計中如果能對以上幾個觀點有所考慮,相信你的移動端設計會是變的更有誠意,其實使用者更多的時候只是希望看到你為他們量身定製的服務。這就好比當年小平同志將深圳劃為改革開放經濟特區,享有經濟特權,如此的有誠意的一個圈造就了今天的深圳。

  感情深不深 酒水一口悶

  誠意足不足 為你做衣服

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。