首頁(yè)

iPad 人機(jī)介面規(guī)約:iPad 的核心特性

藍(lán)藍(lán)設(shè)計(jì)的小編

 


iPad 的操作系統(tǒng)是 iOS 3.2,iPad 軟件用到的很多 UIKit 視覺(jué)元素和控件都和 iPhone 軟件一樣。因此,如果你有為 iPhone 開(kāi)發(fā)軟件的經(jīng)驗(yàn)(并且熟悉iPhone 用戶介面規(guī)約 ),對(duì)于開(kāi)發(fā) iPad 軟件會(huì)很有幫助。

iPad 在近似的底層架構(gòu)上引入了一套新的用戶體驗(yàn)系統(tǒng),這套系統(tǒng)和 iPhone 的用戶體驗(yàn)有很大區(qū)別。iPad 的屏幕更大,介面引人入勝且高度互動(dòng),這些特點(diǎn)令你能夠?qū)懗隽硪患?jí)別的軟件。

在開(kāi)發(fā)過(guò)程中,你應(yīng)該認(rèn)真花時(shí)間去吸收和感知 iPad 的用戶體驗(yàn),利用在這一過(guò)程中習(xí)得的知識(shí)設(shè)計(jì)出完全屬于 iPad 的應(yīng)用程序。

iPad 的硬件特點(diǎn)

iPad 的以下特點(diǎn)對(duì)您的軟件的 UI 有很大影響:

一、屏幕大。(分辨率:1024 x 768。)

二、你無(wú)法預(yù)期用戶手持 iPad 時(shí)的朝向(橫版還是豎版,正著還是倒著)。

三、可接外置鍵盤(pán),并用其替代 iPad 自身的軟鍵盤(pán)。

四、可放在底座上用。

為了更好地理解開(kāi)發(fā)環(huán)境,也請(qǐng)注意 iPad 和 iPhone 的如下共同特點(diǎn):

一、內(nèi)存有限。

二、一次只能運(yùn)行一個(gè)軟件。

三、各個(gè)軟件的參數(shù)設(shè)置都可以統(tǒng)一放在 Settings 這個(gè)預(yù)裝的應(yīng)用程序里。

四、用戶可以改變?cè)O(shè)備的朝向。

五、屏幕上的「幫助」內(nèi)容不會(huì)很多,用語(yǔ)也比較簡(jiǎn)單。

六、沒(méi)有「鼠標(biāo)點(diǎn)擊」這個(gè)動(dòng)作,只有手勢(shì)動(dòng)作。

七、既能跑原生軟件,也能跑線上軟件,或是混合型軟件。

八、圖像的比特深度有統(tǒng)一標(biāo)準(zhǔn):24 比特(R、G、B 各 8 比特),外加一條 8 比特的 alpha 通道。基本上,我們推薦您用 PNG 格式。

iphone ui 設(shè)計(jì),幾點(diǎn)基本的設(shè)計(jì)準(zhǔn)則,創(chuàng)建優(yōu)秀的用戶界面

藍(lán)藍(lán)設(shè)計(jì)的小編

藍(lán)注:這幾點(diǎn)iphone的設(shè)計(jì)準(zhǔn)則,應(yīng)用在軟件界面上也同樣適合。

優(yōu)秀的用戶界面應(yīng)該遵循一些人機(jī)界面設(shè)計(jì)準(zhǔn)則,這些準(zhǔn)則來(lái)源于人—也即用戶—思考和工作的方式,而不是設(shè)備的能力。沒(méi)有吸引力的,令人難以理解的或是不合邏輯的用戶界面會(huì)讓一個(gè)原本優(yōu)秀的程序成為垃圾,而漂亮,直觀而又吸引人的用戶界面不僅可以改善程序的功能,還能激發(fā)用戶的正面依賴感。

 

 

即使您已經(jīng)對(duì)基本的設(shè)計(jì)準(zhǔn)則有所了解,這一章也值得您讀一下,因?yàn)楸菊轮刂v述了這些準(zhǔn)則是如何應(yīng)用在iPhone應(yīng)用程序中的。

隱喻

盡可能按照現(xiàn)實(shí)世界中的對(duì)象和操作來(lái)對(duì)您程序中的對(duì)象和操作建模。這能夠幫助用戶,尤其是新手,迅速地理解您的應(yīng)用程序的是如何工作的。文件夾就是一個(gè)典型的軟件隱喻。因?yàn)樵诂F(xiàn)實(shí)世界中,人們將文件放在文件夾里,所以人們就能夠迅速地理解在計(jì)算機(jī)上將數(shù)據(jù)放入文件夾的概念。

