Pinkoi App UI Concept Sketches / 設計手稿分享

最近在房間做遲來的春季掃除時,從一疊疊的文件下發現了幾張以為已經去流浪的設計手稿,剛好是前陣子 Pinkoi iOS 改版時重畫的草稿,因為覺得很有趣,決定從其中選幾張比較不鬼畫符的版本跟大家分享,如果你對 Pinkoi 相關設計想法有興趣請參考我之前的舊文章

Recently while I was spring cleaning my room, I found many stray Pinkoi app UI sketches under some tax documents.  They were used for Pinkoi iOS app redesign.  I thought it might be interesting to see how ordinary drawings on pieces of paper could turn into final design so I picked some of them to share here.

Pinkoi_iOS_app_0_mai

我很喜歡畫 UI sketches,而且是會為了確定自己設計想法而一再重畫的類型,即便是在我開始做 Mockup 後也一樣會回頭修改。我不喜歡用鉛筆,所以手稿上會有很多立可白塗塗改改的痕跡,真不好意思;有時候畫在比較厚的紙張上時,我還會幫手稿上色來區分主要/次要動作以及特別功能等,因為能快速整理自己的想法與精準呈現我想表達的重點。

I really enjoyed doing UI sketches and would draw them over and over just to clarify my design thoughts even after I’ve started pushing pixels for them.  I don’t like using pencils so there would be many white-out marks on my sketches.  Sometimes I would use colors combined with interface sketching to distinguish primary/secondary actions, special features, etc because colors help to gain a more precise understanding of the various interface elements and priorities.

#Browse / 瀏覽頁-用 Pinkoi App 逛設計商品時

在決定好要有格狀式 / 條列式二種瀏覽模式後,我把自己想像中的瀏覽頁畫了出來,包括頁面有什麼內容、功能,使用者怎麼瀏覽不同類別下的商品、在哪裡快速切換格狀/條列瀏覽模式等細節。

After deciding on a grid / list view layout, I sketched out what the Browse page should look like as well as how everything should work on this page in detail.

Pinkoi_iOS_app_1_mai

Pinkoi_iOS_app_a

Pinkoi_iOS_app_3_mai

#Product / 商品頁-點進喜歡的商品看更多細節

我有時候會把重點畫在頁面的中間或左邊,再囉哩囉嗦地把更多設計細節註明在旁邊,我在畫商品頁的手稿時就是這樣做,上半部的 layout 很早就決定,但下面的 widgets 則畫了很多不同樣式來做測試。

I sometimes sketched a rough idea to the center or left of a page, then drew or marked close-ups with more details around it. I did the same when I was conceptualizing the product page.

Pinkoi_iOS_app_4_mai

Pinkoi_iOS_app_5_mai

Pinkoi_iOS_app_6_mai

#Cart & Check Out / 購物車 & 結帳流程

我在思考 Pinkoi App 的購物車頁面與結帳流程時,曾經試畫了很多個不同的版本,但最後決定使用類似紙本收據的版本來作為主視覺的呈現,串接整個流程來引導使用者。

When I was trying to nail down layouts for Pinkoi App’s cart and check out pages, I created many sketches but eventually decided on a simple receipt-like order summary as the main visual element for our shopping cart page and the check out process.

Pinkoi_iOS_app_8_mai

Pinkoi_iOS_app_7_mai

Pinkoi_iOS_app_b

#Order / 訂單頁-在 Pinkoi App 上看訂單

Pinkoi App 的訂單頁似舊沿用收據似的視覺設計,但是因為訂單所要呈現的資訊很多很細,所以先花了許多時間分析使用者的行為模式,以及在操作訂單頁時所採取的行動分類,才根據這些資料著手把訂單頁視覺化。在訂單頁的內容排列上我考量了很多因素,包括買家最需要的資訊是什麼 (重要性高低)、最常/最少使用的行動是什麼等,並製作了實際的紙本樣式來做測試實驗。

也因為訂單頁有太多資訊,在字型大小的配置與空間比例的使用上,我也花了很多時間反覆修改才定案,並在裡面加上一些小細節,希望讓這個平實的訂單頁能更好玩有趣,讓使用者在看訂單時能感覺更親切。

Pinkoi_iOS_app_9_mai

Pinkoi_iOS_app_10_mai

Pinkoi_iOS_app_11

啊哈哈,是的、我試著把手機放在設計手稿旁邊一起照相,因為覺得這樣看起來很漂亮,而且我喜歡把它們前後對照 Before & After 放在一起的感覺,這樣大家也會知道我們的 iOS team 多厲害,Chad & Ben 不但完整實現我的 mockups,還超有耐心的跟我與 Danny 一起不斷地調校細節  : )

Yeessss I also put my phone in some of the pictures, it just looks nice on the device plus I like the idea to compare UI concept sketches and ready designs. Besides, they show how awesome our iOS team is.  Chad & Ben made it happen.  How I love team work! :)

2 comments

  • 你的app是我目前台灣用過最好用的電子購物app
    整個購物流程超順
    不過可惜就是付款的頁的選單小了點
    和其他頁面的有點不搭,然後我在移動的時候也不好買xd
    其他的部分都很棒

    • 啊,居然這麼晚才注意到留言,不好意思 >////< 我們會持續努力的,謝謝你的建議,我們後來也陸續地把 Android & iOS APP愈做愈好了,會持續增加新功能跟fix bugs,再請你有空回來多逛逛哦 :)

Submit a comment

Your email address will not be published. Required fields are marked *