手機(jī)網(wǎng)站設(shè)計(jì)的第一印象是至關(guān)重要的關(guān)系。
人們的信任和誠(chéng)信，他們希望隨后的遭遇反映并強(qiáng)化他們的第一印象。同樣的原則也適用于品牌及其產(chǎn)品。手機(jī)網(wǎng)站設(shè)計(jì)與最終用戶建立持久的關(guān)系中起著重要的作用，因此，在支持品牌的承諾。
用戶希望移動(dòng)服務(wù)相關(guān)的和用戶友好的和有良好表現(xiàn)。的介質(zhì)的限制，但是，對(duì)設(shè)計(jì)產(chǎn)品，以滿足所有這些期望的重大挑戰(zhàn)。雖然常常被低估，性能是一個(gè)值得信賴的移動(dòng)用戶體驗(yàn)的關(guān)鍵因素。因此，在設(shè)計(jì)過程中，應(yīng)考慮的主要驅(qū)動(dòng)。
在這篇文章中，我們將討論有關(guān)的性能設(shè)計(jì)和現(xiàn)時(shí)的七準(zhǔn)則，可以幫助相關(guān)性能的外形設(shè)計(jì)決定的，而會(huì)計(jì)的最終用戶和企業(yè)的需求。這些準(zhǔn)則是根據(jù)本地移動(dòng)應(yīng)用程序設(shè)計(jì)的廣泛的產(chǎn)品組合，并在多個(gè)移動(dòng)平臺(tái)上的經(jīng)驗(yàn)。
對(duì)于手機(jī)的性能
人們用自己的手機(jī)，以提高生產(chǎn)效率，舒適性和樂趣，無處不在，隨時(shí)等待公交車，走在人行道上，檢查他們的火車從哪個(gè)平臺(tái)。移動(dòng)應(yīng)用程序需要關(guān)注的核心工具，他們需要快速和可靠的，是有價(jià)值的，在這些環(huán)境中。
奇怪的是，我們已經(jīng)注意到，許多手機(jī)設(shè)計(jì)周期首先開始與美感的要求：“它看起來太神奇了！”當(dāng)然，驚人的視覺效果，吸引客戶一個(gè)良好的第一印象。然而，一個(gè)長(zhǎng)期持久的關(guān)系取決于每一個(gè)相遇的質(zhì)量，也嚴(yán)重影響了應(yīng)用程序如何執(zhí)行。的應(yīng)用程序看起來驚人，但表現(xiàn)不佳，可能會(huì)損壞完整性。用戶很快發(fā)現(xiàn)很慢或有可能打破的軟件（無論是因?yàn)橥C(jī)，死機(jī)等），這影響了使用和品牌的認(rèn)知度。用戶希望應(yīng)用程序和響應(yīng)速度。如果它不是，它會(huì)得到不好的評(píng)價(jià)，低收視率和低采用數(shù)字。
在Twitter的應(yīng)用程序是不一樣的視覺效果豐富，Cookmate的（這是驚人的），但Twitter的應(yīng)用程序在App Store中的評(píng)論要好得多。
性能支持品牌差異化
遇到的每一個(gè)產(chǎn)品影響了品牌的認(rèn)知度。用戶正在尋找最好的工具來提高他們的生活。為了吸引一個(gè)重要的用戶群中的一道風(fēng)景，它已成為人口較稠密的每一天，一個(gè)移動(dòng)應(yīng)用程序中脫穎而出。它應(yīng)該做的事情，沒有其他的應(yīng)用程序，或做比別人做的更好。這些好處強(qiáng)化品牌。因?yàn)樾阅苁怯脩趔w驗(yàn)的一個(gè)重要因素，它直接有助于差異化的品牌。以這一步：在技術(shù)上具有挑戰(zhàn)性的功能順利執(zhí)行，將賦予產(chǎn)品獨(dú)特的賣點(diǎn)，這將是很難模仿的。
一個(gè)很好的例子是Flickr的iPhone應(yīng)用程序。Flickr的國(guó)家在其網(wǎng)站上，它有兩個(gè)主要目標(biāo)是：幫助人們做出自己的照片，并啟用新的方式來組織照片和視頻。你猜怎么著？這正是它的應(yīng)用程序，從而實(shí)現(xiàn)其品牌的承諾。
Flickr的優(yōu)化所接觸的主要品牌做了很好的工作。
所以，當(dāng)規(guī)劃一個(gè)應(yīng)用程序，它是，值得分析市場(chǎng)，并試圖回答兩個(gè)問題。（1）應(yīng)該做些什么不同于其競(jìng)爭(zhēng)對(duì)手嗎？（2）應(yīng)該比競(jìng)爭(zhēng)對(duì)手做的更好嗎？然后，把你的設(shè)計(jì)和開發(fā)工作產(chǎn)生的前三個(gè)目標(biāo)。
一個(gè)關(guān)鍵的設(shè)計(jì)練習(xí)
任何形式的手工藝產(chǎn)品，需要升值的方式建立。建立良好的設(shè)計(jì)和工程學(xué)科已認(rèn)識(shí)到這一點(diǎn)很長(zhǎng)一段時(shí)間。汽車的設(shè)計(jì)會(huì)影響其空氣動(dòng)力學(xué)。一個(gè)美麗搶眼的橋梁，以應(yīng)付風(fēng)流量和它下面的。這同樣適用于交互式移動(dòng)服務(wù)。設(shè)計(jì)選擇影響功能，內(nèi)容，互動(dòng)性，圖形，因此性能。
我們注意到幾個(gè)產(chǎn)品團(tuán)隊(duì)的性能被認(rèn)為完全是開發(fā)商的責(zé)任，因此，在設(shè)計(jì)過程中，它被認(rèn)為是為時(shí)已晚。但以評(píng)估其可行性，在創(chuàng)作的過程中需要考慮的發(fā)展。應(yīng)用下面的七個(gè)準(zhǔn)則，并考慮相關(guān)因素，為移動(dòng)用戶界面（請(qǐng)參閱下一節(jié)）前面，將有助于設(shè)計(jì)討論的主題包括性能。實(shí)現(xiàn)一個(gè)高性能的體驗(yàn)不只是一個(gè)編碼練習(xí)。這是一個(gè)關(guān)鍵的設(shè)計(jì)工作。
在鹿特丹的Erasmus橋，荷蘭。
移動(dòng)設(shè)備用戶界面性能的相關(guān)因素，
手機(jī)網(wǎng)站設(shè)計(jì)感知的性能的基礎(chǔ)上的啟動(dòng)時(shí)間，頁面加載行為，平滑的過渡和動(dòng)畫，錯(cuò)誤，和等待時(shí)間。下圖說明了以下因素：“應(yīng)用程序”（與圖形，互動(dòng)，內(nèi)容，功能和代碼）運(yùn)行在一個(gè)“移動(dòng)”設(shè)備具備一定的技術(shù)能力（CPU，屏幕尺寸等）和平臺(tái)（Android的， iOS上，等等）。在許多情況下，應(yīng)用程序連接的“網(wǎng)絡(luò)”一套覆蓋范圍和標(biāo)準(zhǔn)（LTE，3G，2G），“后端”。在上面的兩個(gè)因素嚴(yán)重影響了設(shè)計(jì)的決定，開發(fā)團(tuán)隊(duì)。底部的兩個(gè)因素是需要考慮的約束。
影響性能的因素。
每個(gè)因素的決定將影響性能。任意組合，增強(qiáng)（例如高級(jí)的視覺效果）或限制（如網(wǎng)絡(luò)覆蓋差）可能會(huì)增加復(fù)雜性。例如，正在加載的內(nèi)容從后端除了通過速度較慢的網(wǎng)絡(luò)，以先進(jìn)的圖形是一個(gè)組合的因素，會(huì)降低性能。
七準(zhǔn)則
在過去的四年中，在移動(dòng)平臺(tái)上的景觀發(fā)生翻天覆地的變化。出現(xiàn)新的UI范例，屏幕和處理器，先進(jìn)的臺(tái)式電腦，和輸入機(jī)制已被徹底改變。
在這些轉(zhuǎn)變的限制，設(shè)計(jì)師應(yīng)該總是試圖創(chuàng)建的外觀和感覺，是最先進(jìn)的，令人難忘的和高性能的。這不只是一個(gè)問題，減少圖像的大小。在不同的設(shè)計(jì)水平和設(shè)計(jì)過程中作出的決定將有顯著的影響。讓我們來看看在7個(gè)指導(dǎo)方針，已經(jīng)被證明是有用的工具，在所有的設(shè)計(jì)水平，以實(shí)現(xiàn)高性能的移動(dòng)用戶體驗(yàn)。
1。定義UI的品牌特征
每一個(gè)與用戶交互的應(yīng)用程序應(yīng)該反映的品牌故事，要提高認(rèn)識(shí)，忠誠(chéng)度和滿意度。確定哪些元素最有助于該品牌的形象是必不可少的。例如功能，視覺效果，措辭，字體和動(dòng)畫。我們的設(shè)計(jì)團(tuán)隊(duì)在許多不同的產(chǎn)品，不同的產(chǎn)品團(tuán)隊(duì)。這很容易導(dǎo)致幾個(gè)類似的用戶界面元素的設(shè)計(jì)和實(shí)施的變化。定義的核心構(gòu)建模塊，鼓勵(lì)重用，阻礙重塑，因此，優(yōu)化設(shè)計(jì)和實(shí)施的一套組件。
一種方法是定義的UI元素，形成了核心組成部分的用戶界面，同時(shí)，創(chuàng)建接口的唯一字符。在概念階段，確定這些元素，請(qǐng)執(zhí)行以下操作：
- 區(qū)分應(yīng)用程序（例如，照片觀看功能在“路徑”的應(yīng)用程序）;
- 代表主要功能（例如商店，簽出功能）;
- 設(shè)置圖案的設(shè)計(jì)語言（例如，頭在下面的截圖）。
Windows Phone 7的Metro UI的字體，布局和互動(dòng)可以建立一個(gè)獨(dú)特的設(shè)計(jì)DNA是一個(gè)很好的例子。
核心的標(biāo)志性元素是最敏感的。一遍又一遍，他們將被用戶所看到的，在不同的產(chǎn)品功能將被重用。通過這組元素的設(shè)計(jì)和實(shí)施集中，每個(gè)優(yōu)化還清多次。
2。聚焦產(chǎn)品組合
無論是公司希望迅速推出一款產(chǎn)品，或開發(fā)出的產(chǎn)品組合（即多個(gè)產(chǎn)品在一個(gè)平臺(tái)上，同樣的產(chǎn)品在多個(gè)平臺(tái)上，或兩者兼有），或如果面對(duì)有限的時(shí)間和資源，必須作出艱難的選擇。這些產(chǎn)品在投資組合中，最重要的，應(yīng)該有針對(duì)性的設(shè)計(jì)和優(yōu)化的努力。的設(shè)計(jì)優(yōu)先級(jí)矩陣可以幫助我們了解設(shè)計(jì)的努力將會(huì)獲得回報(bào)最。
設(shè)計(jì)的優(yōu)先級(jí)矩陣的例子。
對(duì)焦的設(shè)計(jì)工作，有助于優(yōu)化性能中最有價(jià)值的領(lǐng)域。例如，如果您的預(yù)期客戶使用Android手機(jī)，而競(jìng)爭(zhēng)對(duì)手也以他們?yōu)槟繕?biāo)，投入了更多的設(shè)計(jì)工作，以創(chuàng)造一個(gè)優(yōu)雅的和快速的Android應(yīng)用程序比將你的努力，同樣在所有平臺(tái)上會(huì)更有價(jià)值。
3。確定核心用戶故事
我們的團(tuán)隊(duì)都面臨著幾個(gè)項(xiàng)目啟動(dòng)，其中的平衡要求的功能是漫長(zhǎng)的，重點(diǎn)不突出，也不可能在要求的時(shí)限內(nèi)建立的初步名單。當(dāng)做夢(mèng)了什么是應(yīng)該做的，企業(yè)往往忽視的一個(gè)事實(shí)，即客戶尋找解決方案，幫助他們有非常特殊的需要。
例如，一個(gè)主要的購(gòu)物目標(biāo)（除了應(yīng)酬，靈感等）來尋找并購(gòu)買的產(chǎn)品。無論是在一個(gè)小城市，在倫敦的牛津街（Oxford Street），或在互聯(lián)網(wǎng)上，它是關(guān)于尋找和購(gòu)買你要找的。豐富的經(jīng)驗(yàn)可以使購(gòu)物更有趣的，但是其核心目標(biāo) - 尋找和購(gòu)買 - 永遠(yuǎn)不會(huì)丟失。這同樣適用于設(shè)計(jì)的購(gòu)物應(yīng)用程序（無論是游戲，音樂，優(yōu)惠券）。用戶需要能夠快速查找和購(gòu)買，不管任何其他功能，豐富的整體體驗(yàn)。
下圖說明了兩個(gè)設(shè)計(jì)在商店里的產(chǎn)品詳細(xì)信息頁。左邊的屏幕擁有先進(jìn)的購(gòu)物功能，如贈(zèng)與，相關(guān)的產(chǎn)品和詳細(xì)的評(píng)論。屏幕右側(cè)更側(cè)重于采購(gòu)。屏幕右邊將優(yōu)化公司的故事，和球隊(duì)不會(huì)分心，設(shè)計(jì)和實(shí)施端功能。只有當(dāng)基本的核心功能進(jìn)行了優(yōu)化，可以豐富功能，只要它們不妨礙核心的用戶故事。
2種購(gòu)買屏幕。
在產(chǎn)品定義的過程中，應(yīng)確定核心用戶故事，以專注的設(shè)計(jì)和開發(fā)工作。
4。優(yōu)化UI的流量和元素
用戶不喜歡等待。（谷歌提出“?每毫秒的時(shí)間?“的第二個(gè)原則，它的用戶體驗(yàn)。）優(yōu)化單獨(dú)的屏幕，流量和用戶界面元素將減少等待時(shí)間，讓用戶以為他們是在浪費(fèi)他們的時(shí)間。
A.加快感知的性能
，設(shè)計(jì)人員無法控制性能的時(shí)間。網(wǎng)絡(luò)可能是緩慢的設(shè)備可能會(huì)在后臺(tái)運(yùn)行其他任務(wù)，某些操作可能需要大量的計(jì)算。如果用戶至少覺察到，他們沒有失去的時(shí)間，然后應(yīng)用程序會(huì)了堅(jiān)實(shí)的印象。設(shè)計(jì)可以幫助溝通，甚至在發(fā)生意外延誤。
第一步是識(shí)別將可能有延遲（獲取后端數(shù)據(jù)，執(zhí)行的特定計(jì)算，等）的流量。第二個(gè)步驟是通過引入額外的步驟，他們會(huì)認(rèn)為是必要的（顯示加載動(dòng)畫，顯示有用的提示等），以指導(dǎo)用戶通過這些延遲。
下面的一組圖片顯示了可能的步驟，內(nèi)容搜索：
這里的用戶體驗(yàn)的四個(gè)步驟：
- 點(diǎn)擊“搜索”按鈕。
- 看到一個(gè)加載動(dòng)畫。
- 看到列表中的第一部分，與文字內(nèi)容和占位符的圖像（它可以被存儲(chǔ)在應(yīng)用程序本身）。
- 看到實(shí)際的縮略圖出現(xiàn)。
的用戶體驗(yàn)簡(jiǎn)單的步驟，而不是直接從一到四步跳，等感覺到進(jìn)步，而不是延遲。
另一個(gè)例子是，當(dāng)應(yīng)用程序啟動(dòng)時(shí)加載。顯示應(yīng)用程序的布局相匹配的圖片，用戶，應(yīng)用程序加載更迅速地得到的印象。下面的截圖說明了這一點(diǎn)，然而，可以加快感知性能，更在空白處添加一個(gè)簡(jiǎn)單的進(jìn)度通知的第一個(gè)畫面。這將避免的東西是等待要加載的印象。（在連接速度很慢的情況下，應(yīng)用程序不會(huì)顯示加載的通知，因此用戶對(duì)于這種情況的通報(bào)進(jìn)展情況）。
Facebook應(yīng)用程序的iPhone加載了。
B.優(yōu)化個(gè)人UI元素
的每個(gè)UI元素會(huì)影響性能。而且，因?yàn)槊恳粋€(gè)優(yōu)化整體性能，所有的UI元素應(yīng)予以考慮?？吹闹饕矫媸牵?/p>
- 在屏幕上的元素
的數(shù)量和類型的UI元素在屏幕上，該屏幕會(huì)影響性能。例如，媒體（音頻，視頻，地圖等）會(huì)影響性能比簡(jiǎn)單的元素（靜態(tài)圖像等）。 - 元素特征
元素的特點(diǎn)，如它的分辨率或圖像深度，會(huì)影響繪制時(shí)間。例如，在Android上，每個(gè)可繪制資源（JPG，PNG）被解碼為位圖格式，所以每一個(gè)優(yōu)化的圖像將導(dǎo)致更少的千字節(jié)為單位。你能減少顏色的深淺嗎？或者降低分辨率？ - 技法
繪制的應(yīng)用程序的UI元素的方式影響屏幕時(shí)間。例如，被繪制在屏幕的整個(gè)背景，即使在大的不透明圖像被放置在它上面？背景可以被分解成小的瓷磚，以減少需要上傳的大??？
5。定義UI縮放規(guī)則
建筑最吸引人的設(shè)計(jì)，就像是瀏覽的地形與許多障礙。這是一個(gè)持續(xù)的功能性，美觀性，可用性和性能之間的平衡。有些平臺(tái)需要比別人更多的UI妥協(xié)。不管是什么平臺(tái)的限制，該品牌的關(guān)鍵簽名應(yīng)維持不變。
一個(gè)的UI縮放工具包可以幫助通信的UI元素的相對(duì)重要性。有些元素是至關(guān)重要的，并有助于強(qiáng)烈的品牌的身份，同時(shí)去除其他的影響較小。我們的團(tuán)隊(duì)已經(jīng)建立了如下幾類：
- 要點(diǎn)
要點(diǎn)是品牌的核心UI簽名（準(zhǔn)則）。例如，應(yīng)用程序的標(biāo)頭。 - 替代品
的替代品是最優(yōu)的，但良好的高端解決方案，把一個(gè)低性能的負(fù)擔(dān)。一個(gè)例子是取代透明與不透明的元素。 - 選項(xiàng)
這些元素，增強(qiáng)了經(jīng)驗(yàn)，但可能會(huì)被刪除，以維持性能。例如，減少的列表的搜索結(jié)果頁面上的從25項(xiàng)到第10。
1。的要點(diǎn)（頭）。
2。的替代品（不透明的而不是透明的）
3。選項(xiàng)（減少列表的長(zhǎng)度）。
6。使用性能儀表板
清除團(tuán)隊(duì)間的溝通，為客戶提供一個(gè)偉大的產(chǎn)品是非常重要的。我們期望的產(chǎn)品應(yīng)該如何執(zhí)行不同的市場(chǎng)營(yíng)銷人員，設(shè)計(jì)人員和開發(fā)人員遇到的幾種情況。因?yàn)樗羞@些學(xué)科的要求和限制的性能會(huì)受到影響，需要商定的業(yè)績(jī)預(yù)期。作為一個(gè)解決方案，我們引入了績(jī)效儀表盤。這些幫助來衡量，監(jiān)測(cè)和設(shè)置目標(biāo)產(chǎn)品的當(dāng)前狀態(tài)。儀表板有效地傳達(dá)產(chǎn)品的狀態(tài)和球隊(duì)的期望和重點(diǎn)領(lǐng)域。儀表盤，我們使用的帳戶為以下元素：
- 核心用戶故事
的儀表盤確保通信的用戶體驗(yàn)。 - 基準(zhǔn)
應(yīng)用程序的主要競(jìng)爭(zhēng)對(duì)手的比較。 - 電流測(cè)量
顯示產(chǎn)品的當(dāng)前執(zhí)行的性能。 - 目標(biāo)
設(shè)置應(yīng)用程序的性能目標(biāo)。 - Status（狀態(tài)）
指示對(duì)目標(biāo)的應(yīng)用程序的當(dāng)前狀態(tài)。
的性能儀表盤的例子。（單位為秒。良好的3G連接。）
有幾個(gè)工具可以幫助你測(cè)量性能。你可以這樣做主觀上，通過手動(dòng)記錄的時(shí)間為特定的任務(wù)，或客觀上，與TraceView的Android SDK（如果你正在開發(fā)本機(jī)應(yīng)用程序）的工具，如。
7。冠軍專用UI工程技能
設(shè)計(jì)一向走了手的手與技術(shù)。能編寫高性能的用戶體驗(yàn)，是一家專業(yè)的技能。前端的編碼需要強(qiáng)大的知識(shí)和深刻的理解，設(shè)計(jì)的目的。
布局，圖形，動(dòng)畫等的實(shí)施，將有性能的影響。需要考慮的事情很多，這里有兩個(gè)：
- 智能負(fù)載
智能加載機(jī)制，如延遲加載，負(fù)載可見的內(nèi)容，然后繼續(xù)前進(jìn)內(nèi)容下方倍。這種技術(shù)減少了用戶的等待時(shí)間，從而使一個(gè)流暢的體驗(yàn)。 - 背景加載，
這是另一個(gè)著名的例子。性能依賴的背景是否是一個(gè)大的圖像，合并小磚（例如，創(chuàng)建一個(gè)紋理）或純算法。最好的解決方法視情況而定。
在營(yíng)銷，設(shè)計(jì)和開發(fā)團(tuán)隊(duì)之間的分裂情況下的責(zé)任，我們已經(jīng)注意到，UI性能趨于下降之間的縫隙。每個(gè)球隊(duì)都有自己的目標(biāo)，和某些共同的責(zé)任，如UI表現(xiàn)，失去關(guān)注。我們的設(shè)計(jì)團(tuán)隊(duì)，包括前端的編碼專家已經(jīng)解決了這個(gè)問題。這將鼓勵(lì)重點(diǎn)放在優(yōu)化UI實(shí)現(xiàn)和性能，實(shí)現(xiàn)更高級(jí)的用戶體驗(yàn)。
結(jié)論
我們已經(jīng)討論了手機(jī)網(wǎng)站設(shè)計(jì)7個(gè)指導(dǎo)方針，地址的移動(dòng)應(yīng)用程序設(shè)計(jì)的各個(gè)方面表現(xiàn)相對(duì)。設(shè)計(jì)的選擇會(huì)影響性能，因此性能在設(shè)計(jì)過程中應(yīng)考慮的一個(gè)關(guān)鍵因素。不幸的是，它往往要查找的過程中，結(jié)束了極大地?fù)p害了用戶體驗(yàn)為時(shí)已晚。
我們已經(jīng)成功地介紹了這些準(zhǔn)則劃分為多個(gè)產(chǎn)品流，這反過來又提高了這些產(chǎn)品的性能和培育各支車隊(duì)對(duì)這個(gè)問題的認(rèn)識(shí)。這有助于轉(zhuǎn)移的初始請(qǐng)求“它看起來驚人的”，“有驚人的外觀，感覺和工作！”
本文作者來自北京傳誠(chéng)信，轉(zhuǎn)載請(qǐng)注明出處：北京傳誠(chéng)信（nainiuapp.com）
選擇北京網(wǎng)站建設(shè)公司-傳誠(chéng)信，優(yōu)質(zhì)服務(wù)，絕對(duì)不容錯(cuò)過 ！