iPhone OS中的隱喻包括iPod播放控件,點(diǎn)擊控件來(lái)觸發(fā)事件,滑動(dòng)開(kāi)關(guān),以及調(diào)色板上的數(shù)據(jù)。

雖然隱喻暗示了iPhone OS用戶界面中對(duì)象和操作的含義,但是并沒(méi)有限制其軟件實(shí)現(xiàn)?;氐轿募A的例子,軟件實(shí)現(xiàn)的文件夾對(duì)象所具有的容量與現(xiàn)實(shí)世界中所對(duì)應(yīng)的文件夾的物理容量毫無(wú)關(guān)系。

在您設(shè)計(jì)程序時(shí),需要注意iPhone OS中已存在的隱喻,避免重復(fù)定義。同時(shí),檢查您的程序功能是否有對(duì)應(yīng)的可用的自然隱喻。記住,即使如此,相較于為了適應(yīng)您的應(yīng)用程序用戶界面而勉強(qiáng)使用現(xiàn)實(shí)世界的對(duì)象或操作的隱喻而言,使用標(biāo)準(zhǔn)控件和操作更為妥善。除非您選擇的隱喻能得到大部分用戶的認(rèn)可,包括那些會(huì)增加而不是減少用戶困惑的隱喻。

直觀操作

直觀操作意為人們感到他們?cè)谖锢砩?,而非抽象地控制某物。其?yōu)點(diǎn)在于,用戶更容易理解他們的行為對(duì)于操作對(duì)象所產(chǎn)生的結(jié)果。

得益于多點(diǎn)觸摸的用戶界面,iPhone OS用戶享有高度直觀的操控感。手勢(shì)的使用讓人們感到屏幕上顯示的對(duì)象具有更大的親和力和更強(qiáng)的操控感,因?yàn)樗麄儾⒉恍枰萌魏沃虚g設(shè)備(如鼠標(biāo))就操控它們。

為了提高您的iPhone應(yīng)用程序的操控感,您應(yīng)確保:

  • 當(dāng)用戶操作屏幕上的對(duì)象時(shí),這些對(duì)象保持可見(jiàn)

  • 用戶操作的結(jié)果是一目了然的

優(yōu)秀iPhone應(yīng)用程序的共性

藍(lán)藍(lán)設(shè)計(jì)的小編

 

優(yōu)秀的iPhone應(yīng)用程序地滿足了用戶需求,同時(shí)提供了用戶想要的體驗(yàn)。為了幫助您在應(yīng)用程序中平衡這兩點(diǎn),本小節(jié)歸納了優(yōu)秀iPhone應(yīng)用程序的一些共有特點(diǎn),并就如何將這些特點(diǎn)融合到您的產(chǎn)品中給予了建議。

簡(jiǎn)單和易用性

簡(jiǎn)單和易用是所有軟件的基本原則,但在iPhone應(yīng)用程序中它們尤其重要。iPhone OS用戶很可能在使用您的應(yīng)用程序的同時(shí),還做著其他事情。如果用戶無(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)。

  • 常見(jiàn)的功能和信息集中于屏幕的頂部。

  • 最大限度地減少文本輸入。

  • 簡(jiǎn)潔地表達(dá)基本信息。

  • 為所有可點(diǎn)擊元素提供一個(gè)指尖大小的目標(biāo)區(qū)域。

iPad開(kāi)發(fā)體驗(yàn) 用戶準(zhǔn)則

藍(lán)藍(lán)設(shè)計(jì)的小編

  iPad開(kāi)發(fā) 體驗(yàn) 用戶準(zhǔn)則 是本文要介紹的內(nèi)容,iPad 用戶體驗(yàn)最主要體現(xiàn)在內(nèi)容和交互:淡化程序UI ,以便用戶關(guān)注所需的內(nèi)容。美觀的內(nèi)容形式,富有真實(shí)感。充分利用設(shè)備的性能來(lái)增強(qiáng)內(nèi)容的交互性。

支持所有方位

優(yōu)秀iPad程序的其中一個(gè)重要因素是可以在所有方位上運(yùn)行。豎向的大屏幕可以滿足用戶瀏覽內(nèi)容的需求(當(dāng)豎屏幕較小時(shí),用戶就會(huì)將屏幕旋轉(zhuǎn)為橫屏幕,這樣一行就可以顯示較多的文 字)。用戶不太會(huì)注意最小設(shè)備結(jié)構(gòu)(minimaldevice frame;使用iPhone時(shí),用戶單手握住手機(jī)時(shí),屏幕多為豎向顯示;而雙手使用iPad,屏幕的顯示方位并不能確定)或者h(yuǎn)ome按鍵的位置,他們不認(rèn)為設(shè)備有默認(rèn)方位。這就導(dǎo)致 用戶期望程序可以在當(dāng)前方位上運(yùn)行。所以程序盡量滿足iPad各方位的運(yùn)行要求。

