從設計到iOS 7原型

1 評論 20199 瀏覽 0 收藏 10 分鐘

首先,感謝Meng To。此文僅為中文譯文。原文見文末的鏈接。下面為譯文正文。

一天工作隨筆

上周我與工程師們共同參與了香港AngelHack項目。那是一段美妙的經歷。經過大量研討后,我們定下方案:創建一個簡潔的本地化聊天應用——Ripple。

創建開始

從問題出發:

當我們圍坐在一起,彼此分享工作流程和想法成為一個相當棘手的問題。此前我從未與如此多的工程師一起共事過。很難快速找到一個群聊(group chat)的方法。我們不得不依靠信息工具完成溝通。備選工具:Facebook、Skype和WhatsApp。最后,我們選擇了Facebook。痛苦的經歷以尋找彼此的Facebook賬號和設置群聊開始。Facebook其實很耗經歷,它需要大量現實中的交流。在痛苦的各種延時(瀏覽網站會延時、多任務工作造成的延時以及交流的延時)后我們完成終于了設置。這花費了我們大量的時間。

另外,我們試圖嘗試Skype,但在香港很少有人用它。WhatsApp在香港相當流行,只是它需要你分享你的電話號碼和電郵地址。人們總是會將電郵地址拼寫錯誤。同時對于剛認識的人就將電話號碼分享出來人們還是心存憂慮。這些工具都存在一個共同的問題:對于一個新手,注冊流程過于繁冗。如果你尚未身處社交網絡,你不會感到在自然的交流中被迫注冊。

因此我們計劃創造一個最簡便的注冊流程以及最簡潔的聊天體驗的應用。我們的目的是允許任何人在下載應用后用少于5秒的時間能夠與身邊的人開始聊天。

為iOS 7量身設計

這是我第一次為iOS 7做設計。但是我迅速地為其定位了風格樣式,因為我們將注意力集中在裸色(naked colours)、炫酷的圖標和排版上。我首先為Ripple選擇藍色。然后,我想添加一些深度并選擇配色方案。我下載了一些背景圖片,將他們模糊化,看看他們能否與藍色看起來很和諧。字體方面,設置字體為Museo Sans。圖標方面,我認為PixelLove適合iOS 7的設計語言。

 

iOS 7的設計語言。

我實用Sketch已經近一年了。我欣喜的看到它將我工作效率提高一倍,讓我有更多時間研究動效和功能。最近我將更多的精力放在實際工程方面(后續為大家分享)。最近我使用使用畫板功能的次數越來越多(Sketch的一個功能——譯者注),因為它有預設的iOS屏幕尺寸和圖標尺寸。Sketch的Mirror功能允許我快速查看我的設計在iPhone上面的效果并在屏幕(畫板)間切換。

 

在Sketch中使用畫板導出統一尺寸的文件并為其定位。

注冊頁

我試圖創建最快捷的注冊流程。出于簡潔的考慮,唯一必要的信息是姓名。但是僅有姓名不足以創建有趣的交流。這是我受iOS 7照相功能的啟發。我注意到:當你在不同的圖片格式間切換的時候,圖片將被動態模糊化。這種感性的深度和方向就是我希望在我的設計中所強調的。最終,注冊頁面上呈現出一個以模糊化的照片為背景和前置攝像頭拍的圖片組成的頁面。鍵盤迅速彈出,視覺焦點集中在屏幕姓名(Screen name)上。

畫面立刻集中在啟動的相機照片和動態模糊化的相機照片上

聊天室

啟動應用后,立刻進入由聊天室列表組成的歡迎畫面。這些聊天室由你身邊的人創建。你不必擔心其他人是否已經添加了你。像Airdrop一樣,只是是一個一對多的聯系。如上所述,可能會使用Airdrop的技術快速邀請人們加入聊天室。

聊天頁面

就聊天室本身,我受到iMessage中視差效果和彈跳效果的啟發。這些效果都很有趣。聊天室包含文字內容和照片。照片會迅速提高聊天室的趣味性。此外,我添加了在線用戶的Facebook/Twitter聯系方式的列表。

聊天人的列表呈現中信息的頂部,這樣你在查看列表的同時查看對話信息了。

當你首次快速創建聊天室,你可以很容易的分享你的聯系信息。創建人可以直接此頁面快速編輯聊天室簡介、Twitter、Facebook和WhatsApp聯系方式。

Flinto原型

我在Hackathon(黑客馬拉松)必須向10個人講述Flinto。他們都對此印象深刻。最終它成為了一個比不可少的應用。當我設計了新的頁面,我會將他們立刻上傳到Flinto并創建交互。這對工程師幫助巨大。當他們設計時,就可以測試在手機上的流暢度。從此,應用更劉暢的適應真實的環境,更辯捷的與設計進行比較。

用Flinto5分鐘創建原型。

Flinto原型點擊這里。用iPhone 5/S可得到最佳的體驗。

iOS 7應用

幸運的是我找到了一位熱愛挑戰功能極限的工程師。我經常希望問“我們可以這樣嗎?我們可以那樣嗎?”我喜歡聽到“是的,可以。”通常這是個好兆頭。我接觸大部分iOS工程師根本不想接觸故事版。擁有一個愿意使用故事版的工程師使設計師和開發人員間合作順暢許多。因為故事版令設計師的探索之路變得簡單了許多。這等同于擁有一個懂HTML和CSS的設計師而不是開發者。

Xcode 5故事版。很簡潔。

最后,我們管理并生成許多頗具挑戰性的頁面:注冊頁面和聊天室頁面。我們從Cocoapod的資源庫中調用模糊化的時時拍攝的照片、時差效果和彈跳效果。然后,設置Parse。遺憾的是,由于時間有限,我們沒有使用真實的數據測試demo應用。

“革命尚未成功”

我們沒有在AppHack上將一等獎攬入懷中。好在我們在26個團隊中仍是9強中的一員。考慮到我們之前從未共事過,我們花了5個小時才在理念上達成共識,我們取得的成績已經很OK了。我認為幾乎每個想法看起來都笨笨的,但還是順利的完成了。是我們的執行力幫了大忙。

對于我們團隊這是一次勝利。許多人很喜歡注冊頁面,對其設計上的易用性給予積極評價。一些用戶甚至詢問該應用何時才能發布。這些反饋正是我所期待的。我設計的產品的目的就是為用戶而設計。

我們仍將保持簡化的理念。如果能有人積極的合作,在未來的某天必將有一款簡潔的應用的誕生。

原文鏈接:https://medium.com/@mengto/from-design-to-ios7-prototype-bb582274b93f

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!