產品設計總結第一篇

由於設計沒時間，專案經理說看著做，這真讓人無語，所以我自己主動承擔了一個功能模組的設計工作。

個人感覺除了視覺上的設計和之前的統一，還要有加入互動設計，比如一些略細微的互動動畫，這樣開發人員完全看著做，而不用經常來找你問。

腳手架工具我選擇的是sketch + principle+zeplin。之所以選擇這個腳手架，是因為現在設計注重設計理念。應該用類似的腳手架提高工作效率，一些老牌的腳手架雖然功能全面但是太過於笨重。

看了之前設計的，字號，顏色，加上我對蘋果設計的一些理解。大致先總結除了一些我對於設計這個功能模組的規範。 有了這些東西大致看著視覺上比較統一。

然後是排版上大致遵循了幾個原則：

親密性原則，封閉性原則，簡潔原則，情感性原則，相似性原則。下面從一個效果圖來說明

體現親密性原則是從產品資訊中把學生證的資訊和快遞資訊相關的資訊歸類。分成了兩個大類，如果按照產品的意思一直按照順序排列，這樣就顯著太臃腫，可能不太想把資訊填完，整體看著比較混亂，最重要的是不夠清晰。

封閉性原則體驗在把不同的資訊分類，學生證資訊一類，學生證快遞資訊一類。用這種卡片樣式讓他們顯的獨立容易區分。

簡潔性原則體現在了
各個元素之間的間距簡潔，比如卡片左右上下是14px ，卡片內之間的元素是9px ,元素與卡片上下間距是14，並且元素之間的間距9px小於了元素與卡片間距14px。對齊的間距樣式不是太多。

字型顏色字號不是太多。比如名字主標題是17px 副標題補辦的原因是15px 備註性說明時間是13px

樣式簡潔去掉了分割，用這樣的卡片樣式加上了一點點輕微的懸浮陰影透明，顯著乾淨大氣。還有填寫學生資訊用一條線代表了輸入框比用一個矩形框顯著簡潔如下圖：

情感型原則體現在了制卡的狀態，用不同的顏色進行區分。比如接受預定，制卡中，制卡完成，顏色不同來區分這個訂單的狀態。

對比性原則就體現在瞭如下圖大標題小標題備註字號顏色的對比。

相似性原則體現在了比如同一級別的標題文字大小顏色相同。相同顏色的文字可以進行一些操作比如可點選選擇等。

一些產品方面的思考

第一點：學生證補辦可能存在多次補辦，所以可能存在多條，但是不會存在幾十條的。所以這個頁面是個列表，並且不需要載入更多的互動，再新增成功回來的時候重新整理一下狀態即可。在沒有學生證的時候給出空白頁提示並點選右上角按鈕進入新增頁面如下圖。

加入互動動效，利用了上述Pinciple 來設計，能很直觀的表達你要做的動效而非視覺上的東西下面看一個我做的效果。這個只是其實一個部分，比如一些複雜的效果，彈出支付卡片，設計一些炫酷的轉場動畫，載入動畫等等都可以來做，這裡只是舉個小例子。