保證以首要內(nèi)容為重點(diǎn)。當(dāng)旋轉(zhuǎn)iPad的方位時(shí),如重點(diǎn)顯示的內(nèi)容發(fā)生變化,用戶會(huì)感覺(jué)對(duì)程序失去控制。

旋轉(zhuǎn)時(shí)如何顯示輔助信息或者功能。盡管能保證上一條,還要考慮如何顯示較為次要的信息。例如郵箱功能中,首要 內(nèi)容時(shí)發(fā)郵件,次要內(nèi)容是聯(lián)系人和收件箱的列表。

橫屏的次要內(nèi)容顯示在左邊的分視圖中

豎屏的次要內(nèi)容顯示在氣泡框中。

再如,橫屏?xí)r,一款游戲以長(zhǎng)方形顯示,當(dāng)旋轉(zhuǎn) 到豎屏?xí)r,需要調(diào)整屏幕上的顯示區(qū)域,游戲顯示邊框的上面或者下面增加顯示空間,用于顯示輔助信息,而不是垂直拉伸顯示區(qū)域來(lái)?yè)螡M整個(gè)屏幕。

避 免布局變化過(guò)大或者無(wú)緣由地改變。所有方位中都顯示相似的UI布局旋轉(zhuǎn)時(shí)盡可能保留信息和文本的原有格式。尤其閱讀文本時(shí),重要的是避 免旋轉(zhuǎn)之后用戶找不到讀到哪兒了。如果非要對(duì)頁(yè)面重新布局,可以使用動(dòng)畫(huà)幫助用戶理解當(dāng)前頁(yè)面的變化。例如,當(dāng)旋轉(zhuǎn)時(shí)要必須增加或者移除文本框時(shí),可以選 擇隱藏動(dòng)作并在新布局中簡(jiǎn)單地淡出。為了有助于合理地設(shè)計(jì)旋轉(zhuǎn)動(dòng)作,可考慮在真實(shí)的生活中是如何和它們交互的。

避免使用 UI 元素或者定義一個(gè)旋轉(zhuǎn)的手勢(shì)來(lái)完成旋轉(zhuǎn)動(dòng)作。應(yīng)該是內(nèi)容隨著iPad的旋轉(zhuǎn)而旋轉(zhuǎn)。

為每個(gè)顯示方 位各提供一個(gè)啟動(dòng)圖片。比如提供1004×768和748×1024的圖片來(lái)滿足兩個(gè)方位的顯示要求。

仔細(xì)考慮程序是否可以在所有方位上運(yùn)行。有些程序只能在橫屏或者豎屏下顯示,此時(shí):

顯示程序?yàn)檎o@示方式,無(wú)論當(dāng)前iPad是什么方位。避免使用UI元素來(lái)告知用戶旋轉(zhuǎn)設(shè)備。支持180度旋轉(zhuǎn)。

可以特殊處理輸入式旋 轉(zhuǎn)動(dòng)作。有些游戲把旋轉(zhuǎn)設(shè)備當(dāng)成操作方式,這時(shí)候橫豎屏切換時(shí),可不改變游戲的顯示方位。

增強(qiáng)交互

最好的iPad程序在用戶執(zhí)行明確的任務(wù)時(shí)提供新穎的交互方式。不要為了填滿整個(gè)大屏幕而增加一些和主要任務(wù)沒(méi)有直接關(guān)聯(lián)的功 能,而是提升程序的用戶體驗(yàn)。

例如讀書(shū)程序中容許用戶閱讀時(shí)如能保留路徑會(huì)提升閱讀體驗(yàn),不需要跳轉(zhuǎn)到另外一個(gè)頁(yè)面而是使用氣泡框來(lái)變更 路徑。程序可以讓用戶在文本中增加書(shū)簽和注釋?zhuān)瑤椭脩艚粨Q書(shū)目或者對(duì)比閱讀進(jìn)度。

信息扁平化

手機(jī)交互設(shè)計(jì)原則

藍(lán)藍(lán)設(shè)計(jì)的小編

在設(shè)計(jì)e指通 客戶端和wap2.0 頁(yè)面時(shí),積累些手機(jī)交互設(shè)計(jì)經(jīng)驗(yàn),不斷總結(jié),理清設(shè)計(jì)思路。以下設(shè)計(jì)總結(jié)出手機(jī)交互設(shè)計(jì)原則,僅供參照。

屏幕

手機(jī)屏幕尺寸分為物理尺寸和顯示分辨率。

  • 物理尺寸是按英寸對(duì)角線計(jì)算。
  • 顯示分辨率指的是屏幕圖像的精密度,是指屏幕所能顯示的像素的多少。
  • 顯示精度是每英寸上可以顯示像素(DPI)。

