六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

大廠怎么做設(shè)計(jì)?免費(fèi)送你騰訊高級(jí)設(shè)計(jì)師自用的交互稿模板!

2019-4-19    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

作為交互設(shè)計(jì)師,天天畫(huà)的就是交互稿了。而對(duì)于很多新手交互設(shè)計(jì)師以及想轉(zhuǎn)行做交互的同學(xué)們來(lái)說(shuō),一定都非常想知道大廠的交互設(shè)計(jì)師畫(huà)出來(lái)的交互稿具體是什么樣子的。

但和視覺(jué)稿不同,交互稿里面體現(xiàn)了太多產(chǎn)品本身的邏輯,難免涉及到一些敏感內(nèi)容,所以具體的交互稿不太適合直接分享,這就是比較尷尬的問(wèn)題了。

不過(guò),這不妨礙我為你們做一份交互稿模板。一來(lái)我自己也在用,二來(lái)可以幫助大家,何樂(lè)而不為。

但我必須重點(diǎn)強(qiáng)調(diào)一句話:框架是死的,人是活的,不一定要拘泥于某種形式,你可以根據(jù)自己的需要自由修改。

模版一:PPT  型的分頁(yè)交互稿

第一個(gè)是 PPT 型的分頁(yè)交互稿,這個(gè)樣式最早是從騰訊 CDC 團(tuán)隊(duì)流傳下來(lái)的,我在第二家公司的時(shí)候就從他們的博客中看到過(guò),當(dāng)時(shí)還用 InDesign 做過(guò)一個(gè)模板。而我現(xiàn)在所在的團(tuán)隊(duì)用的也是這個(gè),因此我過(guò)來(lái)后就自己重新用 Sketch 做了一版,方便以后使用。

1. 封面

封面很簡(jiǎn)單,就是文檔標(biāo)題和作者,頂部有一個(gè)通用的文檔標(biāo)題欄,上面的內(nèi)容包括:

  • 項(xiàng)目名稱:阿爾法項(xiàng)目(示意)
  • 頁(yè)面標(biāo)題:iOS 主界面框架(示意,根據(jù)每頁(yè)的內(nèi)容進(jìn)行變化)
  • 版本號(hào):1.0(每修改一次都要 + 0.1,當(dāng)然你也可以直接變成 2.0、3.0)
  • 修改日期:2018-07-24
  • 頁(yè)碼:分為當(dāng)前頁(yè)碼和總頁(yè)數(shù)

我在 Sketch 中為這個(gè)模板中需要改動(dòng)的內(nèi)容都定義了 Symbol,比如這個(gè)標(biāo)題欄,你只要選中之后,就可以在右邊的屬性面板中自定義里面的內(nèi)容。

2. 修訂記錄

修訂記錄這頁(yè),記錄了從文檔建立開(kāi)始,每次更新的主要內(nèi)容,以及相關(guān)人員,方便后期交接的時(shí)候給對(duì)應(yīng)的產(chǎn)品經(jīng)理、游戲策劃和設(shè)計(jì)師查看。有時(shí)候交互稿更新一次只是修改一小處地方,如果不備注對(duì)方就會(huì)很難找到,可能以后你自己都會(huì)遺忘。

這一塊我也定義了 Symbol 元件,你可以直接復(fù)制一行,然后修改里面的內(nèi)容,「更新內(nèi)容」的文本支持多行輸入。

3. 目錄

這種分頁(yè)型的文檔一定要有目錄,備注好每個(gè)模塊對(duì)應(yīng)的頁(yè)碼,否則十幾頁(yè)看下來(lái)都暈了,每次想找到對(duì)應(yīng)的界面還得重新翻一遍。

4. 內(nèi)容頁(yè)面

具體的內(nèi)容頁(yè)面才是交互稿的核心,一般會(huì)用小氣泡和箭頭進(jìn)行標(biāo)注,然后在右側(cè)用對(duì)應(yīng)的數(shù)字和它們對(duì)應(yīng),寫下詳細(xì)的交互說(shuō)明。

結(jié)構(gòu)可以有很多種,比如上面這種豎屏的界面可以是左右結(jié)構(gòu),如果是橫屏界面還可以是上下結(jié)構(gòu)等等,根據(jù)情況自由調(diào)整。文字段落的樣式我已經(jīng)定義好了,直接修改套用就行。

其中最重要的氣泡我也做了元件,選中之后直接在右邊修改數(shù)字即可。

5. 導(dǎo)出方式

使用這套模板做好交互稿后,使用 Sketch 的 File -> Export Artboards to PDF 即可將交互稿導(dǎo)出成 PDF 文檔。我很喜歡這個(gè)格式,與 PPT 相比,PDF 在任何平臺(tái)都可以通用,包括手機(jī)、Mac,不用特地裝什么軟件都能很好地打開(kāi)。

模版二:長(zhǎng)圖型的流程交互稿

另一種是更常見(jiàn)的交互稿形式,這也是我這幾年進(jìn)騰訊后一直使用的格式。

如果你曾經(jīng)用過(guò)上文介紹的 PPT 型模板,你一定會(huì)發(fā)現(xiàn):它的好處是 PDF 分頁(yè)格式非常整齊,比較適合一次性做一個(gè)大產(chǎn)品的交互功能介紹,而不適合小功能的頻繁修改。

今天介紹的這第二種,則是更加輕便快捷的類型。

1. 內(nèi)容模塊

