手機網(wǎng)站設(shè)計的用戶體驗準則！

手機網(wǎng)站設(shè)計的第一印象是至關(guān)重要的關(guān)系。

人們的信任和誠信，他們希望隨后的遭遇反映并強化他們的第一印象。同樣的原則也適用于品牌及其產(chǎn)品。手機網(wǎng)站設(shè)計與最終用戶建立持久的關(guān)系中起著重要的作用，因此，在支持品牌的承諾。

用戶希望移動服務(wù)相關(guān)的和用戶友好的和有良好表現(xiàn)。的介質(zhì)的限制，但是，對設(shè)計產(chǎn)品，以滿足所有這些期望的重大挑戰(zhàn)。雖然常常被低估，性能是一個值得信賴的移動用戶體驗的關(guān)鍵因素。因此，在設(shè)計過程中，應(yīng)考慮的主要驅(qū)動。

在這篇文章中，我們將討論有關(guān)的性能設(shè)計和現(xiàn)時的七準則，可以幫助相關(guān)性能的外形設(shè)計決定的，而會計的最終用戶和企業(yè)的需求。這些準則是根據(jù)本地移動應(yīng)用程序設(shè)計的廣泛的產(chǎn)品組合，并在多個移動平臺上的經(jīng)驗。

對于手機的性能

人們用自己的手機，以提高生產(chǎn)效率，舒適性和樂趣，無處不在，隨時等待公交車，走在人行道上，檢查他們的火車從哪個平臺。移動應(yīng)用程序需要關(guān)注的核心工具，他們需要快速和可靠的，是有價值的，在這些環(huán)境中。

奇怪的是，我們已經(jīng)注意到，許多手機設(shè)計周期首先開始與美感的要求：“它看起來太神奇了！”當然，驚人的視覺效果，吸引客戶一個良好的第一印象。然而，一個長期持久的關(guān)系取決于每一個相遇的質(zhì)量，也嚴重影響了應(yīng)用程序如何執(zhí)行。的應(yīng)用程序看起來驚人，但表現(xiàn)不佳，可能會損壞完整性。用戶很快發(fā)現(xiàn)很慢或有可能打破的軟件（無論是因為停機，死機等），這影響了使用和品牌的認知度。用戶希望應(yīng)用程序和響應(yīng)速度。如果它不是，它會得到不好的評價，低收視率和低采用數(shù)字。

在Twitter的應(yīng)用程序是不一樣的視覺效果豐富，Cookmate的（這是驚人的），但Twitter的應(yīng)用程序在App Store中的評論要好得多。

性能支持品牌差異化

遇到的每一個產(chǎn)品影響了品牌的認知度。用戶正在尋找最好的工具來提高他們的生活。為了吸引一個重要的用戶群中的一道風景，它已成為人口較稠密的每一天，一個移動應(yīng)用程序中脫穎而出。它應(yīng)該做的事情，沒有其他的應(yīng)用程序，或做比別人做的更好。這些好處強化品牌。因為性能是用戶體驗的一個重要因素，它直接有助于差異化的品牌。以這一步：在技術(shù)上具有挑戰(zhàn)性的功能順利執(zhí)行，將賦予產(chǎn)品獨特的賣點，這將是很難模仿的。

一個很好的例子是Flickr的iPhone應(yīng)用程序。Flickr的國家在其網(wǎng)站上，它有兩個主要目標是：幫助人們做出自己的照片，并啟用新的方式來組織照片和視頻。你猜怎么著？這正是它的應(yīng)用程序，從而實現(xiàn)其品牌的承諾。

Flickr的優(yōu)化所接觸的主要品牌做了很好的工作。

所以，當規(guī)劃一個應(yīng)用程序，它是，值得分析市場，并試圖回答兩個問題。（1）應(yīng)該做些什么不同于其競爭對手嗎？（2）應(yīng)該比競爭對手做的更好嗎？然后，把你的設(shè)計和開發(fā)工作產(chǎn)生的前三個目標。

一個關(guān)鍵的設(shè)計練習

任何形式的手工藝產(chǎn)品，需要升值的方式建立。建立良好的設(shè)計和工程學科已認識到這一點很長一段時間。汽車的設(shè)計會影響其空氣動力學。一個美麗搶眼的橋梁，以應(yīng)付風流量和它下面的。這同樣適用于交互式移動服務(wù)。設(shè)計選擇影響功能，內(nèi)容，互動性，圖形，因此性能。

我們注意到幾個產(chǎn)品團隊的性能被認為完全是開發(fā)商的責任，因此，在設(shè)計過程中，它被認為是為時已晚。但以評估其可行性，在創(chuàng)作的過程中需要考慮的發(fā)展。應(yīng)用下面的七個準則，并考慮相關(guān)因素，為移動用戶界面（請參閱下一節(jié)）前面，將有助于設(shè)計討論的主題包括性能。實現(xiàn)一個高性能的體驗不只是一個編碼練習。這是一個關(guān)鍵的設(shè)計工作。