NOKIA N78的物理尺寸為2.4英寸,顯示分辨率為240*320像素;HTC T7278的物理尺寸為2.8英寸,顯示分辨率為480*640像素。兩款手機(jī)顯示精度不同,同樣100*100像素大小的圖片在這兩款手機(jī)上看到的效果也不同,同樣大小的圖片在HTC T7278看起來(lái)要比NOKIA N78小的多。

分辨率種類(lèi)(不完全統(tǒng)計(jì)):

  1. 128*128  128*160 130*130  176*144  176*220 208*208 208*320  240*160 240*240 240*260
  2. 240*320 240*400 240*432 240*480 320*240 320*

理解iPhone和iPad觸摸式交互

藍(lán)藍(lán)設(shè)計(jì)的小編

 

表1-4 iPhone和iPad的觸摸和手勢(shì)允許開(kāi)發(fā)者以新的方式接受用戶輸入

輸入

類(lèi)型

概述

氣泡( Bubble

觸摸

觸摸并按住不動(dòng)。在可單

擊元素上彈出信息氣泡

輕滑( Flick

觸摸

觸摸并滑動(dòng)。滾動(dòng)頁(yè)面

輕滑,兩個(gè)手指

手勢(shì)

使用兩個(gè)手指觸摸并滑動(dòng)。

滾動(dòng)可滾動(dòng)元素

掐捏

手勢(shì)

移動(dòng)兩個(gè)手指。縮小或放大

輕擊

觸摸

單擊。選擇

輕擊,兩次

觸摸

雙擊。放大列

24個(gè)出色的聯(lián)系表單頁(yè)面設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

 

有的網(wǎng)站沒(méi)有“聯(lián)系我們”頁(yè)面,有些網(wǎng)站只有一個(gè)email超級(jí)連接 ,而且有些網(wǎng)站還將Email地址做成圖片 來(lái)避免垃圾郵件。這些做法都會(huì)掩蓋了聯(lián)系表單的潛力和優(yōu)勢(shì)。

 

接受來(lái)自于你的網(wǎng)站的用戶的反饋、糾正甚至是投訴 是很有用的。

請(qǐng)不要低估聯(lián)系表單的作用,它是每個(gè)網(wǎng)站必備的。

我們收集了24個(gè)聯(lián)系表單頁(yè)面設(shè)計(jì),希望你能喜歡并能從中獲取靈感。

http://www.berttimmermans.com/
24個(gè)出色的聯(lián)系表單頁(yè)面設(shè)計(jì)

國(guó)外三個(gè)免費(fèi)CSS模版下載站點(diǎn)

藍(lán)藍(lán)設(shè)計(jì)的小編

 

做站的朋友經(jīng)常需要到CSS模版,但哪里可以下載到免費(fèi)要好的CSS模版呢?筆者將介紹幾個(gè)網(wǎng)上可以免費(fèi)下載CSS模版的站點(diǎn)。越多的CSS模版,你在設(shè)計(jì)網(wǎng)頁(yè)時(shí)就越容易排版布局,因?yàn)橛懈鄡?yōu)秀的案例讓你攝取精華。你不一定是依葫蘆畫(huà)瓢,你可以根據(jù)自己的實(shí)際情況作適應(yīng)的調(diào)整改動(dòng),如你可能是利用該CSS模版中的字體配色,或者是圖片的樣式或者是表格的樣式等等。

FreeCSSTemplates.Org

free CSS templates org

創(chuàng)意設(shè)計(jì)的方法—無(wú)窮關(guān)聯(lián)法

藍(lán)藍(lán)設(shè)計(jì)的小編

 

這是我根據(jù)頭腦風(fēng)暴的原理延展出來(lái)的一種方法,之所以稱(chēng)它為“無(wú)窮關(guān)聯(lián)法”完全是因?yàn)樗雌饋?lái)很像無(wú)窮大的符號(hào)“∞”。當(dāng)然,從原理上講使用這個(gè)方法可以得出無(wú)窮無(wú)盡的創(chuàng)意設(shè)計(jì)。

在用“絕對(duì)伏特加”這個(gè)案例來(lái)說(shuō)明這個(gè)方法之前,需要先說(shuō)明一下絕對(duì)伏特加的背景:絕對(duì)伏特加 (Absolut Vodka) 是產(chǎn)自瑞典世界十大名酒之一,它的創(chuàng)意設(shè)計(jì)一直走著非功能訴求的道路,主要向消費(fèi)者傳遞感性的東西。

無(wú)窮關(guān)聯(lián)法圖示:

日歷

鏈接

個(gè)人資料

存檔