架構(gòu)架構(gòu)，顧名思義就是框架結(jié)構(gòu)，信息和內(nèi)容有主次、有分類、有前后邏輯。什么樣的框架結(jié)構(gòu)能夠滿足業(yè)務(wù)和用戶兩者的需求，那就是一種好的框架。

好像又是一句正確的廢話。

舉個例子，書店里的書，如果按照常規(guī)主次、分類和邏輯來規(guī)劃的話，那估計就賺不到什么錢，但如果我們調(diào)研過經(jīng)常來逛書店的用戶群體特征的話，我們就可以重新調(diào)整書籍的分類擺放區(qū)域以及設(shè)定一些特殊的展示，比如用戶對某個類別下的書很感興趣，但是這個類別是屬于一個很小的分支，按照常規(guī)分類那只能在角落里，這時候就要單獨拿出來進(jìn)行擺放，才能提高曝光。但如果用戶想要什么都單獨放出來，整個結(jié)構(gòu)又會雜亂無章，所以信息架構(gòu)設(shè)計是一門繁瑣的學(xué)問。

所以，信息架構(gòu)設(shè)計離不開用戶的心智。我們常聽到的是，信息結(jié)構(gòu)可以分為自上而下而下或者自下而上，那和用戶心智有什么關(guān)系呢？我也用一個很通俗易懂的舉例告訴大家。

自上而下的意思就是，我把分類的類目標(biāo)簽分好了，你只需要把內(nèi)容根據(jù)自己認(rèn)為的分類放進(jìn)去就好，比如我給你蔬菜、水果和肉類三個標(biāo)簽，然后把帶有西瓜、胡蘿卜、西紅柿、桃子、豬肉、魚肉、雞肉….這樣的標(biāo)簽卡片交給你，讓你根據(jù)我分好的3個類目進(jìn)行歸類，是不是很簡單。

反過來，自下而上的意思就是我把標(biāo)簽卡片給你，讓你自己來分類。那有同學(xué)說，那不是很簡單，我也會分為蔬菜、水果和肉類啊。所以心智在這里就體現(xiàn)出重要性了，每一類用戶群體的心智是不同的，我可以按照物體本身的類目來分，也可以按照物質(zhì)的功能作用來分，比如西紅柿和雞蛋可以組成一道菜，不同的食材做出不同的菜肴或者菜系，我還可以按照食材的新鮮度來分，顏色來分…..

數(shù)字產(chǎn)品的UX設(shè)計師要學(xué)的東西很多，如果讓各位根據(jù)規(guī)范做做UI視覺，你仔細(xì)研究一下那些大廠產(chǎn)品的設(shè)計規(guī)律和細(xì)節(jié)，很快按葫蘆畫瓢自己就可以領(lǐng)悟出一些不錯的技法。但唯獨研究用戶心智以及如何將用戶與產(chǎn)品做到更加高效和緊密的連接，光靠界面精致是遠(yuǎn)遠(yuǎn)不夠的。

說到信息架構(gòu)，很多人覺得這個可能是產(chǎn)品工作者的范疇，但簡單琢磨一下，又覺得信息架構(gòu)和交互也是密不可分的，所以我們不要太糾結(jié)崗位帶來的界限，能力是沒有界限的，你只要有興趣和好奇心就挖的深入一點去學(xué)，總不能說，哦信息架構(gòu)師產(chǎn)品的活我不需要碰我就不去了解了，寫原型交互說明是交互的活，我是產(chǎn)品我也不管了，大家都這樣把自己的一畝三分地劃分的很清楚，那將來你們團(tuán)隊就不會有一個人來統(tǒng)籌大局。

如果只是講一個大概念，大家肯定會覺得味同嚼蠟，所以不妨來跟著我一起思考一個案例。

產(chǎn)品的功能規(guī)劃是比較宏觀的，這個不容易講，那么我們可以聚焦到某一個功能點，比如我們?nèi)绾卧O(shè)計一個舉報的功能。這時候讓你來設(shè)計這個功能的結(jié)構(gòu)，你會怎樣思考。現(xiàn)在只有這樣一個“概念”，對于舉報的入口、頁面劃分、內(nèi)容布局都完全沒有頭緒，該怎么設(shè)計呢？

