Android 界面原型設(shè)計(jì)

本節(jié)引言：

引用錘子科技視覺設(shè)計(jì)總監(jiān)——羅子雄在重慶TEDx活動上說的一小段話：

每當(dāng)我們看到一些美妙的設(shè)計(jì)的時(shí)候，很多人心里面會有一種沖動，這種沖動會讓你們想去創(chuàng)造一些 新的東西，創(chuàng)造一些美妙的事物。

我們常說用戶體驗(yàn)用戶體驗(yàn)，用戶使用你的軟件，第一個(gè)會接觸的是什么？沒錯，圖形化界面(GUI)，簡稱UI，對于用戶而言，最直觀，給用戶留下第一印像的是往往是程序的界面，而非功能！人，總喜歡美的東西，對吧？ 假如一樣的功能，決定用戶取向的，往往是UI！精美的UI！當(dāng)然還有一些貼心的人性化操作等！ 下圖兩個(gè)計(jì)算機(jī)的App界面：

我們先不說功能，從UI上講，你喜歡哪個(gè)？ 由此，一個(gè)產(chǎn)品的UI是非常重要的，而產(chǎn)品的界面原型設(shè)計(jì)一般是由公司的產(chǎn)品經(jīng)理+美工來完成的，需求分析 ->界面原型設(shè)計(jì) ->我們來寫代碼！可能你覺得界面原型對我們而言并不沒什么作用，但假如你以后想自己開發(fā)App呢？又或者你升做產(chǎn)品經(jīng)理呢？嘿嘿！世事無絕對，以后的事，誰知道呢？公司的話，大部分使用的都是Axure Rp，但是這個(gè)東西比較難用！除了這個(gè)以外還有其他很多的原型設(shè)計(jì)工具：

• Pencil
• Framer
• Shireframe
• UIDesigner
• Balsamiq Mockups
• Mockup Builder
• Mockup
• FrameBox
• iPhone Mockup
• GOOFLOW
• WireframeSketcher
• FluidIA
• Indigo Studio
• Origami
• Quartz Composer
• Justproto
• Avocado
• PaintCode
• Mockplus(摩客)
• 墨刀等....

筆者使用過的是兩個(gè)國產(chǎn)的界面原型設(shè)計(jì)工具，他們分別是：Mockplus(摩客)和墨刀 本文會簡要的介紹下Mockplus的用法！

Mockplus原型工具的使用：

有網(wǎng)頁版以及客戶端版供你選擇：Mockplus官網(wǎng)

Step 1：注冊一個(gè)你自己的賬號，然后新建文件進(jìn)入編輯界面！(時(shí)間關(guān)系，這里筆者直接試用) 然后彈出一個(gè)原型風(fēng)格的對話框給我們選擇：素描跟線條！

筆者選擇線條：

我們要做的就是從左邊的組件欄中啦控件到手機(jī)界面上，當(dāng)然，我們可以雙擊某個(gè)控件，自定義我們 的樣式，比如顏色，背景圖片等！

Step 2：交互實(shí)現(xiàn)： 界面原型除了界面外，肯定是少不了交互的，這里我們做一個(gè)簡單的新聞應(yīng)用的交互例子給大家體驗(yàn)下： 我們在其中一個(gè)新聞類別中添加跳轉(zhuǎn)鏈接，

接著我們可以點(diǎn)擊右上角的播放按鈕：

接下來我們就可以看具體的交互了，PS:這里可能是網(wǎng)頁版的問題，有些圖片顯示不出來！ 

好了，大概的用法就這些，大家可以自己摸索摸索，另外，如果生成文檔是要升級為付費(fèi)用戶的哦！一個(gè)月6元不貴，就一個(gè)早餐錢，當(dāng)然如果是自己玩玩而已就沒必要開了！

Android自帶DroidDraw工具設(shè)計(jì)Android界面：

其實(shí)Android也給我們提供了一個(gè)"老掉牙"的界面設(shè)計(jì)工具，跟上面這些高大上的界面原型工具相比，差幾十條街，可以理解成一個(gè)分離的ADT，比ADT高級一點(diǎn)的功能就是自動生成代碼...對于很少接觸原型設(shè)計(jì)的朋友來說，花1，2分鐘就可以掌握這個(gè)工具，還是比較值得！

工具界面：

圖示已經(jīng)寫明相關(guān)的操作了,很簡單,實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn),自己下來試試吧!!

軟件下載：droiddrawr.jar

本節(jié)小結(jié)：

本節(jié)給大家介紹了下界面原型設(shè)計(jì)的概念，輕量級Mockplus(摩客)的簡單實(shí)用，以及Android自帶的DroidDraw工具，內(nèi)容比較簡單，還需大家自行實(shí)踐理解！