在鹿特丹的Erasmus橋，荷蘭。

移動設(shè)備用戶界面性能的相關(guān)因素，

手機網(wǎng)站設(shè)計感知的性能的基礎(chǔ)上的啟動時間，頁面加載行為，平滑的過渡和動畫，錯誤，和等待時間。下圖說明了以下因素：“應(yīng)用程序”（與圖形，互動，內(nèi)容，功能和代碼）運行在一個“移動”設(shè)備具備一定的技術(shù)能力（CPU，屏幕尺寸等）和平臺（Android的， iOS上，等等）。在許多情況下，應(yīng)用程序連接的“網(wǎng)絡(luò)”一套覆蓋范圍和標準（LTE，3G，2G），“后端”。在上面的兩個因素嚴重影響了設(shè)計的決定，開發(fā)團隊。底部的兩個因素是需要考慮的約束。

影響性能的因素。

每個因素的決定將影響性能。任意組合，增強（例如高級的視覺效果）或限制（如網(wǎng)絡(luò)覆蓋差）可能會增加復雜性。例如，正在加載的內(nèi)容從后端除了通過速度較慢的網(wǎng)絡(luò)，以先進的圖形是一個組合的因素，會降低性能。

七準則

在過去的四年中，在移動平臺上的景觀發(fā)生翻天覆地的變化。出現(xiàn)新的UI范例，屏幕和處理器，先進的臺式電腦，和輸入機制已被徹底改變。

在這些轉(zhuǎn)變的限制，設(shè)計師應(yīng)該總是試圖創(chuàng)建的外觀和感覺，是先進的，令人難忘的和高性能的。這不只是一個問題，減少圖像的大小。在不同的設(shè)計水平和設(shè)計過程中作出的決定將有顯著的影響。讓我們來看看在7個指導方針，已經(jīng)被證明是有用的工具，在所有的設(shè)計水平，以實現(xiàn)高性能的移動用戶體驗。

1。定義UI的品牌特征

每一個與用戶交互的應(yīng)用程序應(yīng)該反映的品牌故事，要提高認識，忠誠度和滿意度。確定哪些元素最有助于該品牌的形象是必不可少的。例如功能，視覺效果，措辭，字體和動畫。我們的設(shè)計團隊在許多不同的產(chǎn)品，不同的產(chǎn)品團隊。這很容易導致幾個類似的用戶界面元素的設(shè)計和實施的變化。定義的核心構(gòu)建模塊，鼓勵重用，阻礙重塑，因此，優(yōu)化設(shè)計和實施的一套組件。

一種方法是定義的UI元素，形成了核心組成部分的用戶界面，同時，創(chuàng)建接口的唯一字符。在概念階段，確定這些元素，請執(zhí)行以下操作：

• 區(qū)分應(yīng)用程序（例如，照片觀看功能在“路徑”的應(yīng)用程序）;
• 代表主要功能（例如商店，簽出功能）;
• 設(shè)置圖案的設(shè)計語言（例如，頭在下面的截圖）。

Windows Phone 7的Metro UI的字體，布局和互動可以建立一個獨特的設(shè)計DNA是一個很好的例子。

核心的標志性元素是最敏感的。一遍又一遍，他們將被用戶所看到的，在不同的產(chǎn)品功能將被重用。通過這組元素的設(shè)計和實施集中，每個優(yōu)化還清多次。

2。聚焦產(chǎn)品組合

無論是公司希望迅速推出一款產(chǎn)品，或開發(fā)出的產(chǎn)品組合（即多個產(chǎn)品在一個平臺上，同樣的產(chǎn)品在多個平臺上，或兩者兼有），或如果面對有限的時間和資源，必須作出艱難的選擇。這些產(chǎn)品在投資組合中，最重要的，應(yīng)該有針對性的設(shè)計和優(yōu)化的努力。的設(shè)計優(yōu)先級矩陣可以幫助我們了解設(shè)計的努力將會獲得回報最。

設(shè)計的優(yōu)先級矩陣的例子。

對焦的設(shè)計工作，有助于優(yōu)化性能中最有價值的領(lǐng)域。例如，如果您的預(yù)期客戶使用Android手機，而競爭對手也以他們?yōu)槟繕耍度肓烁嗟脑O(shè)計工作，以創(chuàng)造一個優(yōu)雅的和快速的Android應(yīng)用程序比將你的努力，同樣在所有平臺上會更有價值。

3。確定核心用戶故事

我們的團隊都面臨著幾個項目啟動，其中的平衡要求的功能是漫長的，重點不突出，也不可能在要求的時限內(nèi)建立的初步名單。當做夢了什么是應(yīng)該做的，企業(yè)往往忽視的一個事實，即客戶尋找解決方案，幫助他們有非常特殊的需要。