萬事開頭難，關(guān)于框架結(jié)構(gòu)，總是會出現(xiàn)這幾種，比如樹狀結(jié)構(gòu)、線性結(jié)構(gòu)還有立體結(jié)構(gòu)以及自由結(jié)構(gòu)，大家直接根據(jù)字面意思理解就可以了，那么像舉報這樣的功能，是屬于一種比較支線并且使用頻率較低的功能，同時是一個快速用完即走的場景，所以也就不會涉及到立體以及自由結(jié)構(gòu)。

在做功能設(shè)計前，務(wù)必要對業(yè)務(wù)背景有足夠的了解。比如舉報入口，就像我剛說的，舉報是一個低頻、即用即走的支線功能，入口弱化就可以了。那如果現(xiàn)在換成我整個應(yīng)用產(chǎn)品就是為了做舉報而存在的呢，app的名字就叫“12315”還有“國家反詐中心”，這時候入口還是和之前一樣嗎，那肯定不是。

所以在前期就要帶著這些問題去思考：

1.為什么要做舉報功能

2.舉報誰/什么

3.舉報流程中需要包含哪些信息內(nèi)容

4.用戶的舉報場景是怎樣的

1.為什么要做舉報功能

這個問題對于信息架構(gòu)的影響在于，我們期望找到做該功能的原因，以及該功能在整個結(jié)構(gòu)中的優(yōu)先級

2.舉報誰/什么

舉報對象的不同對整個功能結(jié)構(gòu)也會有很大的變化，比如看下方的幾個案例分別是：愛奇藝、公眾號、追書神器、抖音。舉報對象的不同意味著舉報類型的不同與多少，同時還意味著舉報場景的深入還是只是為了輔助篩選優(yōu)質(zhì)內(nèi)容，最后決定了我們做交互是應(yīng)該用什么框架來搭建這個流程。

比如公眾號的舉報類型就非常多，并且還有很豐富的二級舉報類型，那么它和愛奇藝就不同，愛奇藝的舉報單純是為了更加粗略的希望通過篩選來判斷內(nèi)容是否優(yōu)質(zhì)，而公眾號對于文章的舉報會更加的嚴(yán)格和仔細(xì)，因為懲罰力度對于作者來說也比較嚴(yán)重所以該流程需要對舉報人的舉報內(nèi)容和類型要求更高。

再說追書神器，那這個舉報就更加“簡單了”，小說在上線之前就會通過編輯審核，基本上很少會出現(xiàn)低質(zhì)量內(nèi)容，但也不能沒有，那就做一個更加方便快捷的舉報流程即可。

3/4.舉報流程要包含哪些信息內(nèi)容和場景

信息內(nèi)容取決于用戶需求以及業(yè)務(wù)需求，比如愛奇藝在舉報流程中會增加一個專門針對版權(quán)內(nèi)容的申請刪除以及恢復(fù)刪除的入口。還有像12315在舉報時需要實名填寫舉報人信息以及處理單位選擇等等。同時，專門用來舉報的應(yīng)用還會有“舉報記錄”的查看，而其他應(yīng)用則并不會提供舉報記錄，這點很明顯吧。

所以基于前面這幾點的考慮，就可以把大致的框架劃分出來了：1.點擊舉報 2.選擇舉報類型 3.填寫舉報內(nèi)容 4.提交

這里劃分框架其實就是根據(jù)用戶的場景和行為來制定的，你看我寫的是點擊舉報而不是滑動舉報，寫的是選擇舉報類型而不是點輸入舉報類型，同時有了點擊舉報才能去選擇類型，而不能一上來就選擇舉報類型或者將填寫舉報內(nèi)容和選擇類型換一個順序。

