移動(dòng)客戶端ui設(shè)計(jì)指南陌上

一 前為何需要制定UI為設(shè)計(jì)人員提供交互和視覺設(shè)計(jì)的標(biāo)準(zhǔn)和控件。使其能夠利用設(shè)計(jì)指南快速、方便的加入新的功能，并保持與原有產(chǎn)品的交互、視覺的統(tǒng)一性，在產(chǎn)品內(nèi)部形成統(tǒng)一的用戶體驗(yàn)。當(dāng)然，該規(guī)范最多的應(yīng)用于HiBox皮膚的設(shè)計(jì)。GUI設(shè)計(jì)人員可以通過該指南快速的了解產(chǎn)品界面結(jié)構(gòu)和設(shè)計(jì)原則，并且通過查閱指南的相應(yīng)章節(jié)，了解控件的尺寸和設(shè)計(jì)要求。規(guī)范迭代的視覺升級(jí)。建立可持續(xù)的設(shè)計(jì)思路。使設(shè)計(jì)思路空間和時(shí)間的維保持面向大眾的產(chǎn)品形象的高度一致性，品牌化產(chǎn)品。產(chǎn)品形象是產(chǎn)品大眾時(shí)個(gè)性的視聽印象。規(guī)范化、一致性的產(chǎn)品形象，有助于增強(qiáng)用戶的品牌忠實(shí)性和認(rèn)可度。UI設(shè)計(jì)基本原UI即UserInterface(用戶界面)的簡(jiǎn)稱。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。按照工作內(nèi)容可以分為UE(用戶研究),HCI（交互設(shè)計(jì)），用戶界面設(shè)計(jì)的兩大基本原則：一致性；可用性關(guān)于UI的知識(shí)，有很多相關(guān)書籍可以查閱，網(wǎng)絡(luò)上也有相應(yīng)的版本。總結(jié)起來(lái)就是UCD（以用戶為中心）的設(shè)計(jì)思路。下面摘錄《GUI設(shè)計(jì)2.0》中 一基本原則：1：關(guān)注用戶及其任務(wù)，而不是技2：首先考慮功能，然后才是形3:與用戶對(duì)任務(wù)的看法保持4：設(shè)計(jì)要符合常見情5：不要分散用戶對(duì)他們目標(biāo)的注6：易于7：傳遞信息，而不僅僅是數(shù)8：設(shè)計(jì)應(yīng)滿足相應(yīng)需9：通過用戶測(cè)試發(fā)現(xiàn)錯(cuò)誤并修二 人機(jī)界面的基本知緊湊的屏幕尺OS設(shè)備屏幕的尺寸是480x 4是960x640人機(jī)界面準(zhǔn)則：創(chuàng)建優(yōu)秀的用戶界優(yōu)秀的用戶界面應(yīng)該遵循一些人機(jī)界面設(shè)計(jì)準(zhǔn)則，這些準(zhǔn)則來(lái)源于人—也即 隱盡可能按照現(xiàn)實(shí)世界中的對(duì)象和操作來(lái)對(duì)您程序中的對(duì)象和操作建模。這能夠幫助用戶，尤其是新手，迅速地理解您的應(yīng)用程序的是如何工作的。文件夾就是一個(gè)典型的軟件隱喻。因?yàn)樵诂F(xiàn)實(shí)世界中，人們將文件放在文件夾里，所以人們就能夠迅速地理解在計(jì)算機(jī)上將數(shù)據(jù)放入文件夾的概念。OS中的隱喻包括iPod控件，點(diǎn)擊控件來(lái)觸發(fā)事件，滑動(dòng)開關(guān)，以及雖然隱喻暗示了 OS用戶界面中對(duì)象和操作的含義，但是并沒有限制其軟件實(shí)現(xiàn)?；氐轿募A的例子，軟件實(shí)現(xiàn)的文件夾對(duì)象所具有的容量與現(xiàn)實(shí)世界中所對(duì)應(yīng)的文件夾的物理容量毫無(wú)關(guān)系。直觀直觀操作意為人們感到他們?cè)谖锢砩?，而非抽象地控制某物。其?yōu)點(diǎn)在于，用戶更容易理解他們的行為對(duì)于操作對(duì)象所產(chǎn)生的結(jié)果。得益于多點(diǎn)觸摸的用戶界面， OS用戶享有高度直觀的操控感。手勢(shì)的用讓人們感到屏幕上顯示的對(duì)象具有更大的親和力和更強(qiáng)的操控感，因?yàn)樗麄儾⒉恍枰萌魏沃虚g設(shè)備（如鼠標(biāo)）就操控它們。為了提高您 應(yīng)用程序的操控感，您應(yīng)確保當(dāng)用戶操作屏幕上的對(duì)象時(shí)，這些對(duì)象保持可用戶操作的結(jié)果是一目了然即看應(yīng)用程序比人更記住一些選項(xiàng)，命令，數(shù)據(jù)等。通過列表的形式來(lái)提供選擇或選項(xiàng)，用戶可以輕松地瀏覽它們并作出選擇。盡量減少文本輸入的需要，使得用戶就不必花費(fèi)大量時(shí)間輸入命令，您的程序也不需要執(zhí)行大量的錯(cuò)誤檢查。讓用戶做出選擇，而不是要求他們進(jìn)行開放式的輸入，這樣能夠讓用戶能夠集中精力通過您的程序完成任務(wù)，而不是疲于如何操作。反用戶除了需要看到操作的結(jié)果外，還需要得到操作及時(shí)的反饋，以及在長(zhǎng)時(shí)間操作時(shí)的狀態(tài)報(bào)告。您的程序應(yīng)通過一些視覺上的變化來(lái)回應(yīng)用戶的每一個(gè)操作。例如，當(dāng)用戶點(diǎn)擊列表項(xiàng)時(shí)，確保其高亮顯示。聲音提示同樣有效，但是它不能作為主要或唯一的反饋機(jī)制。因?yàn)槿藗兛赡茉跓o(wú)法聽見聲音或是必須關(guān)閉聲音的環(huán)境中使用 精細(xì)且有意義的動(dòng)畫是向用戶提供反饋的良好方式。動(dòng)畫貫穿于整 ，即使是在非沉浸式的程序中。作為一種提供反饋的方式，動(dòng)畫只是用于增強(qiáng)用戶的體驗(yàn)，但不是用戶體驗(yàn)的焦點(diǎn)。用戶讓用戶來(lái)觸發(fā)和控制操作，而不是您的應(yīng)用程序。保持操作簡(jiǎn)單直接，使得用戶可以輕松地理解和并記住他們。盡可能使用用戶已經(jīng)熟悉的標(biāo)準(zhǔn)控件和行為。在操作開始前應(yīng)提供充分的取消操作的機(jī)會(huì)，并且確保在用戶觸發(fā)潛在的破壞性操作時(shí)取得操作確認(rèn)。盡可能使用戶能夠正常終止正在進(jìn)行的操作。美學(xué)完整雖然一個(gè)程序的首要目的是為了完成某個(gè)任務(wù)，即使該任務(wù)僅僅是玩游戲，我們也不應(yīng)低估程序外觀的重要性。這是因?yàn)橥庥^對(duì)功能有深遠(yuǎn)的影響：一個(gè)看起來(lái)零亂或者缺乏邏輯的程序是很難被理解和使用的。美學(xué)上的完整性并不是用來(lái)衡量您的程序有多漂亮，而是衡量您程序的外觀和程序功能結(jié)合得有多好。例如，一個(gè)效率型應(yīng)用程序（HiBox屬于效率型應(yīng)用程序）應(yīng)盡量精簡(jiǎn)裝飾性的元素并置于背景中，同時(shí)使用標(biāo)準(zhǔn)控件和行為以突出任務(wù)。簡(jiǎn)單和易簡(jiǎn)單和易用是所有軟件的基本原如果用戶無(wú)法快速明白如何使用您的應(yīng)用程序，他們很可能會(huì)轉(zhuǎn)而使用其他競(jìng)爭(zhēng)者的應(yīng)用程序，而且不會(huì)再嘗試您的應(yīng)用程序。當(dāng)您設(shè)計(jì)應(yīng)用程序流程以及用戶界面時(shí)，請(qǐng)遵循如下準(zhǔn)則以保證應(yīng)用程序的簡(jiǎn)單且易于使用：如何使用您的應(yīng)用程序應(yīng)顯而易常見的功能和信息集中于屏幕的頂部最大限度地減少文本輸簡(jiǎn)潔地表達(dá)基本信息為所有可點(diǎn)擊元素提供一個(gè)指尖大小的目標(biāo)區(qū)域?qū)⒅攸c(diǎn)放在主要功能上有效地溝適當(dāng)?shù)闹С质謪?應(yīng)用程序編程指南三 基本交互原操作點(diǎn)擊控件的尺寸分為visualsize（視覺大小）和targetsize(觸控大visual target 在寬度上并左右擴(kuò)展了這樣做是為了提高按鈕響應(yīng)的靈敏最小點(diǎn)擊區(qū)域?yàn)闃?biāo)準(zhǔn)點(diǎn)擊區(qū)域?yàn)橐曈X大小為觸控大小的60%-p。 mm數(shù)值是固px數(shù)值會(huì)隨屏幕分辨率和尺寸改操作手勢(shì)OS有一套標(biāo)準(zhǔn)的手勢(shì)規(guī)范。這是基本的選用依據(jù)。另外，HiBox客戶端目前使用了單擊、滑動(dòng)、長(zhǎng)按的操作。出于一致性的考慮，在選擇手勢(shì)操作的時(shí)候請(qǐng)遵循該手勢(shì)操作在HiBox客戶端的應(yīng)用場(chǎng)景和規(guī)范。標(biāo)準(zhǔn) Double縮?。ㄈ绻呀?jīng)被放大的話PinchPinchTouchand手勢(shì)應(yīng)用Tap(點(diǎn)擊)操作是最常用的操作，表示：按下或者選擇一個(gè)項(xiàng)目或條目（類似鼠標(biāo)的點(diǎn)擊）Drag(拖動(dòng))在HiBox中的應(yīng)用模向下拖動(dòng)刷新，顯 內(nèi)容。如：會(huì)話、會(huì)話歷史記TouchandTouchandhold(長(zhǎng)按)： OS中長(zhǎng)按會(huì)出現(xiàn)編輯（或粘貼板）菜單在HiBox中我們調(diào)整了這個(gè)”長(zhǎng)按“的交互模型（這是被允許的 Swipe(滑動(dòng))：在HiBox中的應(yīng)用模、Pinchopen/PinchPinchopen/Pinchclose(放大/縮小)：在HiBox中的應(yīng)用在相冊(cè)的相冊(cè)詳情頁(yè)：使用Pinchopen/Pinchclose(放大/縮小)相、為確保您的應(yīng)用程序易于使用，盡量使用常見的手勢(shì)，如點(diǎn)擊，拖拽等。您應(yīng)該避免將諸如swipe或pinhopen等不常見的手勢(shì)作為執(zhí)行一個(gè)動(dòng)作的唯一方法。您的應(yīng)用程序應(yīng)該有一個(gè)簡(jiǎn)單直接的方法來(lái)執(zhí)行一個(gè)動(dòng)作，即使它意味著多點(diǎn)擊幾次。在大多數(shù)應(yīng)用程序中，避免定義新的手勢(shì)，特別是這些新手