首頁

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

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

 

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

簡單和易用性

簡單和易用是所有軟件的基本原則,但在iPhone應(yīng)用程序中它們尤其重要。iPhone OS用戶很可能在使用您的應(yīng)用程序的同時,還做著其他事情。如果用戶無法快速明白如何使用您的應(yīng)用程序,他們很可能會轉(zhuǎn)而使用其他競爭者的應(yīng)用程序,而且不會再嘗試您的應(yīng)用程序。

當(dāng)您設(shè)計(jì)應(yīng)用程序流程以及用戶界面時,請遵循如下準(zhǔn)則以保證應(yīng)用程序的簡單且易于使用:

  • 如何使用您的應(yīng)用程序應(yīng)顯而易見。

  • 常見的功能和信息集中于屏幕的頂部。

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

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

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

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

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

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

支持所有方位

優(yōu)秀iPad程序的其中一個重要因素是可以在所有方位上運(yùn)行。豎向的大屏幕可以滿足用戶瀏覽內(nèi)容的需求(當(dāng)豎屏幕較小時,用戶就會將屏幕旋轉(zhuǎn)為橫屏幕,這樣一行就可以顯示較多的文 字)。用戶不太會注意最小設(shè)備結(jié)構(gòu)(minimaldevice frame;使用iPhone時,用戶單手握住手機(jī)時,屏幕多為豎向顯示;而雙手使用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的方位時,如重點(diǎn)顯示的內(nèi)容發(fā)生變化,用戶會感覺對程序失去控制。

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

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

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

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

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

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

為每個顯示方 位各提供一個啟動圖片。比如提供1004×768和748×1024的圖片來滿足兩個方位的顯示要求。

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

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

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

增強(qiáng)交互

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

例如讀書程序中容許用戶閱讀時如能保留路徑會提升閱讀體驗(yàn),不需要跳轉(zhuǎn)到另外一個頁面而是使用氣泡框來變更 路徑。程序可以讓用戶在文本中增加書簽和注釋,幫助用戶交換書目或者對比閱讀進(jìn)度。

信息扁平化

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

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

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

屏幕

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

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

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

分辨率種類(不完全統(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的觸摸和手勢允許開發(fā)者以新的方式接受用戶輸入

輸入

類型

概述

氣泡( Bubble

觸摸

觸摸并按住不動。在可單

擊元素上彈出信息氣泡

輕滑( Flick

觸摸

觸摸并滑動。滾動頁面

輕滑,兩個手指

手勢

使用兩個手指觸摸并滑動。

滾動可滾動元素

掐捏

手勢

移動兩個手指??s小或放大

輕擊

觸摸

單擊。選擇

輕擊,兩次

觸摸

雙擊。放大列

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

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

 

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

 

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

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

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

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

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

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

 

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

FreeCSSTemplates.Org

free CSS templates org

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

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

 

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

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

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

日歷

鏈接

個人資料

存檔