當(dāng)然這些節(jié)點并不意味著就是一張張界面，因為你會發(fā)現(xiàn)有的產(chǎn)品把2、3做在一起，而有的則是分開。一般如果類型多，需要填寫的內(nèi)容復(fù)雜那就分開做成兩步，反之則合并。

那么在這里流程也是屬于信息架構(gòu)設(shè)計環(huán)節(jié)中的一部分，所以想要定義整個產(chǎn)品的框架其實是十分復(fù)雜的，因為信息架構(gòu)是需要跟著產(chǎn)品周期隨時調(diào)整的，很多人覺得自己信息架構(gòu)能力不行，其實并不是這樣的，你如果很抽象的想象一個從未接觸過的業(yè)務(wù)，你肯定是想不出來的，就像造房子和車子一樣，沒有人能從一開始就知道產(chǎn)品的終極形態(tài)，能解決當(dāng)下核心問題或需求的產(chǎn)品和功能遠(yuǎn)比在一開始就花大量時間去思考完整形態(tài)要重要的多。

下面是圖文教程：

前言

如果你要設(shè)計以真實場景為主的banner或者主視覺，往往都會在各大網(wǎng)站圖庫里找半天，挑挑選選可能都找不到滿意的，或是容易和別人用到一樣的圖片。想要找到一張?zhí)貏e的又獨一無二的難上加難，而且自己也沒時間建模和拍攝

AI圖片的生成為這個痛點找到了更好的解決方案，這篇文章就是要和大家分享一下使用AI制作好用的圖庫素材照片，我將會按照真實工作場景搭配設(shè)計落地方案來和大家分享AI使用經(jīng)驗，讓你看了就學(xué)會，學(xué)會就馬上能用

用結(jié)構(gòu)化方式思考咒語

以下需求是我設(shè)計中要用到的素材，我希望可以有一張【穿西裝并且手提公文包的男士站在摩天大樓前】的寫實照片當(dāng)作首圖，首先先想一下我們需要的素材大概畫面的呈現(xiàn)，思考的框架可以參考以下，以下內(nèi)容為了方便關(guān)鍵詞我會用中文，但是實際操作中Prompt都必須使用英語

通過結(jié)構(gòu)化思維來描述這樣就不會有遺漏，也更能使畫面完整，另外像我的英語并不是很好，就會把寫好的內(nèi)容通過Deep L或是chatgpt來進(jìn)行翻譯

關(guān)鍵詞的使用

prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，the whole body of the figure is presented, —ar16:9

在輸入關(guān)鍵詞的時候，我通常會把重要的內(nèi)容放在前面，有時加在后面的關(guān)鍵詞不容易被機(jī)器人識別。個人的一點小經(jīng)驗，在描述的最后一定要加上需要的參數(shù)，為了在后續(xù)的設(shè)計中更好適配尺寸需求，所以我選擇加上尺寸參數(shù)16:9，以下就是我通過關(guān)鍵詞生成的圖片

如果覺得結(jié)果都不滿意，可以重新用相同的Prompt再生成。AI好玩的地方就是它的隨機(jī)性，像是Promp就不建議非常詳細(xì)，因為這樣反而會有意想不到的優(yōu)質(zhì)圖片產(chǎn)出

機(jī)器人生成以后就要開始挑選圖片了，如果對左上的結(jié)果比較滿意，就點擊v1，讓機(jī)器人針對這個圖片再去生成四張新的圖片，雖然左上效果不錯，但是手部有些奇怪，所以需要通過在該基礎(chǔ)上再次生成，來挑選沒有問題的圖片

這里說明一下U（upscaler）和V(variation)的區(qū)別，U就是選擇這張圖，然后會放大這張圖片畫質(zhì)更加清晰，V則是會針對你選擇的圖片再生成四張圖，與你選擇的圖片做輕微的調(diào)整。1-4的排序為：1是左上，2是右上，3是左下，4是右下

重新生成的左上圖可以看到手部還是有問題，但是右上那張就還不錯，可以選擇這張來用或是再重新生成一遍

prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，shot on 16mm, —ar16:9

這里我想要換一個畫面角度，所以選擇使用【shot on 16mm】,這種通常是電影、紀(jì)錄片、廣告拍攝使用的，所以使用這個關(guān)鍵字去生成圖片畫面會有一種電影感，角度上我覺得更好一點。

最后說一下，我是用的版本是V5，產(chǎn)出的1024??1024高解析圖片，但是我個人感覺還是不夠清晰，所以會搭配圖片放大工具來一起使用。我常用的圖片放大工具h(yuǎn)ttp://replicate.com/sczhou/codeformer，放大效果清晰度都非常好，而且處理速度也很快，重點是免費！！！直接上傳圖片無需更改任何參數(shù)，使用默認(rèn)預(yù)設(shè)清晰度絕對夠用，畫質(zhì)太高也沒有太大意義，反而會影響網(wǎng)站加載速

1.遙望app

1.視覺設(shè)計

遙望app的設(shè)計在整體上的風(fēng)格化很強(qiáng)，有自己的獨特性。為了讓用戶之間的粘性更好，更是在活動上、動效上花了很多心思，給用戶帶來很多有趣且良好的體驗，讓我?guī)闳ンw驗一下吧

2.設(shè)計語言

整個app的設(shè)計語言貫穿了星形、圓形和三角形 ，同時增加上面三種圖形的線性來點綴設(shè)計。tab圖標(biāo)是圓形和三角形的排列組合，同時增加線的形式點綴其中，層次更加豐富。其他頁面的設(shè)計也是同理，通過將上面3種圖形排列組合，貫穿到整個頁面，設(shè)計語言十分統(tǒng)一。

3.空界面設(shè)計

空界面的設(shè)計運(yùn)用手的動作將每個頁面的情緒感拉的滿滿的，在互動消息的版塊，從關(guān)注到@我，每一個頁面通過不同的情緒表達(dá)方式極大了緩解了用戶的焦慮，同時也增加了一些趣味性。

4.勛章設(shè)計

勛章是根據(jù)你的確幸值的多少，等級的高低，送禮物的多少，以及你在平臺的表現(xiàn)會給你發(fā)放不同的勛章，以此讓用戶享受到尊享和定制的感覺，增加用戶的參與感和在平臺的粘性。

2.動效設(shè)計

遙望app的動效設(shè)計也是十分的流暢和有趣，線性的風(fēng)格特征的插畫、溫暖的文案和趣味的動效，帶來的絲滑體驗感十分強(qiáng)烈。

1.匹配器

遙望app首頁上面的頭像是匹配器，隨著頭像慢慢的流過,頭像旁邊還有對話框彈出介紹用戶的信息，點擊會有兩只手彼此召喚，再點擊幸會就可以和其他的朋友打招呼了。在匹配器下面的“遙望一下”點擊也可進(jìn)入到好友快速閃過的頁面，點擊可以同樣到打招呼頁面，多個入口引導(dǎo)用戶相互吸引從而形成社交動機(jī)。

2.下拉加載

加載的動態(tài)效果加入了遙望的IP形象，一個是像地球一樣的自轉(zhuǎn)，一個是像風(fēng)箏一樣在天空飛的效果，動態(tài)十分流暢且有趣。

3.記錄心情

記錄心情這個是個很有趣的設(shè)計細(xì)節(jié)，在記錄心情發(fā)表后，在查看心情的小罐子里就能夠看到你的心情小表情，并且還有心情占比、情緒波動分析，最后在日歷上還能看到每日心情的狀態(tài)，可以很好的記錄每日的心情。

查看心情

3.彩蛋設(shè)計

1.放個氣球

放個氣球把心情寫進(jìn)氣球發(fā)送出去，可以抒發(fā)自己的情緒。同時，你想自己接收就可以點收一個，出現(xiàn)氣球動效加載，就會接收到別人發(fā)出的信息，不想要了，可以點放飛消息就沒有了。

收氣球

2.發(fā)射泡泡