例如，一個主要的購物目標（除了應(yīng)酬，靈感等）來尋找并購買的產(chǎn)品。無論是在一個小城市，在倫敦的牛津街（Oxford Street），或在互聯(lián)網(wǎng)上，它是關(guān)于尋找和購買你要找的。豐富的經(jīng)驗可以使購物更有趣的，但是其核心目標 - 尋找和購買 - 永遠不會丟失。這同樣適用于設(shè)計的購物應(yīng)用程序（無論是游戲，音樂，優(yōu)惠券）。用戶需要能夠快速查找和購買，不管任何其他功能，豐富的整體體驗。

下圖說明了兩個設(shè)計在商店里的產(chǎn)品詳細信息頁。左邊的屏幕擁有先進的購物功能，如贈與，相關(guān)的產(chǎn)品和詳細的評論。屏幕右側(cè)更側(cè)重于采購。屏幕右邊將優(yōu)化公司的故事，和球隊不會分心，設(shè)計和實施端功能。只有當基本的核心功能進行了優(yōu)化，可以豐富功能，只要它們不妨礙核心的用戶故事。

2種購買屏幕。

在產(chǎn)品定義的過程中，應(yīng)確定核心用戶故事，以專注的設(shè)計和開發(fā)工作。

4。優(yōu)化UI的流量和元素

用戶不喜歡等待。（谷歌提出“?每毫秒的時間?“的第二個原則，它的用戶體驗。）優(yōu)化單獨的屏幕，流量和用戶界面元素將減少等待時間，讓用戶以為他們是在浪費他們的時間。

A.加快感知的性能
，設(shè)計人員無法控制性能的時間。網(wǎng)絡(luò)可能是緩慢的設(shè)備可能會在后臺運行其他任務(wù)，某些操作可能需要大量的計算。如果用戶至少覺察到，他們沒有失去的時間，然后應(yīng)用程序會了堅實的印象。設(shè)計可以幫助溝通，甚至在發(fā)生意外延誤。

第一步是識別將可能有延遲（獲取后端數(shù)據(jù)，執(zhí)行的特定計算，等）的流量。第二個步驟是通過引入額外的步驟，他們會認為是必要的（顯示加載動畫，顯示有用的提示等），以指導用戶通過這些延遲。

下面的一組圖片顯示了可能的步驟，內(nèi)容搜索：

這里的用戶體驗的四個步驟：

1. 點擊“搜索”按鈕。
2. 看到一個加載動畫。
3. 看到列表中的第一部分，與文字內(nèi)容和占位符的圖像（它可以被存儲在應(yīng)用程序本身）。
4. 看到實際的縮略圖出現(xiàn)。

的用戶體驗簡單的步驟，而不是直接從一到四步跳，等感覺到進步，而不是延遲。

另一個例子是，當應(yīng)用程序啟動時加載。顯示應(yīng)用程序的布局相匹配的圖片，用戶，應(yīng)用程序加載更迅速地得到的印象。下面的截圖說明了這一點，然而，可以加快感知性能，更在空白處添加一個簡單的進度通知的第一個畫面。這將避免的東西是等待要加載的印象。（在連接速度很慢的情況下，應(yīng)用程序不會顯示加載的通知，因此用戶對于這種情況的通報進展情況）。

Facebook應(yīng)用程序的iPhone加載了。

B.優(yōu)化個人UI元素
的每個UI元素會影響性能。而且，因為每一個優(yōu)化整體性能，所有的UI元素應(yīng)予以考慮?？吹闹饕矫媸牵?/p>

• 在屏幕上的元素
  的數(shù)量和類型的UI元素在屏幕上，該屏幕會影響性能。例如，媒體（音頻，視頻，地圖等）會影響性能比簡單的元素（靜態(tài)圖像等）。
• 元素特征
  元素的特點，如它的分辨率或圖像深度，會影響繪制時間。例如，在Android上，每個可繪制資源（JPG，PNG）被解碼為位圖格式，所以每一個優(yōu)化的圖像將導致更少的千字節(jié)為單位。你能減少顏色的深淺嗎？或者降低分辨率？
• 技法
  繪制的應(yīng)用程序的UI元素的方式影響屏幕時間。例如，被繪制在屏幕的整個背景，即使在大的不透明圖像被放置在它上面？背景可以被分解成小的瓷磚，以減少需要上傳的大??？

5。定義UI縮放規(guī)則

建筑最吸引人的設(shè)計，就像是瀏覽的地形與許多障礙。這是一個持續(xù)的功能性，美觀性，可用性和性能之間的平衡。有些平臺需要比別人更多的UI妥協(xié)。不管是什么平臺的限制，該品牌的關(guān)鍵簽名應(yīng)維持不變。

