龍湖天街app UI界面設計的視覺之路

　　龍湖北城天街的app視覺設計部分終於收尾，從最初的版本到現在已經發布的版本，中間經歷了種種蛻變，今天做一個回顧和整理，記錄這次的經驗和心得。

　　賞心悅目的視覺設計是app品質加分的砝碼。一個app在整個邏輯架構清晰合理、設計出色的前提下，如果能給大家展現一張漂亮而生動的臉蛋那就再好不過了，秀外慧中的美女總是得到更多的青睐。針對客戶的氣質來確定基本的配色和風格：龍湖是一家全國知名的地產公司，“天街系”是龍湖的商業旗艦產品，由大型高檔百貨、餐飲、娛樂等各種商業形態組成。 城市化、 現代化、時尚化、精品化是我給它的定位，界面也應該是走這種風格。

　　與客戶的良好溝通應貫穿項目始終

　　配色部分經歷的波折比較多，由最初的紅色加灰色到中間的龍湖logo色系，再到最後深灰和近白色，之前由於沒有與客戶建立起溝通渠道，造成了大量的資源浪費。

　　設計一個簡潔大方又生動活潑的ICON,視覺元素的數量要做減法，質量要做加法

　　icon 的設計使用了龍湖北城天街已有的logo，最初我嘗試了把這四個彩色的圓形放在一個有材質感的背景上，但是出來的感覺並不好，比較平淡。後來分析了龍湖本身的氣質是偏年輕時尚化的，icon的視覺應該是干淨明朗充滿青春活力。這和蘋果的設備本身的氣質也很相似，我決定就在這四個彩色圓形上做修飾，讓它看起來精致清爽。既然不加其它元素進去，就必須讓logo來出彩，給它加上晶瑩通透的水晶質感，logo就立體鮮活起來,再配以淡淡的淺灰作為背景，它有了明亮的色彩和親切的氣質。

　　細節決定整體的品質

一個好的視覺設計可以是恢宏大氣的，也可以是溫馨雅致的，不管是注重材質的實景風格，還是率性寫意的塗鴉風格，細節的處理展現出的是品質的高低。小到一條有虛邊的邊線也會讓品質大打折扣，app的視覺設計必須精確到像素級，要確保界面中的每一個像素點都完美無缺。

出現虛邊的情況總教人尴尬，除了反復地將圖片放大來檢查以修正虛邊之外，還要感謝Photoshop形狀工具有一個Snap to Pixels功能。

　　圖文排版要考慮的不僅僅是漂亮，還要考慮用戶的視覺感受和頁面的容量

　　按鈕要多大?文字選什麼字號?界面的布局是否合理?如果這些問題讓人困擾，除了請教有經驗的前輩，實踐也能出真知。把設計的界面導入到設備上，用眼睛看，用手指去測試，看是否可以不費力地看清屏幕上的文字，看界面的布局是否讓人感到舒服。用這個方法測試， 看是否能准確地點到目標區域 。我發現在iphone界面上字號在22以下的hei字體和ipad界面上12以下的hei字體的文字看起來就很吃力了，應盡量避免使用這樣小的字號。那麼是否字號越大就越好?在這個app的商戶頁面，要在商戶的logo旁邊寫上商戶的名稱，最初用來做demo的“百麗”只有簡潔漂亮的兩個字，使用60號的hei字體真是再漂亮不過了。不過很快發現商戶的名稱有很多長串的，最長一個 護膚中心的名稱有12個字之多，所以我以這個最長的名稱作為參考對象，測試後選擇了40號的hei體。

　　一個優秀的設計是在傾聽客戶、理解項目的基礎上才有可能建立起來的，簡單清晰、有人情味兒的邏輯架構是判斷設計成功的標准，與團隊成員的默契合作也是必不可少。植根於用戶體驗的設計，一定要把自己當作產品的用戶，從一個用戶的角度去思考，這樣才能評估出產品是否優秀。

　　#重慶龍湖北城天街#App是彩程為重慶龍湖地產打造的專屬品牌商圈類App，通過它你可以了解到重慶龍湖北城天街最新活動、商家折扣、優惠券和其他相關信息。目前iPhone版已在蘋果應用商店上架，歡迎下載。