雖然泡泡這種形式很常見，但是遙望在細(xì)節(jié)處做的設(shè)計還是很用心，很容易觸動用戶。發(fā)射泡泡很容易讓然想到泡泡相機(jī)，加上“biubiu”的音效，有很強(qiáng)的場景感。

2. 配配app

1.視覺設(shè)計

配配app的設(shè)計可以說是以IP形象為切入的設(shè)計，app里面有著各種各樣的表情和動勢，生動且逗比。而且配配在設(shè)計的時候會融入很多小的細(xì)節(jié)，也能帶給我們很多不一樣的感受。整個ip融入可以說做的很徹底，能夠讓用戶的品牌感知十分深刻。

2.文字字體

貼貼功能用了一個超大的特殊的文字字體設(shè)計，十分醒目，在瀑布流的頁面對用戶的信息區(qū)分的比較清楚，但是對于用戶的照片也形成了遮擋，有的時候并不是很好。發(fā)布貼貼的超大字體的設(shè)計很少有人這么設(shè)計，雖然看起來粗糙，但是卻與眾不同。

3.品牌融入

配配app讓人印象比較深刻的就是這個IP的形象了，在頁面的各種地方都能看到他，無論是在催促你、還是在悠閑的吃東西，還是舉起手或是一起打call，哪里都少不了它。它的設(shè)定非常生活化，也很貼近我們的日常，所以這樣才更夠親近。

2.動效設(shè)計

1.點亮

點亮設(shè)計就是點擊后，寫下一個故事就可以和其他用戶打招呼了，點亮后燈泡會發(fā)出光，然后有星星散落下來，將表情運(yùn)用在按鈕上也是很新穎的設(shè)計方法了。

2.發(fā)布動態(tài)

發(fā)布動態(tài)的功能IP會向你招招手，引導(dǎo)用戶參與發(fā)布動態(tài)。

3.動態(tài)背景

配配的動態(tài)背景很有意思，打call、吃蘋果、打盹，根據(jù)不同用戶展示不同的動態(tài)背景。

3.糖果app

糖果app的設(shè)計在于匹配器和其他的很與眾不同，像是在一起炫舞的樣子，看起來很有場景感。糖果app的整體視覺風(fēng)格比較中規(guī)中矩，

不過有一些的功能設(shè)計和設(shè)計小細(xì)節(jié)值得體驗一下。

1.廣場匹配器

糖果的首頁的匹配器設(shè)計是一群人在廣場上一起炫舞，然后各自擺著不同的怪異的姿勢，設(shè)計上十分新穎。

2.戀愛上上簽

戀愛上上簽就像我們?nèi)ニ聫R里求姻緣一樣，通過搖晃簽子就可以找尋到好姻緣。罐子上的表情左看看右看看然后閉上眼睛，最后終于連接上一個十分匹配的好友。

3.解憂罐子

解憂罐子就是把心情放在罐子里，發(fā)送出去，別人可以看到你的罐子，然后你自己也可以做罐子發(fā)送給別人。

4.無聊嗶嗶雞

無聊嗶嗶雞就是一只雞不停的晃動，可以發(fā)送一句消息直接可以連接到好友。

4.Blurrr app

Blurrr app是一款功能強(qiáng)大的視頻剪輯軟件，Blurrr雖然是一款工具軟件，但是在配色和設(shè)計上還是十分大膽，熒光綠的顏色和黑色的結(jié)合，十分亮眼，里面的動效也十分細(xì)膩，非常吸引人的眼球。

引導(dǎo)頁的設(shè)計用多彩的圖形設(shè)計+表情+動效設(shè)計的方式，打造了靈動的引導(dǎo)頁設(shè)計，形成了自己很獨特的風(fēng)格。

一、Photoshop(Beta)版本安裝

PS的AI功能需要在Beta版本中才能使用，安裝過程很簡單，可以從下列這個網(wǎng)址前往Adobe官網(wǎng)下載Photoshop(Beta)版本：

https://helpx.adobe.com/cn/photoshop/using/generative-fill.html