一個的UI縮放工具包可以幫助通信的UI元素的相對重要性。有些元素是至關(guān)重要的，并有助于強烈的品牌的身份，同時去除其他的影響較小。我們的團隊已經(jīng)建立了如下幾類：

• 要點
  要點是品牌的核心UI簽名（準則）。例如，應(yīng)用程序的標頭。
• 替代品
  的替代品是最優(yōu)的，但良好的高端解決方案，把一個低性能的負擔。一個例子是取代透明與不透明的元素。
• 選項
  這些元素，增強了經(jīng)驗，但可能會被刪除，以維持性能。例如，減少的列表的搜索結(jié)果頁面上的從25項到第10。

1。的要點（頭）。
2。的替代品（不透明的而不是透明的）
3。選項（減少列表的長度）。

6。使用性能儀表板

清除團隊間的溝通，為客戶提供一個偉大的產(chǎn)品是非常重要的。我們期望的產(chǎn)品應(yīng)該如何執(zhí)行不同的市場營銷人員，設(shè)計人員和開發(fā)人員遇到的幾種情況。因為所有這些學科的要求和限制的性能會受到影響，需要商定的業(yè)績預(yù)期。作為一個解決方案，我們引入了績效儀表盤。這些幫助來衡量，監(jiān)測和設(shè)置目標產(chǎn)品的當前狀態(tài)。儀表板有效地傳達產(chǎn)品的狀態(tài)和球隊的期望和重點領(lǐng)域。儀表盤，我們使用的帳戶為以下元素：

• 核心用戶故事
  的儀表盤確保通信的用戶體驗。
• 基準
  應(yīng)用程序的主要競爭對手的比較。
• 電流測量
  顯示產(chǎn)品的當前執(zhí)行的性能。
• 目標
  設(shè)置應(yīng)用程序的性能目標。
• Status（狀態(tài)）
  指示對目標的應(yīng)用程序的當前狀態(tài)。

的性能儀表盤的例子。（單位為秒。良好的3G連接。）

有幾個工具可以幫助你測量性能。你可以這樣做主觀上，通過手動記錄的時間為特定的任務(wù)，或客觀上，與TraceView的Android SDK（如果你正在開發(fā)本機應(yīng)用程序）的工具，如。

7。冠軍專用UI工程技能

設(shè)計一向走了手的手與技術(shù)。能編寫高性能的用戶體驗，是一家專業(yè)的技能。前端的編碼需要強大的知識和深刻的理解，設(shè)計的目的。

布局，圖形，動畫等的實施，將有性能的影響。需要考慮的事情很多，這里有兩個：

• 智能負載
  智能加載機制，如延遲加載，負載可見的內(nèi)容，然后繼續(xù)前進內(nèi)容下方倍。這種技術(shù)減少了用戶的等待時間，從而使一個流暢的體驗。
• 背景加載，
  這是另一個著名的例子。性能依賴的背景是否是一個大的圖像，合并小磚（例如，創(chuàng)建一個紋理）或純算法。最好的解決方法視情況而定。

在營銷，設(shè)計和開發(fā)團隊之間的分裂情況下的責任，我們已經(jīng)注意到，UI性能趨于下降之間的縫隙。每個球隊都有自己的目標，和某些共同的責任，如UI表現(xiàn)，失去關(guān)注。我們的設(shè)計團隊，包括前端的編碼專家已經(jīng)解決了這個問題。這將鼓勵重點放在優(yōu)化UI實現(xiàn)和性能，實現(xiàn)更高級的用戶體驗。

結(jié)論

我們已經(jīng)討論了手機網(wǎng)站設(shè)計7個指導方針，地址的移動應(yīng)用程序設(shè)計的各個方面表現(xiàn)相對。設(shè)計的選擇會影響性能，因此性能在設(shè)計過程中應(yīng)考慮的一個關(guān)鍵因素。不幸的是，它往往要查找的過程中，結(jié)束了極大地損害了用戶體驗為時已晚。

我們已經(jīng)成功地介紹了這些準則劃分為多個產(chǎn)品流，這反過來又提高了這些產(chǎn)品的性能和培育各支車隊對這個問題的認識。這有助于轉(zhuǎn)移的初始請求“它看起來驚人的”，“有驚人的外觀，感覺和工作！”

本文作者來自創(chuàng)新互聯(lián)，轉(zhuǎn)載請注明出處：創(chuàng)新互聯(lián)（muchs.cn）

選擇北京網(wǎng)站建設(shè)公司-創(chuàng)新互聯(lián)，優(yōu)質(zhì)服務(wù)，絕對不容錯過 ！

新聞名稱：手機網(wǎng)站設(shè)計的用戶體驗準則！
本文地址：http://muchs.cn/news/80154.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有用戶體驗、網(wǎng)站設(shè)計等

廣告

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