如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
一．寫在前面
1.為什么要學(xué)小程序開發(fā)？
對(duì)于前端開發(fā)而言，微信小程序因?yàn)槠浜?jiǎn)單快速、開發(fā)成本低、用戶流量巨大等特點(diǎn)，也就成了前端開發(fā)工程師必會(huì)的一個(gè)技能。
2.開發(fā)準(zhǔn)備：
（1）有人開玩笑說，會(huì)vue小程序根本都不用學(xué)：
微信小程序雖然是騰訊自己搞的，但是核心的思想跟vue等框架是一樣一樣的哦~
（2）善于搜集精美的小組件： “我們不生產(chǎn)代碼，我們只是代碼的搬運(yùn)工”，善于找到想要的組件并把他們巧妙優(yōu)雅的組裝成一個(gè)大項(xiàng)目，也算是程序員一項(xiàng)基本技能了。
具體怎么找到想要的小程序demo，篇末會(huì)給大家推薦小程序的資源，有很多大神的項(xiàng)目哦
擼起袖子開干了
一.注冊(cè)小程序賬號(hào)，下載IDE
1.官網(wǎng)注冊(cè)https://mp.weixin.qq.com/，并下載IDE。
2.官方文檔一向都是最好的學(xué)習(xí)資料。
注意：
（1）注冊(cè)賬號(hào)之后會(huì)有一個(gè)appid，新建項(xiàng)目的時(shí)候需要填上，不然很多功能是用不了的，比如不能預(yù)覽，不能上傳代碼等等。
（2）如果你注冊(cè)過微信公眾號(hào)的話，一定要注意，微信公眾號(hào)和小程序是兩個(gè)賬號(hào)，二者的appid也是不同，小程序開發(fā)必須使用小程序的appid哦。
二.小程序框架介紹和運(yùn)行機(jī)制
1.我們建立了“普通快速啟動(dòng)模板”，然后整個(gè)項(xiàng)目目錄如下：
2.app.js
整個(gè)項(xiàng)目的啟動(dòng)文件，如注釋寫的onlaunch方法有三大功能，瀏覽器緩存進(jìn)行存和取數(shù)據(jù)；用登陸成功的回調(diào)；獲取用戶信息。
globalData是定義整個(gè)項(xiàng)目的全局變量或者常量哦。
3.app.json
整個(gè)項(xiàng)目的配置文件，比如注冊(cè)頁(yè)面，配置tab頁(yè)，設(shè)置整個(gè)項(xiàng)目的樣式，頁(yè)面標(biāo)題等等；
！注意：小程序啟動(dòng)默認(rèn)的第一個(gè)頁(yè)面，就是app.json的pages中的第一個(gè)頁(yè)面哦。
4.pages
小程序的頁(yè)面組件，有幾個(gè)頁(yè)面就會(huì)有幾個(gè)子文件夾。比如快速啟動(dòng)模板，就有兩個(gè)頁(yè)面，index和logs
5.打開index目錄
可以看到有三個(gè)文件，其實(shí)和我們web開發(fā)的文件是一一對(duì)應(yīng)的。
index.wxml對(duì)應(yīng)index.html；
index.wxss對(duì)應(yīng)index.css；
index.js就是js文件哦。
一般我們還會(huì)給每個(gè)頁(yè)面組件添加一個(gè).json文件，作為該頁(yè)面組件的配置文件，設(shè)置頁(yè)面標(biāo)題等功能
6.雙擊index.js文件
（1）var app = getApp();
引入整個(gè)項(xiàng)目的app.js文件，用來(lái)取期中的公共變量等信息。
如果要使用util.js工具庫(kù)中的某個(gè)方法，在util.js中module.exports導(dǎo)出，然后在需要的頁(yè)面中require即可得到哦。
（2）比如，我們要獲取豆瓣電影的時(shí)候，我們需要調(diào)用豆瓣的api；我們先在app.js中的gloabData中定義doubanBase
然后在index.js中使用app.globaData.doubanBase即可取到這個(gè)值。
當(dāng)然這些常量你也可以在頁(yè)面需要的時(shí)候，再用寫死的值，但是為了整個(gè)項(xiàng)目的維護(hù)，還是建議把這種公用參數(shù)統(tǒng)一寫在配置文件中哦。
（3）接下來(lái)在整個(gè)page({})中，第一個(gè)data，就是本頁(yè)面組件的內(nèi)部數(shù)據(jù)，會(huì)渲染到該頁(yè)面的wxml文件中，類似于vue、react哦~
通過setData修改data數(shù)據(jù)，驅(qū)動(dòng)頁(yè)面渲染
（4）一些生命周期函數(shù)
比如onload()， onready(), onshow(), onhide()等等，監(jiān)聽頁(yè)面加載、頁(yè)面初次渲染、頁(yè)面顯示、頁(yè)面隱藏等等
更多的可以查官網(wǎng)API哦。其中用的最多的就是onload()方法，和onShareAppMessage()方法（設(shè)置頁(yè)面分享的信息）
7 .wxml模板的使用。
比如本項(xiàng)目電影頁(yè)面，就是以最小的星級(jí)評(píng)價(jià)組件wxml當(dāng)做模板，star到movie到movie-list，一級(jí)一級(jí)的嵌套使用。
star-template.wxml頁(yè)面寫好name屬性；然后import引入的時(shí)候通過name獲得即可
8.常用的wxml標(biāo)簽
view，text，icon，swiper，block，scroll-view等等，這些標(biāo)簽直接查官網(wǎng)文檔即可
三.小程序框架、各個(gè)頁(yè)面以及發(fā)布上線的注意點(diǎn)
1.整個(gè)框架中的一些注意點(diǎn)
（1）整個(gè)wxml頁(yè)面，最底層的標(biāo)簽是哦。
（2） 每個(gè)頁(yè)面頂部導(dǎo)航欄的顏色，title在本頁(yè)面的json中配置，如果沒有配置的話，取app.json中的總配置哦。
（3）json中不能寫注釋哦，不然會(huì)報(bào)錯(cuò)的。
（4）路由相關(guān)
1）使用wx.SwitchTab跳轉(zhuǎn)tab頁(yè)的話，在app.json中除了注冊(cè)pages頁(yè)面，還需要在tabBar中注冊(cè)tab頁(yè)，才能生效哦。
注意：tab最多5個(gè)，也就是我們說的頭部或者底部最多5個(gè)菜單。其他的頁(yè)面只能通過其他路由方法打開哦。
2）navigateTo是跳到某個(gè)非tab頁(yè)，比如歡迎頁(yè)，電影詳情頁(yè)，城市選擇頁(yè)；在app.json中注冊(cè)后，不能在tabBar里注冊(cè)哦，不然同樣也是不能跳轉(zhuǎn)的哦。
3）reLaunch跳轉(zhuǎn)，新開的頁(yè)面左上角是沒有退回按鈕的，本項(xiàng)目只用了一次，切換城市的時(shí)候哦。
（5）頁(yè)面之間傳遞參數(shù)
參數(shù)寫在跳轉(zhuǎn)的url之中，然后另一個(gè)頁(yè)面在onload方法中的傳參option接收到。如下傳遞和獲取id
（6）data-開頭的自定義屬性的使用
比如wxml中我們?cè)趺磳?
點(diǎn)擊的事件對(duì)象可以這么取，var postId = event.currentTarget.dataset.postid;
注意： 大寫會(huì)轉(zhuǎn)換成小寫，帶_符號(hào)會(huì)轉(zhuǎn)成駝峰形式
（7）事件對(duì)象event，event.target和event.currentTarget的區(qū)別：
target指的是當(dāng)前點(diǎn)擊的組件 和currentTarget 指的是事件捕獲的組件。
比如，輪播圖組件，點(diǎn)擊事件應(yīng)該要綁定到swiper上，這樣才能監(jiān)控任意一張圖片是否被點(diǎn)擊，
這時(shí)target這里指的是image（因?yàn)辄c(diǎn)擊的是圖片），而currentTarget指的是swiper（因?yàn)榻壎c(diǎn)擊事件在swiper上）
（8）使用免費(fèi)的網(wǎng)絡(luò)接口：
本項(xiàng)目中用到了 和風(fēng)天氣api，騰訊地圖api，百度地圖api，豆瓣電影api，聚合頭條新聞api等，具體用法可以看各自官網(wǎng)的接口文檔哦，很詳細(xì)的
注意：免費(fèi)接口是有訪問限制的，所以如果用別人的組件用了這種接口的話，最好還是自己注冊(cè)一個(gè)新的key替換上哦
附上一個(gè)免費(fèi)接口大全：
https://github.com/jokermonn/-Api
??！另外還要注意，要把這些接口的域名配置到小程序的合法域名中，不然也是訪問不了的
（8）wxss有一個(gè)坑：無(wú)法讀取本地資源，比如背景圖片用本地就會(huì)報(bào)錯(cuò)哦。
把本地圖片弄成網(wǎng)絡(luò)圖片的幾種方式： 上傳到個(gè)人網(wǎng)站；QQ空間相冊(cè)等等也是可以的哦
2.切換城市頁(yè)面：
（1）首頁(yè)使用navigateTo跳轉(zhuǎn)到切換城市頁(yè)，由于首頁(yè)并沒有關(guān)閉，導(dǎo)致切換了城市返回來(lái)，天氣信息還是舊的。
正確的處理邏輯如下：
1）使用reLaunch跳轉(zhuǎn)到切換城市頁(yè)面，實(shí)質(zhì)是關(guān)閉所有頁(yè)面打開新的頁(yè)面哦。
2）切換城市頁(yè)面，更新公共變量中城市信息為手動(dòng)切換的城區(qū)，再switchTab回到首頁(yè)，觸發(fā)首頁(yè)重新加載。
3）首頁(yè)獲取城市信息的時(shí)候加一個(gè)判斷，全局沒有才取定位的，全局有（比如剛才設(shè)置了）就用全局的哦。
（2）城市列表的滾動(dòng)和回到頂部
基于scroll-view組件的scroll-top屬性，初始就是0，滾動(dòng)就會(huì)增加的；點(diǎn)擊回到頂部給它置為0即可回到頂部
3.天氣頁(yè)
（1）初始化頁(yè)面，天氣顯示的邏輯
首先調(diào)用小程序的wx.getLocation方法獲得當(dāng)前的經(jīng)緯度，然后調(diào)用騰訊地圖獲得當(dāng)前的城市名稱和區(qū)縣名稱，并存到公共變量中，
再調(diào)用查詢天氣和空氣質(zhì)量的方法哦。
（2）容錯(cuò)處理
城市的名稱長(zhǎng)短不一，有點(diǎn)名字特別長(zhǎng)，比如巴彥淖爾市這種，需要?jiǎng)討B(tài)的獲取完整的城市名稱；
有些偏僻的城市暫時(shí)沒有天氣信息，我們需要對(duì)返回的結(jié)果進(jìn)行判斷，沒有信息的需要給用戶一個(gè)良好的提示信息。
4.周邊-地圖服務(wù)頁(yè)面
（1）調(diào)用百度地圖的各種服務(wù)，查詢酒店，美食，生活服務(wù)三種信息，更多信息可以看百度地圖的文檔
（2）點(diǎn)擊時(shí)給被點(diǎn)中的圖標(biāo)加個(gè)邊框，數(shù)據(jù)驅(qū)動(dòng)視圖，所以使用一個(gè)長(zhǎng)度為3的數(shù)組保存三個(gè)圖標(biāo)當(dāng)前是否被點(diǎn)中的狀態(tài)
然后wxml再根據(jù)數(shù)據(jù)來(lái)動(dòng)態(tài)添加class，增加邊框樣式
5.豆瓣電影頁(yè)
（1）電影詳情頁(yè)的預(yù)覽圖片，用小程序本身的previewImage實(shí)現(xiàn)。
（2）詳情頁(yè)使用onReachBottom()方法，監(jiān)控用戶上拉觸底事件，然后發(fā)送請(qǐng)求繼續(xù)獲得數(shù)據(jù)，實(shí)現(xiàn)懶加載的效果
（3）用戶體驗(yàn)方面的優(yōu)化，js中將整數(shù)評(píng)分比如7分統(tǒng)一改為7.0分，然后wxml模板再判斷分?jǐn)?shù)是否為0顯示“暫無(wú)評(píng)分”
（4）搜索之后清空搜索框
因?yàn)樾〕绦蛑胁荒苁褂胓etelementbyId這種方式獲得元素，只能用數(shù)據(jù)來(lái)控制了
在data中加一個(gè)屬性searchText來(lái)保存搜索框的內(nèi)容并和 input的value屬性綁定，搜索完成或者點(diǎn)擊X時(shí)，searchText變量清空即可實(shí)現(xiàn)清空輸入框的效果哦。
6.新聞頁(yè)面
（1）聚合頭條新聞的免費(fèi)接口，只返回了新聞的基本信息，新聞的主體內(nèi)容是沒有的哦。
我找了好多新聞?lì)惖慕涌冢孟穸际菦]有新聞主體內(nèi)容的。如果誰(shuí)知道更好的接口歡迎留言告訴我哈~
（2）當(dāng)然，也可以自己去爬新聞網(wǎng)站的數(shù)據(jù)哦
7.更多頁(yè)面
（1）小程序目前開放外鏈的功能只是給公司組織的小程序開放了，個(gè)人開發(fā)還是不能使用外鏈的哦。
（2）彩蛋頁(yè)面，獲得用戶信息
通過 wx.setStorageSync('userInfos', userInfos); 可以獲得登陸小程序的用戶的個(gè)人信息，可以發(fā)送給后臺(tái)存到數(shù)據(jù)庫(kù)中，方便對(duì)用戶進(jìn)行分析
我這里只是存儲(chǔ)到瀏覽器緩存中哦，最大應(yīng)該是10M緩存；如果用戶把這個(gè)小程序從小程序列表中刪除掉，就會(huì)清空這個(gè)緩存。
8.發(fā)布注意
（1） 新版本小程序發(fā)布的限制為2M，一般都是圖片最占空間，所以盡量使用網(wǎng)絡(luò)圖片
具體怎么把本地圖片變成網(wǎng)絡(luò)圖片，上面有講哦。
（2）在開發(fā)者工具上預(yù)覽測(cè)試沒問題，點(diǎn)擊上傳；網(wǎng)頁(yè)版小程序個(gè)的人中心的左側(cè)“開發(fā)管理”菜單，第三塊--開發(fā)版本就有了內(nèi)容。
（3）點(diǎn)擊提交，填寫小程序相關(guān)信息，就可以提交審核了哦。
注意：分類最好填寫準(zhǔn)確，這樣才能更快的通過審核哦。我這個(gè)小程序一天半時(shí)間過審上線的
至此，我就把兩天開發(fā)內(nèi)碰到的坑和注意點(diǎn)都過了一遍，據(jù)說還有更多的坑，等之后更深入的開發(fā)再繼續(xù)研究咯。
小程序?qū)W習(xí)資料
色彩跳躍、文字流暢、精美的設(shè)計(jì)，會(huì)不會(huì)讓你有一種愛不釋手的感覺呢？即使你對(duì)其中的文字內(nèi)容并沒有什么興趣，有些精致的廣告也能吸引住你，這就是平面設(shè)計(jì)的魅力！它能把一種概念，一種思想通過精美的構(gòu)圖、版式和色彩，傳達(dá)給看到它的人。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
在做UI設(shè)計(jì)之初，我就有跟蹤一些app版本和更新的習(xí)慣。在互聯(lián)網(wǎng)行業(yè)工作久了，我總是會(huì)從他們每一個(gè)版本的產(chǎn)品形態(tài)去揣測(cè)這個(gè)公司的動(dòng)態(tài)?？吹揭恍┕δ芎徒换c(diǎn)，我會(huì)設(shè)身處地地思考如果我是他們的產(chǎn)品設(shè)計(jì)師應(yīng)該如何處理；遇見一些深得我心的功能點(diǎn)，我也總是有一種和他們的產(chǎn)品設(shè)計(jì)師惺惺相惜的江湖感情。反正久而久之，我邊猜測(cè)邊總結(jié)，也是養(yǎng)成了自己的一套“歪門邪道”的方法論。
言歸正傳，我們來(lái)看這一篇文章的內(nèi)容。
時(shí)間來(lái)到了2017年，手機(jī)空間越來(lái)越大，大家的手機(jī)中也裝了越來(lái)越多的app。很多時(shí)候，當(dāng)拿起一個(gè)朋友的手機(jī)，看他手機(jī)里都有哪些應(yīng)用，這些應(yīng)用的優(yōu)先級(jí)是如何排布的，我經(jīng)常會(huì)從中得出關(guān)于這個(gè)人的另一層線索。
比如一個(gè)人手機(jī)里優(yōu)先位置上有脈脈、知乎、豆瓣、一個(gè)ONE、單讀這幾個(gè)app，那我可以推測(cè)這個(gè)人一定是具備文藝屬性的互聯(lián)網(wǎng)從業(yè)者。
比如一個(gè)人手機(jī)封面是吳亦凡或者鹿晗，手機(jī)里優(yōu)先位置上有優(yōu)酷、愛奇藝、騰訊視頻、芒果TV、天貓、京東、蘑菇街這樣的一堆a(bǔ)pp，就可以看出這是一位愛綜藝、愛追星、愛剁手的小姑娘。
……
1. 意識(shí)是主觀形式與客觀內(nèi)容的內(nèi)在統(tǒng)一
如果說2013~2015年app的 UI設(shè)計(jì)上充斥了很多同質(zhì)化產(chǎn)品的話，到了2017年，UI設(shè)計(jì)師們?cè)赿ribbble和behance的風(fēng)格影響下，產(chǎn)品的設(shè)計(jì)有了更多的發(fā)展空間。我們不得不說的是，現(xiàn)在的app比之前越來(lái)越好看和越來(lái)越好用了。
如下圖所示我隨意截取了九個(gè)我自己覺得UI很棒的產(chǎn)品和大家分享，他們分別是Enjoy、單讀、Artand、Airbnb、一個(gè)ONE、Gilt、良倉(cāng)、Zeen、和氧氣。
那這里有一個(gè)關(guān)鍵的問題就出現(xiàn)了，為什么有些app，普通用戶一打開就自然而然地覺得它很美？用戶這種“覺得它很美”的意識(shí)到底是從哪兒來(lái)的？
在此之前，我先來(lái)說兩組哲學(xué)概念。
意識(shí)是主觀形式與客觀內(nèi)容的內(nèi)在統(tǒng)一。（馬克思主義哲學(xué)）
內(nèi)容決定形式，形式反作用于內(nèi)容。（黑格爾唯心主義哲學(xué)）
為了闡述用戶這種“覺得它很美”的意識(shí)到底是從哪兒來(lái)的，就必須要了解app中“內(nèi)容”和“形式”之間的關(guān)系。那我們不妨來(lái)看一下什么叫內(nèi)容，什么叫形式。
2.內(nèi)容
如果斗膽給app設(shè)計(jì)工作中的“內(nèi)容”下一個(gè)定義的話，我大概會(huì)說：內(nèi)容是集成在app中，所有可被感知的圖片、文字、聲音的合集。這里之所以說是可被感知的，主要是從用戶層面上看，忽略了用戶不可感知的“代碼”層面。
那么我們有必要搞清楚的是，一個(gè)app的內(nèi)容到底是如何產(chǎn)生的？也就是一個(gè)app到底是如何產(chǎn)生的？
那這里我不妨展開一下，假設(shè)我是一個(gè)產(chǎn)品設(shè)計(jì)師，有一天CEO告訴我最近想做一個(gè)電商app。（這里我假設(shè)我們公司很有實(shí)力，忽略了市場(chǎng)和運(yùn)營(yíng)、渠道和資金上的問題，只考慮產(chǎn)品設(shè)計(jì)方面。）
那這個(gè)時(shí)候我會(huì)問老板：“老板，你做電商類app，是想做平臺(tái)類的呢還是做垂直的呢？你可想好了啊，你做平臺(tái)類的想要從淘寶、京東分份額的話，那你必須要有自己的特色。比如國(guó)內(nèi)app‘xx’、‘xx’和‘xx’、他們都有自己的特色?；蛘哒f你是想做垂直一些的么？比如‘xx’是專門做化妝品領(lǐng)域的，比如‘xx’是專門做美食的?！比缓罄习灞晃乙环榜Z化”之后得出的結(jié)論是我們來(lái)做一個(gè)美食電商，但是這個(gè)美食電商不會(huì)對(duì)標(biāo)Enjoy那樣的高檔人群，而是做成類似于“什么值得吃”這樣的大眾場(chǎng)景。
好，故事講完了，現(xiàn)在我化身為這個(gè)產(chǎn)品設(shè)計(jì)師，簡(jiǎn)短片面地闡述我的思考過程：首先我拿到的目標(biāo)是做一款“什么值得吃”app，它的目標(biāo)人群是全中國(guó)吃貨，且要滿足吃貨推薦、評(píng)價(jià)和在線下單支付（前期無(wú)法做渠道的話需要跳轉(zhuǎn)淘寶京東鏈接）等功能。
經(jīng)過一番思考，我認(rèn)為這款app的MVP狀態(tài)應(yīng)該需要如下圖所示的功能。
這里簡(jiǎn)單說一下MVP是啥意思?！癕VP=Minimum Viable product（最小可行產(chǎn)品）”是《精益創(chuàng)業(yè)》的作者埃里克·萊斯提出提出的一個(gè)概念，字面意思就是可保證產(chǎn)品正常使用（主邏輯閉環(huán)）的最小產(chǎn)品單元。MVP又分為Validating MVP和Invalidating MVP，在這里就不展開了。《精益創(chuàng)業(yè)》是一本特別贊的書，推薦大家閱讀。
我設(shè)計(jì)的這個(gè)其實(shí)是Invalidating MVP，大概需要四個(gè)部分。
“推薦”是核心，以帖子形式或者別的什么形式推薦一些東西并附上鏈接?！皩ｎ}”方面做一些可供運(yùn)營(yíng)和推廣的專題，比如“情人節(jié)送什么巧克力”、“最適合食辣族的幾款辣醬”之類?！吧坛恰崩锩鏁?huì)放一些自營(yíng)的物品。“我的”里面會(huì)有我的推薦、我的收藏、我的訂單之類的一堆東西。
你們發(fā)現(xiàn)了嗎，其實(shí)這個(gè)時(shí)候，產(chǎn)品設(shè)計(jì)師就已經(jīng)在定義產(chǎn)品的信息架構(gòu)了。
第一，因?yàn)檫@個(gè)app叫”什么值得吃”，那我們是不是還需要推薦一些線下值得吃的店呢？如果做了是不是就和Enjoy同質(zhì)化太嚴(yán)重了？那最好就是先不做。
第二，在推薦這一頁(yè)里面我大概需要什么功能，因?yàn)槊嫦虻膶?duì)象不太像Enjoy那種偏一線城市的人群，那我應(yīng)該用戶群體同類對(duì)標(biāo)到今日頭條這種level的感覺。
第三，這個(gè)首頁(yè)我是按照各種食品屬性的分類來(lái)建立推薦列表呢，還是說我按照人的屬性來(lái)建立推薦列表呢？如果是按照食物的分類的話，給別人的感覺可能和淘寶很像，比如我在列表里面看到“巧克力”再點(diǎn)進(jìn)去看巧克力的推薦，和我在“甜品族”這個(gè)人群標(biāo)簽里看到某巧克力好吃，這兩種行為邏輯給用戶的感覺完全不同。大家體會(huì)一下，作為“什么值得吃”這款app來(lái)說，肯定是后者更適合，所以得出結(jié)論是以人的屬性建立推薦列表。（我甚至考慮到了以后迭代未來(lái)功能版本的可能性，比如到時(shí)候每個(gè)人可以有多種身份標(biāo)簽，再去做匹配社交之類的。）
好，那我現(xiàn)在關(guān)于產(chǎn)品首頁(yè)大概得出了以下幾點(diǎn)感覺。
（1）首頁(yè)推薦按照人的屬性標(biāo)簽去區(qū)分推薦列表。
（2）產(chǎn)品風(fēng)格不宜太洋氣（尤其是一定不能像Enjoy那樣使用黑白配色），最好是產(chǎn)品對(duì)標(biāo)今日頭條和微博的感覺，受眾偏向二三四線城市。
（3）每一個(gè)推薦應(yīng)該有收藏、購(gòu)買鏈接等部件，在首頁(yè)上應(yīng)該有專門為運(yùn)營(yíng)活動(dòng)或者市場(chǎng)換量設(shè)置的入口（可能是banner形式）。
（4）為了不使推薦屬性具有傾向性，每一個(gè)推薦都應(yīng)該盡量層級(jí)平行。（比如“吃辣黨”和“甜品族”就應(yīng)該入口平行。）
（5）一定要保證一個(gè)完整且通順的支付邏輯和用戶推薦邏輯，這是最基本的兩個(gè)功能。中間可能涉及到推薦里面要有商城鏈接（如果商城沒有的要跳轉(zhuǎn)淘寶），自己的商城要支持支付寶、微信等支付方式，要有訂單狀態(tài)和退單等一系列功能，余額功能或退款自動(dòng)退回功能二選一（看公司需不需要資金池）。
....（此處省略N條）
其實(shí)，app“內(nèi)容”的產(chǎn)生，就是我上述這些奇怪東西的綜合（當(dāng)然其實(shí)并沒有上述這么簡(jiǎn)單，這個(gè)以后有機(jī)會(huì)細(xì)講），比如我們從上面的論述當(dāng)中，可以歸納出這款“什么值得吃”app的首頁(yè)“推薦”應(yīng)該具有如下信息。
我寫這么多字其實(shí)就是想告訴大家一個(gè)app的“內(nèi)容”是如何產(chǎn)生的，當(dāng)然我這里說得十分簡(jiǎn)單，真實(shí)情況可能比這個(gè)復(fù)雜百倍，大家意會(huì)就是了。
好了說完了內(nèi)容，我們來(lái)看所謂app中的“形式”又是什么。
3.形式
如果說我們把所有集成在app中可感知的圖片、文字、聲音的集合稱作app的內(nèi)容的話，那么app的形式就是“承載這些內(nèi)容，使內(nèi)容更好被感知的方式”。
人有五感，包括視覺、聽覺、嗅覺、味覺和觸覺。而人去和一款手機(jī)應(yīng)用進(jìn)行交互的時(shí)候只會(huì)從視覺、聽覺、觸覺（反饋）三個(gè)方面去感知，而觸覺涉及到交互層面，以后我寫到app的交互架構(gòu)的時(shí)候會(huì)詳細(xì)說。 聽覺其實(shí)也不是本文重點(diǎn)，我舉個(gè)例子一筆帶過就好了。比如大家都用過滴滴，滴滴有一個(gè)“內(nèi)容（功能）”是司機(jī)送一個(gè)乘客的過程中，當(dāng)判斷距離目的地很近的時(shí)候會(huì)默認(rèn)進(jìn)行一個(gè)“下一單的匹配”的功能。我們用滴滴的這個(gè)功能來(lái)對(duì)比手機(jī)游戲里面的“匹配下一局”，我們會(huì)發(fā)現(xiàn)這是幾乎相同的“內(nèi)容”，但是承載形式不一樣。手游是視覺展現(xiàn)，你必須點(diǎn)擊手機(jī)上的“匹配”按鈕，而滴滴因?yàn)榭紤]到司機(jī)在開車很難解放雙手去點(diǎn)擊匹配，所以從產(chǎn)品邏輯上設(shè)計(jì)的是“語(yǔ)音提示+主動(dòng)匹配+手動(dòng)接單”的方式，所以我們總能在快下出租車的時(shí)候聽到司機(jī)手機(jī)上傳出響亮的“開始接單啦”語(yǔ)音提示。
本文的重點(diǎn)是視覺。
可能在大家以往的工作當(dāng)中并不會(huì)關(guān)注一款app原型是怎么樣設(shè)計(jì)出來(lái)的，大家可能只會(huì)關(guān)心我拿到原型以后應(yīng)該如何轉(zhuǎn)化為驚艷的高保真頁(yè)面。
把一個(gè)內(nèi)容整理、排列成一個(gè)app頁(yè)面，就是大家更關(guān)心的“形式”的部分。還是回到上文“什么值得吃”這款虛構(gòu)的app上，綜合上面的觀點(diǎn)，我大致能畫出原型如下圖所示兩種。
當(dāng)然這個(gè)是最粗糙的原型。（如果各位UI設(shè)計(jì)師在工作中接到了類似于這樣的原型那只能說心疼你們一秒。）那么問題來(lái)了，大家在生活中一定見到過這兩種原型的app。左邊這個(gè)很常見，比如斗魚tv這些直播平臺(tái)，早期閑魚、網(wǎng)易嚴(yán)選和今日頭條等都是用的這種感覺；右邊這個(gè)就更常見了，不論是點(diǎn)餐平臺(tái)（美團(tuán)、百度、餓了嗎），還是大型電商（京東、淘寶）你都可以看到它。
那么問題來(lái)了，嘗試分析一下，上面這兩種形式到底有什么優(yōu)劣呢？
第一件事應(yīng)該想到的是如果需要采用右邊的排列形式就必須要控制標(biāo)簽（tag）的字?jǐn)?shù)，你懂我是什么意思吧？比如今天有個(gè)運(yùn)營(yíng)跳出來(lái)說我們做一個(gè)新的標(biāo)簽把名字叫“酸酸甜甜就是我”。產(chǎn)品一定特別崩潰，原因如下圖所示。
第二，由于右邊的標(biāo)簽占據(jù)了推薦貼的位置，導(dǎo)致推薦貼可能沒有左邊的那種展現(xiàn)形式更加醒目。但是相對(duì)的，右邊的優(yōu)勢(shì)在于，由于豎向排列可以讓一個(gè)屏幕顯示更多的標(biāo)簽，這一點(diǎn)就需要取舍，比如一個(gè)產(chǎn)品的初期沒準(zhǔn)備放這么多切換標(biāo)簽的話，還是建議用左邊那種。
更深層次的，外賣產(chǎn)品之所以用右邊這種形式是因?yàn)榱η笠黄琳故靖嗟牟?，而且外賣產(chǎn)品的左側(cè)標(biāo)簽一般是一家店鋪的菜的品類，用戶下滑菜品配合點(diǎn)擊品類，點(diǎn)完即走，很方便（京東和淘寶電商類平臺(tái)也是類似的）。但是比如早期的今日頭條只能采用左邊的這種形式，因?yàn)轭^條是需要用戶長(zhǎng)時(shí)間沉浸的，比如用戶選中一個(gè)“體育”的標(biāo)簽一般要看好久好久，用戶需要沉浸在這個(gè)標(biāo)簽下的內(nèi)容中，那這個(gè)時(shí)候顯然用右邊這種設(shè)計(jì)方式讓標(biāo)簽常駐屏幕左側(cè)是不合適的。
基于以上分析，作為內(nèi)容+電商平臺(tái)的“什么值得吃”應(yīng)該選用左邊這種設(shè)計(jì)形式。
好，“什么值得吃”這個(gè)虛擬的例子就說到這里，主要是讓大家明白內(nèi)容和形式之間的關(guān)系，只有你們明白了這個(gè)，才可以正式進(jìn)入本章的主題——app的視覺美成因分析。
4.app的視覺美成因分析
首先來(lái)看結(jié)論。一款app讓你感覺到長(zhǎng)得美，一定是團(tuán)隊(duì)在兩個(gè)方面下功夫了——第一是內(nèi)容的視覺優(yōu)化，第二是形式的視覺優(yōu)化。
我先來(lái)給你們看兩張圖，讓你們感受一下什么叫內(nèi)容的視覺優(yōu)化。
你們可以看到左右兩張圖，左邊是Enjoy的精選頁(yè)，右邊是我隨手糟蹋的，大家會(huì)發(fā)現(xiàn)其實(shí)信息內(nèi)容一模一樣，但是左邊的和右邊的視覺設(shè)計(jì)差距大家一眼就能看出來(lái)吧。如果出現(xiàn)右邊這樣的UI稿，那只能說明這個(gè)團(tuán)隊(duì)在內(nèi)容的視覺優(yōu)化上面不用心！以上就是內(nèi)容的視覺優(yōu)化的作用。關(guān)于內(nèi)容當(dāng)中的圖片，其實(shí)大家都有直觀感受：一款app允許用戶自定義的圖片越多，這款app視覺就一定越難把控。原因很簡(jiǎn)單，因?yàn)橛脩糇远x的信息里面，文字信息我們是可以通過限制字段和select（選擇）去控制的，但是對(duì)于圖片來(lái)說，哪怕控制了用戶自定義圖片的尺寸，我們也無(wú)法控制這些圖片的質(zhì)量。大家去看一下秒拍這款app，它的框架設(shè)計(jì)做得很棒，包括一些empty status（無(wú)內(nèi)容狀態(tài)頁(yè)）的小圖標(biāo)繪制都很棒，但是我們打開app的時(shí)候，首頁(yè)的內(nèi)容總是參差不齊，差強(qiáng)人意。同理還有閑魚這款app， UI框架做得很漂亮，但是內(nèi)容頁(yè)面總會(huì)顯得沒那么“高大上”。
Enjoy，自如、氧氣、想去以及Gilt、美團(tuán)等這些輕量電商或者租房app都選擇花一大筆成本自己聘請(qǐng)一批或全職或兼職的攝影師的原因，就是為了得到符合自己規(guī)范的優(yōu)質(zhì)內(nèi)容圖片（比如你們?nèi)タ醋匀绲姆吭葱畔⒄掌揪褪悄欠N樣子，氧氣的內(nèi)衣樣片背景永遠(yuǎn)是白色）。
我之前做過一款旅行游學(xué)類app，在立項(xiàng)之初我們的圖庫(kù)里面就已經(jīng)有了幾萬(wàn)張高質(zhì)量有版權(quán)的攝影師作品，然后在設(shè)計(jì)的過程中大膽采用流式布局（類似于今天開眼app），大量展示優(yōu)質(zhì)圖片，才使得在2015年初那個(gè)時(shí)期我們的UI風(fēng)格比較具有鮮明的特色。
其實(shí)這也是一個(gè)產(chǎn)品團(tuán)隊(duì)需要深思熟慮的點(diǎn)：
·比如旅行app，一定要有大量?jī)?yōu)質(zhì)的圖片作為依托才可能美。
·比如淘寶這種體量的大型電商，那除了盡可能控制圖片質(zhì)量以外，更多的應(yīng)該在優(yōu)化專題和banner上，并且告訴入駐商家（用戶）上傳優(yōu)質(zhì)的圖片更容易獲取用戶流量從而轉(zhuǎn)化為成訂單。
·比如知乎、貼吧之類這樣的問答和社區(qū)，用戶上傳的圖片五花八門千奇百怪，那我們可以考慮在首頁(yè)列表展示的時(shí)候就壓根不要展示圖片……
那是不是內(nèi)容的視覺優(yōu)化只包含圖片的優(yōu)化呢？其實(shí)不是的，除了圖片的視覺優(yōu)化以外，icon的優(yōu)化、文字的視覺優(yōu)化這些都是很重要的。
關(guān)于icon的優(yōu)化大家應(yīng)該已經(jīng)看過足夠多的文章在這里我就不贅述了，比如線性icon里面不能摻入塊狀icon，負(fù)空間icon里面不應(yīng)突然出現(xiàn)一個(gè)奇怪的漸變icon。我有一點(diǎn)心得可以分享，比如大家畫了一個(gè)2px的線性圖標(biāo)用于@2x，那在plus iPhone 的plus機(jī)型，6p 7p 8p都叫plus上面應(yīng)該要手動(dòng)調(diào)整一下圖標(biāo)變成3px而不是用png自動(dòng)生成，否則會(huì)有虛邊（除非你們的工程師使用的是svg的iconfont）。
關(guān)于文字的視覺優(yōu)化，幾乎市面上的所有app，只要涉及文字內(nèi)容的排版，毫無(wú)例外都做得很好了。從根源上出發(fā)，為什么一個(gè)設(shè)計(jì)師需要去不厭其煩像個(gè)工匠一樣折磨開發(fā)調(diào)整字體大小間距粗細(xì)什么亂七八糟的東西？其實(shí)，字體視覺優(yōu)化去達(dá)到的目的主要有兩點(diǎn)：
（1）輔助視覺對(duì)焦
（2）減輕視覺壓力
第二點(diǎn)沒什么好說的了，大家應(yīng)該都明白，主要說第一點(diǎn)，視覺對(duì)焦這個(gè)事情是這樣的，我們?cè)谝粋€(gè)界面中，如果不出現(xiàn)特別突兀的信息，正常人眼一般是從左到右，從上到下的順序閱讀。
比如上圖是一個(gè)閱讀界面，所有問題都沒有特別突兀的地方。我們把界面做一個(gè)高斯模糊去分析視覺焦點(diǎn)，會(huì)發(fā)現(xiàn)整個(gè)頁(yè)面呈現(xiàn)很平和，所以，這個(gè)頁(yè)面的閱讀順序應(yīng)該是一行一行地閱讀文字，也就是從上到下，從左到右。
但是，這只是頁(yè)面形式很平的情況，舉個(gè)沒那么平的例子。
上圖是知乎的一個(gè)頁(yè)面，我們把它去色并且高斯模糊去分析它的視覺焦點(diǎn)。大家會(huì)發(fā)現(xiàn)其實(shí)視覺焦點(diǎn)是加粗加大的標(biāo)題字體和上面的小頭像構(gòu)成的。
這就是使用文字優(yōu)化去輔助視覺對(duì)焦。我不妨再舉一例，大家來(lái)看下面的2016年5月左右的氧氣app截圖。
左邊是氧氣的原UI，右邊是我做的對(duì)比圖。顯然，關(guān)于文字優(yōu)化輔助視覺對(duì)焦這一點(diǎn)，氧氣的設(shè)計(jì)師深諳此道。他們沒有按照右邊那種傳統(tǒng)辦法設(shè)計(jì)這個(gè)頁(yè)面，而是把每一個(gè)深夜話題的題目都變成了一張圖，變成一張圖還不算，還在這張圖上面用淺綠色“劃了重點(diǎn)”。這樣雖然加大了設(shè)計(jì)師的工作量，但是這個(gè)頁(yè)面正是因?yàn)檫@樣的處理，能讓用戶第一眼聚焦到標(biāo)題上。
關(guān)于內(nèi)容的視覺優(yōu)化，我來(lái)總結(jié)一下吧。
app內(nèi)容是集成在app中，所有可被感知圖片、文字、聲音合集。那么內(nèi)容的視覺優(yōu)化主旨在于通過圖片，文字，圖形（icon）等的優(yōu)化，去使得app更加易讀、易用和美觀。
說完了內(nèi)容的視覺優(yōu)化，我們?cè)倏匆幌滦问降囊曈X優(yōu)化案例。按說只要內(nèi)容都已經(jīng)優(yōu)化好了，表現(xiàn)內(nèi)容的形式不是排得特別爛，視覺效果展現(xiàn)出來(lái)應(yīng)該都不錯(cuò)。我們?cè)僦貜?fù)一遍app形式的定義——能更好地承載內(nèi)容，使內(nèi)容更好地被感知的方式。
我們?cè)撊绾稳ヅ帕胁煌膬?nèi)容讓它們更好地被感知呢？
這里面最常見的方法就是UI組件化設(shè)計(jì)，關(guān)于UI組件化設(shè)計(jì)我個(gè)人的定義是一款app里面同樣形式排列但是不同內(nèi)容的單元。這樣的例子不勝枚舉，我們每天都見到的最常見的一個(gè)組件化設(shè)計(jì)是微信里的每一個(gè)table view （表格視圖）。
大家打開你們的微信，可以看到其實(shí)微信的聊天列表的每一個(gè)單元都是由固定的內(nèi)容組成的。內(nèi)容包含一張圖（頭像），兩段文字（名字和信息），一段時(shí)間組成。
再看以下兩個(gè)頁(yè)面。
先看左面這個(gè)頁(yè)面，雖然第二個(gè)品牌故事被遮擋了很多，但是由于我們看到了第一個(gè)GUCCI的banner之后，用戶心理預(yù)期就有了，用戶左滑一下屏幕大概率出現(xiàn)的也是這樣形式的不同內(nèi)容。
再看右邊這張圖，一個(gè)app的每一個(gè)專題都是以一本雜志的形式呈現(xiàn)的，所以當(dāng)你看到這個(gè)頁(yè)面的時(shí)候，用戶心里會(huì)有“我左滑右滑都是一本專題書”的預(yù)期。
在設(shè)計(jì)過程中，我們往往會(huì)把相同屬性的內(nèi)容設(shè)計(jì)成同一形式。這樣做有什么優(yōu)點(diǎn)呢？最大的優(yōu)點(diǎn)是減少用戶認(rèn)知負(fù)擔(dān)，使得內(nèi)容更好地被感知。
舉個(gè)大家都懂的格式塔的例子。
看上圖A，大家都知道接下來(lái)一個(gè)一定是正方形，但看上圖B，下一個(gè)別說你們不知道是什么，我也不知道。格式塔相似律告訴我們，人們?cè)谥X時(shí)，對(duì)刺激要素相似的項(xiàng)目，只要不被接近因素干擾，會(huì)傾向于把它們聯(lián)合在一起。
那么我們就很容易解釋下圖。
大家看到這里是不是很熟悉？聯(lián)系上下文，現(xiàn)在應(yīng)該知道為什么市面上的app都這么設(shè)計(jì)了吧？還不就是為了讓用戶更好地接受信息。
5.總結(jié)
一切UI設(shè)計(jì)本質(zhì)上是為了更好地展現(xiàn)信息。
更好地展現(xiàn)信息是為了更好地指引用戶完成交互操作，從而讓用戶更好地去接收信息并完成一定功能目的。
本章一直在講述app信息呈現(xiàn)上的視覺優(yōu)化。其實(shí)視覺優(yōu)化也好，邏輯優(yōu)化、交互優(yōu)化也罷，都是為了使得app更加好用、易用、有效。
在我剛開始接觸UI設(shè)計(jì)的時(shí)候，也曾經(jīng)沉迷dribbble，不斷模仿那些大師們的驚艷界面。在長(zhǎng)達(dá)一兩年的學(xué)習(xí)和工作中，我一直認(rèn)為UI設(shè)計(jì)師的本職工作就是畫一個(gè)漂亮的殼子，把信息裝進(jìn)去然后能讓app變得更好看而已。
但是后來(lái)我完全不這樣想，如果現(xiàn)在讓我評(píng)價(jià)一款app的UI，我可能真正最看重的那個(gè)維度已經(jīng)不是“視覺感覺”上的好看，而是“視覺邏輯”上的嚴(yán)謹(jǐn)和“視覺風(fēng)格”上的一體化，比如分割線，比如icon的樣式，比如tableview（表格視圖）的設(shè)計(jì)，比如字體的主次對(duì)比等。
當(dāng)我沒有理由的畫一條分割線，只為了分割兩個(gè)也不知道是啥的元素時(shí)，當(dāng)我沒有理由地就是想要為卡片化組件加上一個(gè)box-shadow（陰影）時(shí)，當(dāng)我沒有理由的設(shè)計(jì)一個(gè)奇怪的交互方式還硬說它特別好用時(shí)，我都在警醒自己一句話：每一個(gè)UI界面的設(shè)計(jì)都應(yīng)該被賦予應(yīng)有的理由。希望以此共勉。
藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
整理了一份UI設(shè)計(jì)師怎么整理自己的作品集，希望能給正在準(zhǔn)備作品集的你一點(diǎn)小小的幫助，大家互相進(jìn)步^_^
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
mongoose保存數(shù)據(jù)：
如果成功，則可以獲取到保存在數(shù)據(jù)庫(kù)的值，但是如果保存數(shù)據(jù)失敗，則會(huì)拋出異常，好在save可以傳入一個(gè)回調(diào)函數(shù)，用法如下：
我們希望根據(jù)結(jié)果獲取到不同的值，但是此時(shí)save返回的是undefined，因?yàn)閟ave中的回調(diào)函數(shù)是一個(gè)異步操作
使用try catch：
注意：在async函數(shù)中才可以這么使用，因?yàn)閍wait只能用在async函數(shù)中
示例：(注冊(cè)功能)
user.model.js
service.js
controller.js
const save = new Model(data).save()
const save = new Model(data).save((err, result)=>{ if(err){ // 保存失敗執(zhí)行的操作
}else { // 保存成功執(zhí)行的操作
}
})
解決方法：
try{
const save = await new Model(data).save();
// 保存成功執(zhí)行的操作 return ... }catch(err){
// 保存失敗執(zhí)行的操作 return ... }
const mongoose = require("mongoose"); const port = process.env.PORT || "8899"; const UserSchema = mongoose.Schema({
userName: {
type: String,
unique: true },
passWord: String,
createTime: {
type: Date, default: Date.now()
},
updateTime: {
type: Date, default: Date.now()
}
}, {
timestamps: {
createAt: "createTime",
updateTime: "updateTime" }
});
module.exports = mongoose.model("USER", UserSchema);
const User = require("./user.model);
class User{
async login(user){
try{
const result = await new User(user).save();
// 其他操作，如發(fā)送注冊(cè)郵件
return { success: true }
}catch(err){
return { success: false, message: "用戶名或密碼錯(cuò)誤" }
}
}
}
moduel.exports = new User();
const server = require("./server); async login(){ // 首先獲取請(qǐng)求中攜帶的用戶信息 const result = await server.login(user);
if(result.success){ // 注冊(cè)成功執(zhí)行的操作 }else { // 注冊(cè)失敗執(zhí)行的操作 }
}
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
列表時(shí)間排序到底應(yīng)該正序還是倒序？哪種體驗(yàn)會(huì)更好？各大知名產(chǎn)品都是如何做的？
前陣子正好做到了一個(gè)類似“申請(qǐng)通知“的功能，因?yàn)樯婕暗搅斜?，所以要考慮列表的排序規(guī)則，那么問題來(lái)了，要用哪種排序規(guī)則（拼音、時(shí)間…）？
當(dāng)然，這里肯定會(huì)用時(shí)間排序，那么按照時(shí)間的正序（新的通知在下面）還是倒序（新的通知在上面）？以下將進(jìn)行一個(gè)系統(tǒng)的分析，列表時(shí)間排序到底要正序還是倒序？
我們可以先看下市場(chǎng)上的產(chǎn)品都是怎么做的，在這里我將這些產(chǎn)品分成了兩類（可能不全，這里不談評(píng)論頁(yè)面哈）：
一般由產(chǎn)品推給用戶，可能是產(chǎn)品運(yùn)營(yíng)通知，也可能是其他用戶發(fā)生了一些操作等。
看了很多產(chǎn)品的例子，這里就不全部列出了，幾乎大部分的通知列表都是按照時(shí)間倒序，只有網(wǎng)易馬上辦和拼多多是正序。
內(nèi)容更新相對(duì)比較頻繁：
幾乎所有新聞資訊類都是這種類型的列表，采用的都是時(shí)間倒序。
提及微信大家對(duì)微信新版本的一大改動(dòng)肯定非常熟悉了，那就是訂閱號(hào)的變化，微信把用戶關(guān)注的所有訂閱號(hào)的新消息拿出來(lái)放到一個(gè)頁(yè)面——訂閱號(hào)消息，它的排序是倒序，而其他具體的訂閱號(hào)內(nèi)部歷史消息是正序，另外新的好友申請(qǐng)消息頁(yè)面是倒序。
那么微信的這些模塊為什么排序規(guī)則不一樣呢？背后的原因是什么呢？我個(gè)人認(rèn)為有幾點(diǎn)原因：
1）畢竟微信主體功能是IM，那么其他的模塊都是附屬，不是主要功能，可能騰訊新聞的根本目的就是為了給騰訊新聞APP導(dǎo)流。
2）將其他的模塊做成訂閱號(hào)模式在產(chǎn)品層面一致性和復(fù)用性很高，既保證了體驗(yàn)一致性，又減少了開發(fā)成本。
綜上所述，微信內(nèi)部列表排序規(guī)則是根據(jù)具體場(chǎng)景和功能決定的，其實(shí)都可以講得通，不過單純就某些模塊的體驗(yàn)來(lái)講卻是有些勉強(qiáng)。感興趣的話，大家可以看看支付寶，它的內(nèi)部所有的列表高度一致，都是按照倒序，包括它的生活號(hào)（和微信的訂閱號(hào)很像），這里就不講了。
釘釘作為一款企業(yè)級(jí)IM產(chǎn)品，大家也許并不陌生，它的功能可謂相當(dāng)復(fù)雜，涵蓋了很多模塊，已然做成了一個(gè)大的平臺(tái)生態(tài)系統(tǒng)，那么是不是因?yàn)楣δ艿膹?fù)雜導(dǎo)致了內(nèi)部一些列表的排序規(guī)則各不相同呢？
說實(shí)話我是有些懵的，比如其他大部分產(chǎn)品的通知都是倒序排列，而釘釘就是正序，那如果說釘釘有自己的產(chǎn)品規(guī)則和邏輯的話，為啥有些類似通知的頁(yè)面排序又是倒序？
這個(gè)實(shí)在講不通，而且場(chǎng)景和功能層面這些列表其實(shí)還是比較相近的，那唯一能解釋的可能就是互聯(lián)網(wǎng)界經(jīng)常說的——“這些模塊不是一個(gè)團(tuán)隊(duì)做的”。
綜上，大家可以看到，基本大部分產(chǎn)品都是采用時(shí)間倒序，也就是的內(nèi)容在上面，也有小部分采用正序，那么為什么會(huì)按照這樣的邏輯呢？我進(jìn)行了幾點(diǎn)分析猜測(cè)：
藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
想做好一個(gè)好的UI設(shè)計(jì)師除了應(yīng)該具有一定的審美能力，還要了解整個(gè)產(chǎn)品的開發(fā)過程，因?yàn)槟壳皣?guó)內(nèi)的軟件行業(yè)還不能對(duì)UI設(shè)計(jì)形成應(yīng)有的重視度，所以對(duì)我們的要求就更高了，你要能作出奪人眼球的東西，還要站在用戶的角度充分了解他們的需求和使用習(xí)慣，因?yàn)橐话愕能浖镜腢I設(shè)計(jì)師只有一個(gè)或者幾個(gè)也都是孤軍奮戰(zhàn)，而且經(jīng)常會(huì)碰見沒有經(jīng)驗(yàn)的TEAM LEADER,不懂得協(xié)調(diào)你和其他團(tuán)隊(duì)成員的工作，所以你還要與團(tuán)隊(duì)成員充分溝通，來(lái)獲得設(shè)計(jì)中所需要的基本信息，要有耐心有好脾氣，做界面設(shè)計(jì)的工具一般有PS、AI、FH、CD、c4d、（至少一個(gè)），Dearweaver、FLASH HEML；編程方面最好能跟程序員同步，懂一點(diǎn)ASP JSP等軟件開發(fā)語(yǔ)言、還有開發(fā)壞境、服務(wù)器種類；還要耐得住寂寞，在漫長(zhǎng)的項(xiàng)目開發(fā)過程中，你的工作可能只是前期，到了后面可能會(huì)有很多的空間時(shí)間，用來(lái)學(xué)習(xí)充電是不錯(cuò)的選擇。
嗯，首先呢，這是我從零基礎(chǔ)到現(xiàn)在老司機(jī)寫的一篇小經(jīng)驗(yàn)文章，也是我首次發(fā)表文章，廢話不多說，進(jìn)入主題。
目前有太多太多的同學(xué)被UI這個(gè)行業(yè)給吸引了過來(lái)，都紛紛進(jìn)軍UI了。但是選擇了進(jìn)軍UI，當(dāng)然就要開始學(xué)習(xí)了，我相信有很多同學(xué)挺迷茫的，迷茫是在于選擇培訓(xùn)班去培訓(xùn)呢，還是自己在家自學(xué)。在這里我個(gè)人建議，如果經(jīng)濟(jì)不差的話，你可以去選擇一家較好的培訓(xùn)機(jī)構(gòu)學(xué)習(xí)，這樣也比較有可信度些，如果你實(shí)在是幾千塊錢都沒有，分期幾百塊錢一個(gè)月都有壓力的話，那么我建議你還是自學(xué)好了。（老司機(jī)：為自己學(xué)習(xí)千萬(wàn)不要想著省幾塊錢）
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
重復(fù)可以使畫面秩序化、整齊化，形成和諧、富有節(jié)奏感的視覺效果，更加有利于人們加強(qiáng)對(duì)畫面的記憶。在平面設(shè)計(jì)中，重復(fù)構(gòu)成是常用的一種構(gòu)成方法，通過重復(fù)可以使畫面達(dá)到和諧、統(tǒng)一的視覺效果，并能加強(qiáng)給人的印象，也可以達(dá)到一種有規(guī)律的節(jié)奏感和形式美感。
排版的四大原則：對(duì)比、對(duì)齊、親密性、重復(fù)，重復(fù)在排版中也占據(jù)了一席之地，可見它在設(shè)計(jì)中分量是不可小覷的。
格式塔原理：接近性、相似性、連續(xù)性、封閉性、對(duì)稱性、主體/背景、共同運(yùn)動(dòng)，格式塔原理中的對(duì)稱性就是重復(fù)的一種表現(xiàn)方式；格式塔原理中的相似性算是重復(fù)中自帶的一種突變。
重復(fù)是設(shè)計(jì)中最基本的形式。在同一設(shè)計(jì)中，相同的形象出現(xiàn)過兩次或兩次以上就形成了重復(fù)。
在產(chǎn)品設(shè)計(jì)中重復(fù)的元素有大小、形狀、配色、間距、組件、圓角值；在交互層面重復(fù)的元素有位移（方向）、旋轉(zhuǎn)、縮放、不透明度、相同屬性交互要一致。
在產(chǎn)品設(shè)計(jì)的前期設(shè)計(jì)師需要輸出界面設(shè)計(jì)，為了方便下游前端工程師更好的規(guī)范和適配，也要保證產(chǎn)品后期上線產(chǎn)品視覺稿的高度還原，這就要求設(shè)計(jì)師輸出一整套產(chǎn)品的視覺和交互規(guī)范。
重復(fù)配色
在 app store 的頁(yè)面中使用了相同的顏色進(jìn)行提醒，方便用戶快速查找和點(diǎn)擊，整體的藍(lán)色又給人理性的感覺，看到付費(fèi)app 的好評(píng)數(shù)可以看出是因?yàn)楫a(chǎn)品好才推薦你進(jìn)行理性消費(fèi)。
重復(fù)大小
INS 主頁(yè)第一排頭像相同大小進(jìn)行重復(fù)排列，與內(nèi)容的人物頭像有大小對(duì)比之分；INS 搜索頁(yè)采用了九宮格布局，為了重復(fù)中有變化它把右邊的四個(gè)方格合并成一個(gè)內(nèi)容展示區(qū)域，推薦好的熱門視頻。
重復(fù)間距
Airbnb 界面中的間距非常規(guī)范，首頁(yè)大體采用了谷歌里面的8px 原則，每個(gè)間距之間的規(guī)范很多1:2的比例關(guān)系。好的比例規(guī)范會(huì)給界面帶來(lái)簡(jiǎn)潔大氣的感覺。
重復(fù)組件
（如圖標(biāo)注）INS 界面中用了統(tǒng)一組件，相同的圓角和高度規(guī)范又給畫面增加了統(tǒng)一性和連貫性。
在相同的形象重復(fù)出現(xiàn)時(shí)，嘗試去改變某一形象的形狀、顏色、大小、不透明度等來(lái)豐富畫面時(shí)我們稱之為突變。
格式塔原理中的相似性也是重復(fù)中突變的一種形式。
在產(chǎn)品設(shè)計(jì)中我們運(yùn)用的突變的目的很簡(jiǎn)單就是為了讓其更加突出，多用于區(qū)分當(dāng)前狀態(tài)、選中狀態(tài)和默認(rèn)狀態(tài)。
banner輪播
banner輪播圖上面的提示狀態(tài)會(huì)根據(jù)當(dāng)前狀態(tài)和默認(rèn)狀態(tài)進(jìn)行區(qū)分，把當(dāng)前狀態(tài)進(jìn)行變化從而進(jìn)行凸顯出來(lái)。
導(dǎo)航欄分類
導(dǎo)航欄分類上面的提示狀態(tài)也是根據(jù)當(dāng)前狀態(tài)和默認(rèn)狀態(tài)進(jìn)行區(qū)分，把當(dāng)前狀態(tài)進(jìn)行變化從而進(jìn)行凸顯出來(lái)。
按鈕
在登錄注冊(cè)頁(yè)面中，我們會(huì)通過大的色塊凸顯登錄按鈕，引導(dǎo)用戶快速登錄進(jìn)入到 app 里面。也減少了用戶的思考過程，符合大腦的惰性。
但是在很多 windows系統(tǒng)中，卸載軟件時(shí)會(huì)跟你玩文字游戲，會(huì)用非、否、不是等誘導(dǎo)你作出錯(cuò)誤的判斷。
feed流
feed流是產(chǎn)品中持續(xù)更新并呈現(xiàn)給用戶內(nèi)容的信息流。feed流在產(chǎn)品展現(xiàn)形式有列表、瀑布流、卡片形式。
站酷首頁(yè) feed流里面會(huì)把內(nèi)容分為作品和文章，之前版本中的作品和文章的樣式是一樣的，新版本中重點(diǎn)是推作品，當(dāng)文章出現(xiàn)時(shí)通過改變文章的排版進(jìn)行區(qū)分，重復(fù)里面又帶有變化。
多少元素排列可以形成節(jié)奏感，一般來(lái)說是3個(gè)或3個(gè)以上，兩個(gè)你不能說是節(jié)奏感只能說它是重復(fù)。當(dāng)3個(gè)或3個(gè)以上整齊的排列就會(huì)形成一種節(jié)奏感。
左右滑動(dòng)
（如圖來(lái)自u(píng)istar）界面中三個(gè)書籍整齊的排列在一起，可以通過左右滑動(dòng)來(lái)獲取更多的書籍。在使用左右滑動(dòng)效果時(shí)，應(yīng)考慮元素的數(shù)量，盡量不要超過10個(gè)以上。
列表頁(yè)
（如圖來(lái)自u(píng)istar）列表頁(yè)面整齊的排列在一起有一定的節(jié)奏感，通過改變 icon 的配色來(lái)豐富畫面。
元素在排列的過程中有形狀、顏色、大小、不透明度等有規(guī)律的變化就形成了一種韻律感。在動(dòng)效上主要還是通過位移、放大縮小、旋轉(zhuǎn)、不透明等變化來(lái)制作界面動(dòng)畫。
最美有物
最美有物app 的畫報(bào)界面中，通過改變每個(gè)界面的大小比例有序的排列在一起，通過上下滑動(dòng)可以快速瀏覽標(biāo)題，進(jìn)行查找翻閱，整個(gè)過程很流暢，整個(gè)界面有流動(dòng)性和韻律感。
圖表
圖表在設(shè)計(jì)的時(shí)候通過不同顏色來(lái)區(qū)分不同的時(shí)間段，線條錯(cuò)落有致的排列增加了界面的韻律感。
配色
△ 來(lái)自Prakhar Neel Sharma和crisssamson
這兩個(gè)作品都是通過色彩按照紅橙黃綠青藍(lán)紫規(guī)律運(yùn)用到界面中的背景和列表中，增加了畫面的豐富感和韻律感。
重復(fù)在動(dòng)效中如何運(yùn)用才會(huì)有韻律感？
界面動(dòng)效中主要分成當(dāng)前狀態(tài)動(dòng)效變化和轉(zhuǎn)場(chǎng)動(dòng)效變化，界面中的元素a1對(duì)b1、a2對(duì)b2、a3對(duì)b3信息對(duì)等，能幫助界面做出很有韻律感的動(dòng)效。
重復(fù)可以使畫面秩序化、整齊化，形成和諧、富有節(jié)奏感的視覺效果，更加有利于人們加強(qiáng)對(duì)畫面的記憶。
重復(fù)、突變、節(jié)奏感、韻律幾種不同的方式都是存在于產(chǎn)品當(dāng)中的，幾種不同的美感可以同時(shí)存在的，只不過它適應(yīng)不同人群的審美能力，審美能力高一點(diǎn)的更喜歡一些變化，審美能力相對(duì)基礎(chǔ)更喜歡簡(jiǎn)單的重復(fù)。
所以畫面中不斷出現(xiàn)同樣的元素這叫重復(fù)，而在很多重復(fù)里面突然出現(xiàn)一個(gè)變化這叫突變，相同元素整齊的排列在一起這叫節(jié)奏感，而這些元素在排列的過程中有形狀、顏色、大小、不透明度等變化就形成了一種韻律感。
藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.b186.net