點擊「試用」按鈕，會調(diào)起電腦中的Creative Cloud應(yīng)用，正常來說大家電腦里有Adobe軟件一般都會有Creative Cloud，沒下載的話按提示下載就可。

在Creative Cloud中找到①Beta應(yīng)用程序，點擊②安裝按鈕，再點擊③打開按鈕，就可以啟動Beta版PS啦！(我這里已經(jīng)安裝過，所以直接顯示了安裝按鈕)

Beta版PS白色的logo和有趣的啟動頁面??

二、AI創(chuàng)意填充功能

Midjourney生成的圖默認(rèn)是方形，主體位于畫面的中央。如果我們想把主體的位置移到畫面左側(cè)或右側(cè)，需要花費很大的精力，而PS(Beta)的AI創(chuàng)意填充功能可以很好解決這個痛點問題！

下圖是在Midjourney中生成的例圖，人物在畫面的正中間，關(guān)鍵詞描述：

「A portal to another dimension, with a blonde woman dressed as space girl, cyber punk style, hyperrealism, 4k, natural light. --v 5.1」

如果我想在不摳像、不變形拉伸的情況下，把圖片變成橫版尺寸，并把人物移到畫面右邊，需要在PS(Beta)中怎么操作呢？

① 先把例圖拖到PS中，用[C]裁剪工具在畫布左邊拉一個空白。

② 切換到[M]選框工具，框選剛才拉出的空白畫布，下方會出現(xiàn)一個工具欄。

③ 點擊工具欄的第一個「創(chuàng)成式填充」按鈕，進(jìn)入到AI創(chuàng)意填充功能。

PS的創(chuàng)意填充看起來很像把Midjourney的輸入框移植到PS中，但功能上又和Midjourney不太一樣：

·PS的輸入框沒有復(fù)雜的指令，只需要輸入關(guān)鍵詞描述，就能夠在選區(qū)內(nèi)生成想要的內(nèi)容；

·支持不輸入內(nèi)容，直接點擊「生成」按鈕，AI會根據(jù)畫面周圍的內(nèi)容智能填充選區(qū)。

三、不輸入內(nèi)容直接生成

第一次體驗我沒有輸入任何內(nèi)容，直接點擊PS的「生成」按鈕，一次能生成3張圖片。點擊左右箭頭可以切換查看3張圖，如果覺得不滿意可以再點擊「生成」，再生成3張?zhí)畛鋱D。

效果圖1??

效果圖2??

效果圖3??

第一次測試生成的圖片效果遠(yuǎn)超出預(yù)期，和原圖風(fēng)格也很接近，唯一不足的地方是和原圖拼接處有一條白線，看起來有點礙眼。

經(jīng)過多次嘗試后，終于發(fā)現(xiàn)了問題所在：如果框選時剛好只選取了空白畫布，生成出來的新圖和原圖之間就會產(chǎn)生明顯的接縫。簡單高效的解決方式是在框選畫布的時候多框一點點原圖。

這樣再點擊「生成」按鈕，運(yùn)算出來就會有很完美的過渡，看不出破綻。

四、輸入關(guān)鍵詞描述

體驗完不輸入關(guān)鍵詞直接生成后，接下來體驗一下輸入關(guān)鍵詞描述后生成的圖片效果如何～這次使用同樣的方法在例圖右側(cè)先拉出一個空白畫布，輸入關(guān)鍵詞描述：

「Particle effect, sense of technology」

生成的圖片效果很棒，和原圖完美地融合在一起，不得不服啊太厲害了！

效果圖1??

效果圖2??

右側(cè)的屬性欄會記錄你剛輸入的關(guān)鍵詞，可以隨時修改關(guān)鍵詞，點擊再次生成3張圖，依次類推，生成的所有圖都會保留下來，方便選擇。

最后

通過這次體驗感覺PS的AI填充非常強(qiáng)大，而且效果很精準(zhǔn)，誰能想到在PS中就能完成對一張圖的拉伸和智能填充。