碼農如何從零開始做出有設計感的app？
我是一個後端的碼農，想學習獨立開發出一個有設計感的app～
開發上，我有一點js的基礎，打算學習react native，跨平台的特性還是很吸引我的～也歡迎大家指點技術原型上的不足之處。
設計上，我對移動app設計毫無概念T_T 從我目前狹隘的視角來看，我覺得需學習的知識有三個層面：
1. 宏觀的設計原則和設計思維
2. app的整體設計框架
3. 具體細節，小至一個導航欄，甚至小至一個圖標那麼，請大家指點：
1. 如何掌握設計原則，並培養自己的設計感？
2. app有無類似Bootstrap的整體框架？沒有的話，整體界面如何設計呢？
3. 具體細節上，是否有靜態資源的素材庫，以及動態效果的素材庫呢，能否推薦一二？
4. 設計階段的產出是什麼，如何與後續開發結合起來呢？感謝大家～
我來答點Android相關的吧，雖然可能不大切題。
Material Design是一套非常適合開發者掌握的設計語言。它對各類元素都有非常詳盡，以至於一些設計師視之為桎梏的規範。
做一個設計上60分的Android App，你只需要2個東西：google.com/design/spec和Android Studio。Sketch、PhotoShop等設計工具暫時還用不到，一開始就花精力在上面只會徒增你的學習曲線。
想做一個界面，然而並沒有思路的話，請直接新建Activity，使用默認的模板。默認模板至少能給你提供一個不會太丑或者失控的骨架。
新建完後挑選主題色，請到http://www.google.com/design/spec/style/color.html#color-color-palette里挑（除了藍色）。挑自己喜歡的就行，不用打開調色板慢慢斟酌，因為你要做的是一個60分的應用，不是90分的。
程序內的各項動作圖標，請千萬別從網上下載各種細線體的iOS風格圖標，不僅和Android格格不入，還很可能出現重心不一、意義不明的情況。請直接使用Material Design圖標庫，方法是在Android Studio里右鍵-New-Vector Asset。
程序內的各項元素，請盡量使用design-support所提供的組件。比如fab、snack bar等等，通常情況下工程師自己草草設計並自定義的view是很難像官方控制項一樣考慮到各種複雜的情景，並保持優秀的性能的。
當你不知道文字該用什麼字型大小時，同樣請看http://www.google.com/design/spec/style/typography.html#typography-styles，注意20sp以下中文比英文多1即可。
當你不知道如何設計動效時，android:animateLayoutChanges="true"一句足夠了——RecyclerView內除外。
當你需要為App設計一個圖標而完全沒有美術功底時，直接Android Asset Studio生成一個也算能用。請不要自作主張加上圓角矩形底，在Android上，我找不出圓角矩形底的任何正面意義。
Elevation是Material Design的精髓，請務必參照http://www.google.com/design/spec/what-is-material/elevation-shadows.html，為合適的元素選擇合適的高度，雖然4.x的兼容會花你一點時間，但請相信，那是值得的。
最後，
不要使用底Tab。
不要使用底Tab。
不要使用底Tab。
底Tab到如今，已經不止是一個設計問題，更是升華為宗教問題了。如果你使用了底Tab，那麼不管你其他方面做得多麼優秀，至少和用戶口碑中的「優秀設計」無緣了。
利益相關：剛上手半年的獨立開發者 - https://play.google.com/store/apps/dev?id=4678881964570346633
（iPad答題，請容忍糟糕排版&>_&<）
這個問題其實有兩個思路，你是現在就想做個美美噠app，還是像先變成設計師再做美美噠app，如果是後者，請參考其他答案～
職業之間的信息不對稱啊，你以為設計師都是一個像素一個像素從頭搭的嗎，不不不，我們也是有偷懶的訣竅的。。。讀完此篇，只要你有ps或者sketch，知道圖層的概念，可以把元素導出為所需格式，app的活兒你就能一個人幹了。
你的設計難度會從 ---
變成 ---
--- 提綱 ---
1. 做app需要圖標，我又不會畫，怎麼辦？搜到一些現成的，但質量又不高，怎麼辦？圖標不成套怎麼辦？
2. 沒有審美怎麼辦？
3. 心裡有個app想法，但是線框圖畫不出來怎麼辦？
4. iOS那麼多尺寸，Android尺寸更嚇人，全都要記住嗎，導出@1x@2x@3x點九圖什麼的是不是很麻煩？
5. 說了這麼多，還是要我從空白畫布上畫嗎？！沒有美術基礎啊！當然不是啦～
6. 還有什麼問題可以提問哈。
--- 正文 ---
1. 圖標苦手怎麼辦
就算是設計師，一個一個畫圖標也是很累的。
這時候，如果有錢，請到選項到A；如果沒錢或者不想花錢，請到選項B。
A 如果非常有錢，請直接把錢給我，我把圖標給你哈哈哈。如果有一點錢，可以去http://www.shutterstock.com/ 或者 http://www.pixeden.com/ 買，圖標站還有很多，先列這兩個，反正你們更想看免費的對不對。
B http://www.flaticon.com 是你的好朋友，最好的朋友之一。雖然最近突然改版，變得有點難用，但海量，成套，免費，你還圖啥？缺點可能是風格比較單一，想要fancy一點的怎麼辦？smashing magazine幫助你，https://www.smashingmagazine.com/ 只要搜索freebie即可，最早幾年的icon質量不太行，也過時了，越是新帖質量越好。
舉個栗子，隨便點開一個。
可以調大小，可以改顏色，可以調線條粗細，用上這些，是不是b格噌得就上天了！這些都是頂級設計師放出來的免費資源，你花錢雇的設計師未必畫得出來。。。
2. 沒有審美怎麼辦？
這個就沒有特效藥了。據我的觀察，沒有審美天賦的人，可以判斷好看和不好看，但無法判斷好看和更好看，這時候如果你有個設計師朋友，請付費或者請吃飯，向他諮詢諮詢吧。
療程緩慢的辦法有：多看dribbble（eye candy多，但可以了解趨勢和審美取向），多用好評和獲獎的app，「最美應用」你下載了嗎？「豌豆莢設計獎」你看了嗎？（@馬力請點贊～）每年app store 的盤點你都關注了嗎？
3. 構思不好app流程怎麼辦？
$1 prototype大法，來自一本同名書，我剛看完個開頭，所以以下是我根據它的目錄和我的經驗編的。。。具體就是「場景」 - 「過程」 - 「界面」。
先想像用戶在什麼情況下用，涉及幾個用戶，他們在幹什麼。比如，yelp，是用戶需要找地方吃飯，所以一般只有一個用戶（相對於uber兩方用戶，群聊n方用戶），輸入是一些查詢條件，輸出是在哪兒有飯吃。
現在細化過程，用戶從打開app到達到目標，有哪些步驟。還是yelp，一般情況就是打開app，輸入查詢條件，看到結果，篩選，滿意的話查看商家詳情，不滿意的話可能重新搜索可能更改篩選條件。這是主線劇情，還有些支線劇情，比如看到一個用戶的評價很好，查看用戶的其他評價，follow用戶；還有自己身在餐館，拍了菜單拍了菜，上傳到yelp。把所有的劇情，都在流程圖上畫出來。
期間可能會遇到一些細節。用戶先輸入什麼呢，是餐廳類型，還是只要能吃就可以？距離這個信息是gps給還是用戶自己輸，或者其實距離無所謂，反正用戶有車呢？價格是什麼時候出現？是搜索的時候就限定價格，還是結果出來以後再篩選？這些都不怕，反正也是要改的。。。而且一般自己想做的app也沒有這麼複雜。
你有一個流程圖了，界面就簡單了。把元素往界面上擺一擺，推薦用手機大小的便利貼，拿鉛筆畫上去，有很多東西玩app多了都有經驗，搜索結果是啥，不就map view和list view么，怎麼篩選，放一個漏斗icon在標題欄里唄，醬醬釀釀就好了。接下來就是把親朋好友拉過來，讓他們玩一下這個paper prototype，發現不對的地方再改。
有兩個軟體推薦，一個https://popapp.in 好久不用，希望它還是免費的。一個https://marvelapp.com 免費無限量project，真良心，我一直期待它被adobe收購，結果adobe既沒有收它，也沒有invision，而是準備自己做一個comet。。。真傲嬌。
4. 尺寸記不住怎麼辦？
就不要用ps了，sketch做為生產力工具，真的不貴，都不是按月按年subscribe的，一次買一生，有什麼捨不得的，買吧。以後用它直接新建畫板，就不用記住那麼多尺寸了，導出圖片也特別方便，ps切圖再見。
5. 面對空白畫布下不去手怎麼辦？
前面提到了invision，這家公司的marketing很牛，設計也很牛，市場部為了宣傳他們的產品，讓設計師做了很多的高質量免費模版給其他設計師下載。
舉個栗子。
再舉一個。
這些全是一整套，一整套啊，意味著登陸界面，dashboard，閱讀文章的界面，購物車，天氣，聊天對話各種界面都很可能有。格式一般都有ps，sketch兩種，有時有ai，和設計師打包給你的成品差距不大，你可能需要一個切圖仔，或者自己來。
這些不夠怎麼辦？
http://graphicburger.com
http://freebiesbug.com/psd-freebies/ui-kits/
https://ui8.net/categories/freebies
這樣總行了吧。
6. 其他問題。
應該沒有其他問題了吧。有的話評論區留言吧～
謝謝大家閱讀。1：設備。自從入了imac 27 retina之後，感覺做的設計比以前高大上了許多許多。
2：借鑒。程序員做設計，很重要的一部分是借鑒，切勿自己亂畫，多看一些優秀的app，從中借鑒自己可用的部分。
3：簡潔風。切勿搞的花里胡哨，你又hold不住，我們就走簡潔風，能少則少，扁平化。
4：素材。收集素材啊，icon一定用現成的包啊，素材網站多搜搜啊。
5：切勿不搞設計稿直接就開始用代碼繪製啊。很重要，例如前端，千萬別用代碼調整來看效果，先把設計稿做好再，別急，用代碼繪製界面調整，一點設計的感覺都沒有，給自己多點時間思考一些代碼之外的事情。
之前我太太發現iphone不支持gif。實際上是支持的，怎麼支持呢。我給她做個app就可以了。
然後約定好了，她做產品經理，我給她當設計和程序。
她是個不合格的產品經理，我於是鬧情緒，於是這個產品連個說明書都沒好好寫。雖然已經上架，但是好久沒有更新過了，我也不打算更新了。
視頻地址：https://vimeo.com/101373002
下圖是icon，就是流行的細條風格。用Gif三個字組成了一個攝像機的圖像。
下圖，進入app以後就是三粒button，一個大logo。右上角的i點擊以後顯示一些版權版本信息。
下面左邊的是視頻轉gif的按鈕 右邊是打開gif列表。
背景是打開攝像頭然後模糊然後加了個深色的濾鏡。
下圖，點擊轉化視頻的button以後可以顯示手機視頻列表。最先一個框可以拍視頻。格子不要那麼密，格子間距稍微大一點。返回主頁的icon和拍攝的icon，都這麼做，怎麼做好看看自己審美了。
下圖是選取視頻片段，抄的instagram的，沒什麼好說的。。。
下圖是選濾鏡，也沒啥好說的。
下圖，轉化完成，social icons來自於一個社會化sdk的網站。
下圖，如何上傳的圖片來自電腦截圖，文字用黑體字標出重點，其他字顏色淺一點。用純黑純白的字是很醜的。所以這點注意。
下圖是顯示的版本信息什麼的，注意到濾鏡和版本這掛的照片就是那個不負責任的產品經理。掛照片的目的和知乎上沒事掛別人截圖是一樣的，表示憤慨之類的情緒。版本實際上是1.2了好像，但下面還顯示1.0，因為我也撂挑子了。注意字的顏色不要純黑，純黑太丑。
以上大概就是這個app了。對於這個app，設計要點如下：
1.簡潔，多餘的不要，連說明書我都省了。（省說明書那個只能說明我懶和爛。。。）
2.流行什麼就做什麼。icon的線條要多細做多細。
3.配色能少就少，這裡就是黑灰和一個主色調的藍。
4.有選擇的抄，比如體驗好的大家都習慣的就直接拿過來吧。
------
佔個坑回頭更
多抄多抄，然後自己做微創新，別說碼農，很多國內的設計師還是這樣.. .
作為碼農就老老實實抄(or 模仿)吧
分享近期為內部培訓 React native 寫的材料和視頻
一直想找機會更新 MIHTool，又跟不上 Swift 的步伐，已經用自己的 MVC + ReactJS 寫了兩個管理系統，所以開始折騰 React Native， 結果是很迅速就搭起團隊目前負責的 App, 收穫不少，然後就在自己內部團隊開始培訓 React Native 開發（其實內部受眾都是客戶端開發工程師，培訓非常艱難，因為90%都是前端知識。）我把資料都放到 GitBook 上了，視頻因為目前在國外暫時只放到 Youtube，內容持續更新。 培訓的目的不是精通，而是掌握如何開發。
[書地址, 有中文視頻](react-native training)
大綱：
```
Introduction
1 First look
1.1 Building an app in 5 minutes
1.2 How it works
1.3 Debug tools
1.4 DOCs APIs
1.5 Resources
2 Components
2.1 Render JSX
2.2 View, Text, Image, etc
2.3 Lifecyle
2.4 Props States
2.5 Events
2.6 Resources
3 Styles
3.1 Flexbox
3.2 Absolute Relative
3.3 Size Dimensions onLayout
3.4 Inheritance
3.5 Resources
4 Architecture
4.1 Redux
4.2 react-redux
4.3 Containers Components
4.4 Todo React Native App
4.5 Naming convention
4.6 Resources
5 Data
5.1 Fetch
5.2 Persistent
5.3 Resources
6 Router
6.1 Navigator
6.2 Resources
7 Native Modules
7.1 iOS
7.1.1 JS call OC
7.1.2 OC call JS
7.1.3 Native View Component
7.2 Android
7.2.1 JS call Java
7.2.2 Java call JS
7.2.3 Native View Component
7.3 Resources
8 Integration
8.1 iOS
8.1.1 Package
8.1.2 Image
8.2 Android
8.2.1 Package
8.2.2 Image
8.3 Before publishing
8.4 Resources
9 Hot Update
9.1 iOS
9.2 Android
10.3 Resources
Resources
手機答題，版式從簡
我始終認為，擋在絕大多數人和優秀設計之間的，不是使用工具的能力或者經濟實力，而是審美能力。
學會使用工具並不能讓你具備創造優雅和『設計感』的能力。請一定同步提高審美能力。
建議：1. 請停止自稱碼農。
2. 審美提升是一個需要長期培養的過程，從欣賞美開始培養自己的品味：經典名畫，電影，平面設計作品等等。
3. 搞明白經典作品『美在哪裡』。這個過程會幫你理解美，並建立自己的審美觀。
4. 多多嘗試創作，尋求批評並自我批評。發現自己以前的作品都是屎就是進步的證據。
1. 如何掌握設計原則，並培養自己的設計感？
簡單來說設計原則就兩個，一個是形式追隨功能（或者叫需求），一個是流行。前者主要靠抽象邏輯能力。後者主要靠語言、情感和運氣，也靠一些邏輯。改變世界的往往是前者，賺錢速度不錯風險較小的往往是後者。理解設計原則需要一個實踐過程，做多自然就懂了，放心。程序員大多受功能主義影響，不擅長流行的部分，完全不考慮也無所謂，開心就好。
培養設計感先看看《Objectified》。哪部紀錄片讓你開闊了眼界，並且長了很多知識，而且讓你有回頭再看的念想？ - Catt Liu 的回答
2. App 有無類似 Bootstrap 的整體框架？沒有的話，整體界面如何設計呢？
第一問，不太懂。第二問，了解下 iOS Human Interface Guidelines: Designing for iOS 和 Google Material Design 這兩個目前最新的移動端設計規範，使用前人已經弄得比較好用的零件，結合自己產品所要解決的問題，組裝起來。如果不知道怎麼組裝好，最直接的辦法是把所有組合遍歷一遍，挨個親自感受。很多設計公司所謂的設計方法論就是把遍歷過程拆分分工壓縮時間，加入更多隨機因素，加入合適的迭代進化機制，以便提升遍歷全面度和遍歷速度，但本質上還是遍歷。桌面端設計大同小異，區別在於屏幕面積和使用場景不同，導致一些子環節的設計目標與移動端不同，但設計原理還是一樣。
3. 具體細節上，是否有靜態資源的素材庫，以及動態效果的素材庫呢，能否推薦一二？
我曾經花了很多錢買這些資源，但後來發現這些東西完全沒用，因為這些東西碼在一起好看，單個拿出來質量就不行了，而且可以用錢買到的設計模板也缺乏獨特性，往往實際工作要求設計師要做出與眾不同的亮點。通用的設計範式永遠比不過專門針對某個問題的。不過如果設計的某些地方不是最關鍵的，還是可以使用的，比如交給設計實習生一些模板，讓他套用，至少能保證一個平均水準。
如果想感受下這些碼在一起的好看感覺，可以看看這個 https://ui8.net/
產出就是一套是讓開發人員/階段，盡量不用去想產品的設計問題，只需要專心寫代碼的，對產品的全面描述。往往以一套文檔，輔助一些表格、類似 UML 的圖、界面靜態的展示圖、動畫，甚至是產品某些細節的可交互原型等，這些形式呈現。
和後續開發結合就是大家要用統一的語言溝通，對設計和開發全包的個人來說問題不大。多人水就深了。除了語言要一致，人月的安排，迭代周期的安排，review 的會議機制等都要考慮。太多了兩三句說不清，需要閱讀專門的書並結合實踐去感悟。
既然是從零開始，那麼最好的方式就是使用現成的框架和組件，用現成的，用現成的。
1.現在很多框架都提供了很豐富的樣式庫可以直接用的，這些樣式庫都是經過開發者精心設計的，比起自己從頭學要快很多。比如其他回答裡面的Material Design和ionic Components。但是不推薦Meterial Desigin！！！Google的MD雖然是一門很精簡舒服的設計語言，初看似乎很好學，但是這種越簡單的設計，其實越難駕馭！如果你毫無設計經驗，最終排版，布局出來的APP可能並不會給人簡潔清爽的感覺，而是單調乏味！
2.樓主想學React Native,RN自然是有自己的樣式組件庫的，可以參考這裡的RN學習資源指南：整理了一份React-Native學習指南。
3.然而用現有的庫和組件終究是從程序員的角度出發，樓主要做出有設計感的APP，恐怕滿足這兩點還不行，所以這第三點最重要：抄！雖然也是用現成的，但是畢竟要做出有設計感的APP，就不能從程序員的角度去思考。國外有很多優秀的設計網站，上面有許多設計師做的APP原型，非常贊，其實可以down下來自己修修改改。抄多了，設計感自然就出來了。平時沒事的時候可以上上dribbble，或者UI中國，站酷，花瓣這種設計類網站，培養一下審美。。也可以多逛一下apple stroe，上面有許多小而美的APP的，可以下下來自己體驗一發。安卓下推薦豌豆夾和最美應用，都有介紹一些很多設計感的APP的。
4.設計階段的產出是什麼？樓主的意思應該是從一個獨立開發者來說的吧，我覺得設計的產出就應該是整個APP的視覺稿（包括開發用到的所有素材）和交互（頁面的動態交互和跳轉邏輯）。設計的時候其實就應該考慮到了後續開發的實現的，比如設計一個側邊欄組件，其實你腦中最開始是有一個組件原型的，只是在設計階段基於這個原因進行修飾和改造罷了，所以程序員做設計與設計師做設計的一大區別是：程序員在最開始就知道該怎麼用代碼寫了。
最後，強烈推薦一本書：寫給大家看的設計書（第3版） (豆瓣)
這本書對於樓主想掌握設計原則實在是再合適不過了：）
2011年，Luke Wroblewski大神提出了移動優先的設計理念。在當時看來這無疑是一個打破行業常規的新型設計原則。而在移動互聯網大行其道的今天，誰遵守移動優先的設計理念，設計出最好的移動端網站，誰就能贏得用戶和商機。由此，移動端網站設計的重要性對各大商家來說，毋庸置疑。
「先完成web設計再移植移動設計」的常規模式已經不再適用， 移動化必將是未來互聯網行業的發展趨勢。所以移動優先的網站設計將會變成一個新的潮流，即便這個理念已經存在了好幾年。
為什麼移動優先設計理念如此重要？
1. 據《全球互聯網報告》，截至2016年，全球智能手機用戶已達28億。
2. 與此同時，人們每天在移動端使用網路的時間越來越長。
3. 早在2012年，全球智能手機的銷量就超過PC電腦的銷量。
移動端需求的爆炸式增長，要求設計師在進行產品設計時，重視產品的移動端版本，遵從移動優先的設計原則。我相信，這些理由已經足夠讓設計師和商家們好好研究移動端網頁設計，並從中獲益。
有哪些優秀的移動優先設計案例？
今年YouTube的改版就已經體現了「移動優先」設計的權威。Material Design 體現出「桌面版是移動版的從屬」這一設計思想。正對應了微軟現任 CEO 納德拉喊出來的口號——「移動優先」。
對這句話的最通俗的解釋就是：以前，手機版是「縮小了的桌面網頁」，而現在桌面版是「放大了的手機 App」。那麼，藉此機會，我們列舉了8個遵循移動優先設計理念的網站案例供大家學習和參考。
1. YouTube
設計亮點：按鈕、文字顯示留白
夜間模式
YouTube桌面網頁版的Material Design設計語言，也體現出了強烈的優先照顧移動設備的特徵。響應式設計自然是應有之義，按鈕以及文字顯示的大量留白，無疑是為了適應小屏幕觸屏的使用。
新採用的夜間模式也顯示其對移動設備的臣服。桌面版設備界面大多是白色背景，而在移動端更好的方案則是使用屏幕偏黃光的夜燈模式，而不是整體界面都變成黑底白字。在所有光源都取消，且屏幕尺寸不大的情況下，手持設備用黑底白字的界面同時降低亮度，才會讓眼睛更舒服。
2. Apple
設計亮點：便捷的滾動式導航
根據Nielson/Norman Group，它所發表的一篇用戶體驗調查研究顯示，隱藏導航（如漢堡導航）會減少21%的內容可發現性，並平均增加使用導航2秒。而蘋果網站的內容被布局的非常棒，所以我並不需要使用導航按鈕，我可以通過滾動頁面，十分便捷地獲取信息。一個購物袋的圖標按鈕通常是有必要且一目了然的，以符合用戶的購買需求。如果瀏覽頁面後仍獲取不到所需信息，我可以在底部導航中深度檢索得到想要的信息。
3. Pitchfork
設計亮點：拇指化設計
雖然現在有許多拇指化區域的研究，但仍有許多網站與應用將導航放至屏幕頂部。因為大家都是這麼做的。但如果你留心拇指觸及區域，你會發現手機越大，屏幕外部邊緣區域的內容越難以被用戶接觸到。而類似Pitchfork這樣的移動網頁則是將網站主導航欄放在屏幕最底部，拇指最容易觸及到的地方。隨著移動設備持有量的不斷增長，這樣的設計也將是未來所向。
4. Typeform
設計亮點：大菜單按鈕--非常適合觸屏操作
Typeform的桌面網站設計非常精美，簡潔的副本，高清視頻，動畫等設計元素。但是複雜的設計組件對移動端用戶並不友好，比如視頻和動畫可能會顯著影響頁面載入時間。因此，他們在移動端網頁上刪減了許多不必要的設計元素，但保留了適合在移動設備上操作的大菜單按鈕，簡單卻不失精美，簡化了整體移動體驗。
5. Airbnb
設計亮點：卡片式設計
卡片式設計更易在有限時間內讓用戶與信息相互聯繫。這也是谷歌選擇卡片式設計作為他們設計標準的原因。其他互聯網公司例如Airbnb也逐漸認同並採取這個做法。每張卡片的信息傳達簡潔而有效，通常由一個標題、圖片、圖表或是一段簡介文字組成。這種設計為用戶提供了足夠的信息並且方便他們決定是否想要繼續更深層次了解更多信息。
6. Smashing Magazine
設計亮點：重視用戶，合理優化屏幕使用空間
數據顯示，越來越多的互聯網用戶選擇阻止他們不想要的內容，尤其是移動端用戶近年來攔截廣告的趨勢直線上升。不變的導航設置、滿屏幕的廣告宣傳、過度的市場術語使用，這些並不能為用戶帶來良好的用戶體驗。如果你想推送用戶廣告或引導用戶繼續閱讀，可以循序漸進地根據用戶瀏覽的內容選擇性推送。經過策略性排版的內容也更容易讓用戶主動點擊，從而提升用戶體驗。如果只是單純的為了獲取利潤而打破用戶體驗或者讓他們跳轉頁面，逐漸的用戶會越來越少，利潤也會隨著用戶的流失而減少。
7. Facebook
設計亮點：有效的動畫效果
在網頁中出現的動畫是輔助用戶形象地了解當前事物，賦予用戶體驗更強的表現力與人性化，而不是娛樂大眾。例如Mailchimp將其運用為寄信成功後的擊掌，Twitter在轉發或喜歡功能上使用的小動畫，再比如Facebook製做的形象生動的表情包。但如果你想在頁面上製作動畫，請確保它是雅緻而得體的。
8. Evernote
設計亮點：乾淨清爽的手機UI界面
Evernote主要是提供筆記存儲服務，允許用戶在全平台的設備上訪問。因此Evernote也必須獲得正確的移動體驗。和桌面版的網頁設計一樣，Evernote的移動端網頁設計也是同樣的保持了乾淨清爽的UI界面設計。此外，網頁上恰到好處的CTA按鈕對用戶來說是非常有用的。
如何遵循移動優先設計原則？
打造一個符合移動優先設計原則的移動端網站，首先需要藉助原型工具，例如Mockplus,
第一步：登陸已有的Mockplus賬號或申請一個免費的Mockplus賬號；
第二步：新建一個手機項目；
第三步：思考布局。
「移動優先」設計方法與「桌面優先」有所不同。移動設備中，我們需要考慮在小屏幕布局中呈現足夠有效的信息，並不是隨著頁面布局的改變而減少信息。
在這個例子中，我們知道主頁應該具備的某些元素，比如網站的名字和應用logo。但並不是所有的桌面端網頁設計元素都適合運用到移動端設備上，所以我們首先根據旅遊網站的目標來確定優先事項：
啟動頁面、登錄註冊頁面、歡迎頁面、城市列表頁面、主頁、詳情頁面、搜索頁面、活動頁面、個人信息頁面等。
第四步：效果呈現。
Gogobot在線預覽地址：https://www.mockplus.cn/sample/post/656
卡片式設計和滾動式內容展示符合移動端用戶的信息獲取和操作方式。既不會因為圖片過大搶佔了有限的屏幕資源，上下滾動的內容獲取方式也樂於被用戶所接受。因為比起漢堡菜單，用戶會更樂意去滾動頁面。
桌面端效果展示：Gogobot
結語
通過今年Youtube的改版，相信今後會有更多的商家重視起移動優先的設計理念。也希望以上列舉的8個移動優先設計的案例能為你的新產品或新網站的建設提供一些參考思路。移動版受限於流量必須簡單粗糙，而桌面版則極盡華麗之能事。但現在「移動優先」幾乎成為一句「正確的廢話」，因為它變成了幾乎所有矽谷主流企業的常識。
剛開始做一個APP，也正在往設計方面考慮。反正我覺得參考是蠻重要的。推薦幾款UI非常有設計感的APP。歡迎大家補充。1、IN
2、留白
3、小豬短租
4、Airbnb
你這樣做周期太長了
Ionic CSS Components
09年工作時，最初是會設計，然後會點皮毛css就轉前端，說說設計這東西吧，其實真的沒什麼難點，假如你可以運用ps, ai能夠把你看到的大部分設計都能模仿，基本上就沒什麼大問題了，剩餘的只是些美術、審美、交互，用戶體驗方面的積累，平時多看看dribbble上面的優秀設計(推薦用panda插件)，桌面端的設計多看看http://awwwards.com上面的作品，平時多下載些手機不同類型的app，看到好的頁面設計、優秀的交互體驗用截屏或文件夾有組織地保存起來，以防以後你突然要做哪一方設計時無從下手。現在移動端其實對設計的要求比桌面端的少很多，屏幕就那麼大，設計不可能做得很複雜的，更多的是簡潔、體驗、交互、內容。設計需要長期的累積與經驗，再加上良好的審美觀已足矣。
碼農如果不是特別學過設計，最好不要從0開始設計APP，多上上站酷之類的，看看UI設計師的配色、組件風格和搭配，然後結合自己交互效果實現經驗，在ui設計的平面圖上融合自己在交互上的優勢經驗，往往可以設計出不比設計師差的效果。
重磅，搞設計，Android風格！
GitHub - material-ui
@冀遠明 。。。
用墨刀簡單設計下
說真的，有時候專業的事情交給專業的人來做……
先從抄開始，但不要止步於抄
用angular做前端數據展示數據處理，然後你後台寫好介面API返回json給前台js處理，前後台就完好分開了，就可以打包成wepapp，boostrap更多是樣式不是框架，現階段感覺不大好用react，暫時不要跳進去～
推薦閱讀：
TAG:移動開發 | app軟體開發 | APP設計 | 移動設計 | ReactNative |