第一章的主題是《揭開(kāi)交互設(shè)計(jì)面紗》鸣皂,分為下面3個(gè)小節(jié)的課程
- 1.1揭開(kāi)交互設(shè)計(jì)面紗
- 1.2 玩轉(zhuǎn)Axure
- 1.3平臺(tái)設(shè)計(jì)規(guī)范與常見(jiàn)的設(shè)計(jì)模式
Chapter1.1主要介紹了交互設(shè)計(jì)的一些基礎(chǔ)知識(shí),詳細(xì)記錄見(jiàn)日記chapter1.1我的日記記錄
chapter1.2 主要是實(shí)操部分暮蹂,教我們?nèi)绾握_的用Axure軟件制作交互稿寞缝,添加交互說(shuō)明的常見(jiàn)方法。
作業(yè)有2個(gè)仰泻,作業(yè)1比較簡(jiǎn)單第租,讓你繪制某信的交互設(shè)計(jì)稿,模仿建立站點(diǎn)地圖和一級(jí)導(dǎo)航下的5個(gè)頁(yè)面我纪,作業(yè)2則是讓你繪制某信“發(fā)起群聊”的流程慎宾,這里需要用到一些高級(jí)的Axure的操作知識(shí)丐吓。我猜測(cè)老師的用意是讓我們從宏觀層面是讓我們?nèi)フJ(rèn)識(shí)某產(chǎn)品頁(yè)面架構(gòu),從微觀層面讓我們?nèi)ジ兄绾卧O(shè)計(jì)一個(gè)小交互細(xì)節(jié)趟据。由于是實(shí)操為主券犁,再加上本人用Axure也是不算新手了,所以就不做詳細(xì)記錄了汹碱。新手請(qǐng)去百度/google各種網(wǎng)站上豐富的教程粘衬,就努力在Axure上玩兒吧。
chapter1.3 這一節(jié)最這一章中最重要的內(nèi)容咳促,由于我部門(mén)沒(méi)有設(shè)有交互設(shè)計(jì)師稚新,自己也從來(lái)沒(méi)有在設(shè)計(jì)規(guī)范和設(shè)計(jì)模式上有過(guò)系統(tǒng)的學(xué)習(xí),而這節(jié)課老師詳細(xì)講解了IOS平臺(tái)&安卓平臺(tái)&Web端的一些設(shè)計(jì)模式和設(shè)計(jì)規(guī)范跪腹,再加上自己從外站收集的資料學(xué)習(xí)褂删,受益匪淺伤柄。
————————————————以下是正文分割線——————
移動(dòng)應(yīng)用設(shè)計(jì)模式
設(shè)計(jì)規(guī)范 ?
請(qǐng)參考此文站故,記住一些常規(guī)的尺寸,字體等規(guī)范捅伤,如果需要了解更多就去閱讀兩平臺(tái)官方規(guī)范文檔吧~
iOS和Android的app界面設(shè)計(jì)規(guī)范
設(shè)計(jì)模式
下面這張圖列出了移動(dòng)應(yīng)用常見(jiàn)且重要的元素
作為移動(dòng)應(yīng)用產(chǎn)品設(shè)計(jì)者轴术,我們將這些零散的元素粗略的歸納成5個(gè)最主要的功能模塊难衰,并對(duì)他們常見(jiàn)的設(shè)計(jì)模式做歸納總結(jié)
1.導(dǎo)航模式
? ?全局導(dǎo)航
- 選項(xiàng)卡設(shè)計(jì):資訊逗栽、社交、購(gòu)物等應(yīng)用一般采用選項(xiàng)卡導(dǎo)航設(shè)計(jì)
- ?抽屜式設(shè)計(jì):擴(kuò)展了頁(yè)面空間彼宠,可以容納更多信息鳄虱,信息聚焦
- ?卡片式設(shè)計(jì):個(gè)性化呈現(xiàn)
- ? ?列表設(shè)計(jì):強(qiáng)調(diào)信息層級(jí)
?- ? ?網(wǎng)格設(shè)計(jì):信息扁平
次級(jí)導(dǎo)航?
列表設(shè)計(jì):強(qiáng)調(diào)信息層級(jí)
網(wǎng)格設(shè)計(jì):信息扁平
抽屜式設(shè)計(jì):擴(kuò)展了頁(yè)面空間醇蝴,可以容納更多信息宣肚,信息聚焦
卡片式設(shè)計(jì):個(gè)性化呈現(xiàn)
2.表單設(shè)計(jì)模式
登錄/注冊(cè)(下面幾種設(shè)計(jì)方式?jīng)]有優(yōu)缺點(diǎn)之分,關(guān)鍵要看自己選擇)
分段式
直入式
卡片式(彈窗)
列表式
引導(dǎo)式
3.內(nèi)容視圖模式
列表設(shè)計(jì):強(qiáng)調(diào)信息層級(jí)
網(wǎng)格設(shè)計(jì):展示型應(yīng)用霉涨,如攝影,工具笙瑟,不太關(guān)注頁(yè)面的層級(jí)關(guān)系
卡片式:展示型應(yīng)用,如攝影往枷,工具框产,不太關(guān)注頁(yè)面的層級(jí)關(guān)系
混合式:大型應(yīng)用,充分展示產(chǎn)品信息秉宿,應(yīng)用于大部分電子商務(wù)類(lèi)APP戒突,這幾種設(shè)計(jì)模式穿插使用
瀑布流:展示型APP,以獲取圖片描睦,視覺(jué)信息為主
臨時(shí)視圖:用戶(hù)處理臨時(shí)性?xún)?nèi)容膊存,
4.搜索設(shè)計(jì)模式:
自動(dòng)匹配:應(yīng)用廣泛,一般用在內(nèi)容型APP中
分段式:應(yīng)用在不同分類(lèi)明確的APP忱叭,比如豆瓣小組/話題/圖書(shū)等隔崎,以分類(lèi)關(guān)鍵詞區(qū)分
列表式: 搜索時(shí)候,根據(jù)算法進(jìn)行有效的排序韵丑,更突顯信息層級(jí)爵卒。
網(wǎng)格式:偏展示類(lèi),信息層級(jí)不明顯埂息。
混合式:大型APP技潘,注重整體視覺(jué),又注重整體的信息層級(jí)千康。
5.引導(dǎo)設(shè)計(jì)模式:
少用文字享幽,多用圖,強(qiáng)化視覺(jué)信息
- 理念引導(dǎo):扁平化設(shè)計(jì)結(jié)合簡(jiǎn)練的文字闡述引用的亮點(diǎn)
- 功能引導(dǎo):突顯產(chǎn)品核心功能點(diǎn)拾弃,并告訴你如何使用
- 綜合引導(dǎo):兩者結(jié)合
Web界面設(shè)計(jì)模式
web東西太多太雜值桩,所以一圖勝千言的甩一張圖吧。
——————————————筆記完的分割線—————————
參考資料:設(shè)計(jì)夾? / ?網(wǎng)易云課堂交互設(shè)計(jì)微專(zhuān)業(yè)