DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 手機界面設計:讓APP簡約而不簡單
手機界面設計:讓APP簡約而不簡單
編輯:關於網頁技巧     

想要APP好用,就要往裡不停塞東西,這似乎已經成了一種“常識”。結果往往是,一坨,慘不忍睹,你懂的。應該抱怨麼?不應該。因為這其實也是設計師最該做的事兒,在一堆限制條件的重壓下找到創新的解決方案。這裡總結了一些比較可行的方法,和大家分享。

 

一、以用戶需求為出發點

這似乎已經是別說爛的一句話。之所以覺得還有提的必要,是因為這才是創新的源泉和交互設計師的安身立命之本,同時也在實際中面臨著很大的困難。PM老大們都忙著塞滿feature list,一封郵件扔過來,說,我要這個。Deadline一個接一個,不停的要Rush新版本,哪有空去思考用戶是個什麼ABC呢?但是,只要一天不把用戶納入到設計流程,就永遠淪為產品經理的“控件對齊師”。

可行的突破點在哪兒呢?在於和產品經理交接時理清用戶需求,在於敏捷地收集用戶的想法。

在產品提交feature list的時候,應該把它先扔在一邊,然後和產品先理清一件事兒,能否用一句話概括一下這個產品是為了幫助用戶達成什麼目的?搞清楚這個,才能弄明白用戶是帶著什麼需求來到這個界面上的,一個個功能點是如何為用戶服務的。

接下來要做的就是調查一下用戶以往是怎麼滿足這些需求的,那些功能和信息更重要,更常用到。什麼?沒有用研團隊?沒有時間做用研?不會做用研?其實只要你在用研的道路上稍微邁出一小步,就能收獲頗豐。你周圍有同事吧?吃中飯排隊的時候前後都是人吧?排隊要很久吧?坐公交坐班車旁邊有陌生人吧?一些簡單的問題,問上三四個人,就比你憑空猜想,閉門造車好的多,也會收獲一些顛覆性的結果。問題來了,如果做完調查發現,原本你心愛的功能點用戶一點都不關注,你割捨得了麼?自己戰勝自己才是最艱難的。

有了對真實用戶的了解,就能知道這個APP到底要幫用戶達成什麼目標,一句話,講明白它。然後就好辦了,把你要加上去的元素在腦子裡先過一遍。但凡3秒內想不到它如何為用戶的需求服務,殺無赦。有點用但是不太常用的,就藏得深一點;常用的,重要的,就拿到外面來。Goal is always one step away。

似乎在天朝,一提創新,大家就會匪夷所思的會心一笑。但那是我們什麼都不懂,都在疲於奔命的照搬國外成功玩意兒的時代。但是,我能抄,你能抄,他就不能抄麼?終究是要做本土化,做自主創新的。騰訊廣研的張小龍先生說的話很在理:“QQ郵箱是個保守的團隊,我們不提倡大家為了創新而創新,而是應該想到用戶還需要什麼東西或功能,才能用起來更順暢開心。解決這些問題後,才會反過來發現,哦,原來這是一個創新。

 

 

二、每一個View都和用戶的某個目標相對應

一個APP包含的信息往往是海量的。一股腦兒全部堆出來,再好的排版也理不清楚。所以在做信息加工,拆分信息元素的時候,應該以用戶目標為拆分依據。

工具型的APP,要把任務拆分成工作流。每一個步驟的view,是為了幫用戶達成什麼目標。這樣一列,該放什麼,該怎麼放,全都清清爽爽。

信息型的APP,要為特定的需求去設計信息展示的范圍和版式。每個View,都是要幫助用戶做出判斷,找到他最渴求的信息。

 

三、體貼入微的追蹤用戶需求的動態變化

在使用APP的過程中,用戶的需求是在不停的變的。每一次操作(甚至於只是時間流逝不做操作)都挾帶著用戶的意圖信息,暗示著需求的變化。設計師應該體貼地捕捉到這些變化,調整展示的元素。把已經失效的元素砍掉,釋放寶貴的空間,展示用戶當前最需要的元素。

 

四、一個元素擔當多種功能

想要做的功能越來越多,需要擺在屏幕上的東西也是水漲船高。這是難逃的厄運麼?其實還可以考慮利用現有的元素去承載新的功能。重新審視現有的元素,拆分成碎零件,看看哪個比較合適。這才是設計師應該做的工作呀,如何優雅地解決難題。蘋果就是這麼去折騰他們的Home鍵的

 

五、利用無形的手勢操作

智能機時代交互的手段花樣迭出,不要把思路限制在觸碰屏幕上的有形元素。可以pinch in/out來縮放,可以用重力感應器控制平衡球,可以晃手機來換膚,可以翻轉手機來靜音。但是由於無形操作的隱蔽性,需要確保用戶很容易學會手勢與功能的關系,回憶得起來。同時手勢也只能用於次要操作,或者作為常用操作的後補快捷方式。

 

六、減小一切無意義的差異

任何一種差異都是可以攜帶信息的。當元素間的差異對於用戶需求並無意義時,就應考慮干掉它。最簡單的例子莫過於按鈕的寬度不會隨著按鈕上文字的長短變化。在同一個頁面上,按鈕必定要做成等寬的。把界面元素拆分開來,重新審視它們,消除一些無意義的差異。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved