第一章的主題是《揭開交互設計面紗》,分為下面3個小節的課程
- 1.1揭開交互設計面紗
- 1.2 玩轉Axure
- 1.3平臺設計規范與常見的設計模式
Chapter1.1主要介紹了交互設計的一些基礎知識,詳細記錄見日記chapter1.1我的日記記錄
chapter1.2 主要是實操部分,教我們如何正確的用Axure軟件制作交互稿,添加交互說明的常見方法。
作業有2個,作業1比較簡單,讓你繪制某信的交互設計稿,模仿建立站點地圖和一級導航下的5個頁面,作業2則是讓你繪制某信“發起群聊”的流程,這里需要用到一些高級的Axure的操作知識。我猜測老師的用意是讓我們從宏觀層面是讓我們去認識某產品頁面架構,從微觀層面讓我們去感知如何設計一個小交互細節。由于是實操為主,再加上本人用Axure也是不算新手了,所以就不做詳細記錄了。新手請去百度/google各種網站上豐富的教程,就努力在Axure上玩兒吧。
chapter1.3 這一節最這一章中最重要的內容,由于我部門沒有設有交互設計師,自己也從來沒有在設計規范和設計模式上有過系統的學習,而這節課老師詳細講解了IOS平臺&安卓平臺&Web端的一些設計模式和設計規范,再加上自己從外站收集的資料學習,受益匪淺。
————————————————以下是正文分割線——————
移動應用設計模式
設計規范 ?
請參考此文,記住一些常規的尺寸,字體等規范,如果需要了解更多就去閱讀兩平臺官方規范文檔吧~
設計模式
下面這張圖列出了移動應用常見且重要的元素
作為移動應用產品設計者,我們將這些零散的元素粗略的歸納成5個最主要的功能模塊,并對他們常見的設計模式做歸納總結
1.導航模式
? ?全局導航
- 選項卡設計:資訊、社交、購物等應用一般采用選項卡導航設計
- ?抽屜式設計:擴展了頁面空間,可以容納更多信息,信息聚焦
- ?卡片式設計:個性化呈現
- ? ?列表設計:強調信息層級
?- ? ?網格設計:信息扁平
次級導航?
列表設計:強調信息層級
網格設計:信息扁平
抽屜式設計:擴展了頁面空間,可以容納更多信息,信息聚焦
卡片式設計:個性化呈現
2.表單設計模式
登錄/注冊(下面幾種設計方式沒有優缺點之分,關鍵要看自己選擇)
分段式
直入式
卡片式(彈窗)
列表式
引導式
3.內容視圖模式
列表設計:強調信息層級
網格設計:展示型應用,如攝影,工具,不太關注頁面的層級關系
卡片式:展示型應用,如攝影,工具,不太關注頁面的層級關系
混合式:大型應用,充分展示產品信息,應用于大部分電子商務類APP,這幾種設計模式穿插使用
瀑布流:展示型APP,以獲取圖片,視覺信息為主
臨時視圖:用戶處理臨時性內容,
4.搜索設計模式:
自動匹配:應用廣泛,一般用在內容型APP中
分段式:應用在不同分類明確的APP,比如豆瓣小組/話題/圖書等,以分類關鍵詞區分
列表式: 搜索時候,根據算法進行有效的排序,更突顯信息層級。
網格式:偏展示類,信息層級不明顯。
混合式:大型APP,注重整體視覺,又注重整體的信息層級。
5.引導設計模式:
少用文字,多用圖,強化視覺信息
- 理念引導:扁平化設計結合簡練的文字闡述引用的亮點
- 功能引導:突顯產品核心功能點,并告訴你如何使用
- 綜合引導:兩者結合
Web界面設計模式
web東西太多太雜,所以一圖勝千言的甩一張圖吧。
——————————————筆記完的分割線—————————
參考資料:設計夾? / ?網易云課堂交互設計微專業