開發輔助 | 前端開發工程師對 UI設計、交互設計的認知

---

 

一、UI 用戶界面

　　UI：User Interfase 用戶界面

　　UID：User Interfase Designer 用戶界面設計師，多指移動 app 的界面設計；

二、一個合格的 UI 設計師，至少應該具有什麼？

（1）審美：

一個好的設計師，應具有基本的藝術審美，識別不一樣的藝術表現形式，區分做品的好壞，感覺下：

　　圖1： 　　圖2:  

 （2）想象力、腦洞　　

　　好比：克里斯托弗·諾蘭導演的電影《盜夢空間》、 宮崎駿的《千與千尋》

　　

（3）基本的工具使用：

　　經常使用且基本的工具：PS

　　拓展：

　　　　圖標：Sketch / macOS電腦；

　　　　矢量設計軟件：Ai 

　　　　原型圖繪製：Axure、磨刀

　　　　視頻剪輯-後期處理： Ae

　　　　  

（4）進階階段：

　　美術基礎理論修煉，關於：造型、透視技巧、顏色等；

　　

（5）興趣：手繪

　　若是業餘對手繪有興趣，能夠拓展一下，很加分，優秀的手繪更須要時間積累，不斷得思考；

（6）熱愛：

　　任何一條路，能走多遠，歷來不因出發遲早能決定的，而是對事物自己的熱愛；

　　設計是個磨人的工做，工做過程當中，須要發揮本身的創意，開動腦筋，甚至要苦思冥想才能完成一個比較好的設計做品；是一個痛苦又快樂的過程；若是沒有一個對美的執着追求，很容易半途而廢；相反，若是你很是喜好它，每一次做品的完成都是一個很是愉快快的體驗；並且每一次都能感覺到本身的昇華。

 

---

 三、工欲善其事，必先利其器

（1）工具安裝：

　　下載途徑：搜索關鍵字 —— XXX + 百度雲

　　下載版本： 要下載 cc 2015 以上的版本

　　　　PS、Sketch/mac、矢量設計Ai 、axure原型圖 、Ae視頻剪輯-後期處理

　　　　（我這裏有：PS cc 2017 破譯版，macOS的，須要的評論區留下您的郵箱，個人網絡出牆了，其餘軟件也能夠幫你找）

（2）大神修煉必看網站：

　　zcool.com.cn/站酷 -  國外的 behance.net

　　ui.cn / UI中國  - 國外的 dribbble.com

　　uisdc.com - 優設 素材下載，這裏是設計師伸手黨的天堂

　　huaban.com - 花瓣

　　

（3）「盜亦有道」 —— 推薦書籍：

　　《術與道》

　　《在你身邊，爲你設計》騰訊 UI事業部出品

　　《動靜之美》關於sketch ios圖標設計

　　《簡約至上》交互設計，心理學

　　《一個app的誕生》從UI設計的角度，告訴你互聯網這一行是怎麼玩兒的

　　《世界無界》《界與面》-- 人生觀價值觀，職場常識，給滿滿地正能量

　　

---

四、圖標  --  方寸之間，盡顯功力

　　什麼是圖標？

　　廣義： 具備明確指代含義的圖形；高度濃縮、快捷傳達信息、便於記憶等特性；

　　（1）傳統社會的圖標：

　　

　　

　　（2）智能時代的圖標：在此致敬其鼻祖 -- Steve Jobs

　　

　　（3）圖標的大體分類：

　　　　logo圖標 - app的圖標

　　　 

　　　　功能性圖標 - iconfont 讓界面更加飽滿、體驗更愉悅

　　　　   VS    

　　　　　　左邊：只有文字的界面、單調枯燥

　　　　　　右邊： 加入圖標、界面飽滿內容更加豐富、瀏覽體驗生動活潑；　　

　　　　觀賞性圖標：一、女兒紅中國風

　　　　

　　　　

五、APP設計的工做流程：

　　項目需求、策劃方案、調研 => 草稿、原型圖   => UI界面設計  設計稿交付 =>  上線後調整、迭代

　　（這個部分，我抽時間詳細總結一篇）

---

 六、關於交互設計：

　　交互設計是一種目標導向設計。全部的工做內容都圍繞用戶行爲進行設計，是的行爲流程更加合理化，易用化。讓用戶更加方便、高效的完成產品業務目標，並得到愉快的用戶體驗。

　　思惟導圖、原型圖、交互文檔、交互規範、用戶行爲研究、設計目標導向、體驗評估；

　　  =>  

　　問路案例：

　　「不知道，高冷範兒」  --> "左拐右拐 再拐"  --> 「我帶你去吧」

　　

　　交互設計：讓app 更易用，感性作設計的同時，更加理性的思考；UI設計讓app更好看；測試讓app穩定上線；

 　　風格案例：

　　　　須要瞭解行業 - 支付寶，美圖秀秀，行業不一樣，須要凸顯的重點不同；

　　　　大小凸顯，顏色演示，層次感明細，線條明朗；

---

 

七、文末，感覺下來自 錘子科技 的 UI 設計

　　堅果 R1

　　堅果 pro

    

　　  來自將來，改變一切的 TNT