這種長(zhǎng)圖型的交互稿,優(yōu)點(diǎn)很明顯:

  • 發(fā)揮空間大,可以直接在一片空白上盡情地闡釋每個(gè)界面、每個(gè)流程,展開(kāi)說(shuō)各種細(xì)節(jié)。
  • 分享和閱讀都很方便,最終格式是一張 PNG 長(zhǎng)圖,能隨手發(fā)給老板、產(chǎn)品經(jīng)理和其他相關(guān)同事,電腦手機(jī)都能看。
  • 不存在分頁(yè)和各種格式限制,所以畫(huà)起來(lái)和修改起來(lái)都很快,小迭代要的就是效率。

來(lái)看一張基本樣例:

它的結(jié)構(gòu)分為:

交互稿標(biāo)題、日期

按照項(xiàng)目、模塊和功能的方式命名(如:電腦管家 V12 -清理垃圾-深度清理圖標(biāo)化改版),可以地規(guī)范交互稿名稱,讓其他人很容易理解交互稿涉及的是什么內(nèi)容。

相關(guān)負(fù)責(zé)人

對(duì)應(yīng)的產(chǎn)品經(jīng)理,交互稿的作者,方便評(píng)審時(shí)或者交接后找人。

需求背景

簡(jiǎn)單介紹為什么要做這次設(shè)計(jì),出發(fā)點(diǎn)是什么,遇到了什么問(wèn)題。

主要界面

這次設(shè)計(jì)中,涉及到的所有主要界面,先陳列出來(lái)方便大家快速評(píng)審和討論,視覺(jué)接手后可以根據(jù)這些來(lái)進(jìn)行風(fēng)格設(shè)計(jì)。

流程說(shuō)明

有了主要界面后,我們還可能需要對(duì)一些操作流程進(jìn)行說(shuō)明,比如怎樣發(fā)送一條語(yǔ)音消息,怎樣刪除一條會(huì)話等等。

異常狀態(tài)

最后還要記得檢查一下,每個(gè)界面在沒(méi)有內(nèi)容時(shí)的空狀態(tài)、斷網(wǎng)時(shí)的異常狀態(tài),彈出各種通知的位置等等,千萬(wàn)不要等到開(kāi)發(fā)同學(xué)找你的時(shí)候才想起來(lái)。

上面所說(shuō)的,就是一份交互稿的常見(jiàn)內(nèi)容模塊了。

2. 模板使用

該模板是專門給 Mac 平臺(tái)的 Sketch 用的。

下載后(下載方式見(jiàn)文末),打開(kāi)你會(huì)看到這個(gè)界面:

里面的每個(gè)模塊我都做了 Symbol 元件,你只要選中就可以在右側(cè)更改內(nèi)容了。

比如下面的文檔基本信息:

我還把可能會(huì)用到的各種字體大小、顏色、對(duì)齊方式都做成了文字樣式:

選中文字后,在右側(cè)下拉框中選擇你要的樣式就好。

交互稿用的都是黑白灰,還有藍(lán)色作為標(biāo)注。

我一直用的這幾種,足夠用。

是不是很心動(dòng)?別著急,先把這個(gè) Sketch 文件保存成 Template(模板)。

然后,你就可以在新建文件時(shí),選擇從模板處新建,直接用這個(gè)模板開(kāi)始畫(huà)稿。

源文件下載

下載鏈接:https://pan.baidu.com/s/1Jrv7-JDyf2j2SDvvg0-wrA

提取碼:npq2

備用鏈接:https://pan.baidu.com/s/1yIMSWw7pJuHF4H3BgoyrPA

作者:WingST(寇敬),男,33歲,騰訊高級(jí)交互設(shè)計(jì)師、騰訊學(xué)院認(rèn)證講師,9 年工作經(jīng)驗(yàn)的資深互聯(lián)網(wǎng)人,曾任 MIG 桌面安全產(chǎn)品部軒轅設(shè)計(jì)組組長(zhǎng),目前在騰訊游戲 NEXT Studios 工作室負(fù)責(zé)《樂(lè)高無(wú)限》創(chuàng)造型沙盒游戲的用戶體驗(yàn)設(shè)計(jì)。

負(fù)責(zé)過(guò)的產(chǎn)品有騰訊電腦管家 V11.0、加速小火箭 V2.0、騰訊手游助手、騰訊網(wǎng)游助手等。曾在 OPPO 手機(jī)、金蝶軟件等企業(yè)工作,有著 PC、Web、移動(dòng)端等多平臺(tái)的豐富設(shè)計(jì)經(jīng)驗(yàn)。

結(jié)語(yǔ)

感謝大家的閱讀,末尾做個(gè)小廣告,我的新書(shū)《交互思維:詳解交互設(shè)計(jì)師技能樹(shù)》馬上就要上市了,這是我自己九年多來(lái)做交互設(shè)計(jì)師的經(jīng)驗(yàn)總結(jié),也是市面上第一本詳細(xì)介紹交互設(shè)計(jì)師所應(yīng)該掌握的職業(yè)技能的書(shū),適合所有希望了解交互、學(xué)習(xí)交互的設(shè)計(jì)師和產(chǎn)品經(jīng)理。同時(shí)書(shū)中也有我進(jìn)騰訊的成長(zhǎng)故事,以及一些個(gè)人工作和學(xué)習(xí)方法的分享,絕對(duì)物超所值 → https://item.jd.com/12576242.html

這是我所總結(jié)的「交互設(shè)計(jì)師技能樹(shù)」。

藍(lán)藍(lán)設(shè)計(jì)www.wnxcall.com )是一家專注而深入的界面設(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è)人資料

存檔