中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文是UI/UX設(shè)計(jì)師Jan Losert 的經(jīng)驗(yàn)分享。

我在Dribbble上發(fā)布作品之后，收到了許多積極反饋和問題，這也促使我動(dòng)筆寫這篇文章，跟大家聊聊我做產(chǎn)品設(shè)計(jì)兩年來的經(jīng)歷和思考。

說來慚愧，在產(chǎn)品設(shè)計(jì)上我一直沿用相同的設(shè)計(jì)流程，不過在我看來，它可能確實(shí)接近于理想的狀態(tài)。我將這些技巧劃分為四個(gè)部分：預(yù)處理、工作過程、后期處理以及效率技巧。下面讓我為你一一道來。

　　1、繪制草圖

繪制草圖其實(shí)沒那么多講究，用一張紙還是一個(gè)本子都無所謂，哪怕是手邊的一份傳單都沒問題，最重要的是要將腦海中的想法訴諸筆頭，記錄下來。只有畫出來，才能真正記住它們，不被遺忘。因此，我們可能需要保存一堆記錄著點(diǎn)滴靈感的報(bào)紙、賬單、雜志封面甚至餐巾紙(笑)。

　　靈感的草稿本

不過對我而言，最理想的載體還是實(shí)實(shí)在在的東西，比如Moleskine的筆記本。我特別喜歡時(shí)不時(shí)翻看我記錄在其中的想法和靈感。如此，我便可以回顧曾經(jīng)的想法，并借此調(diào)整甚至重塑此刻手頭項(xiàng)目的設(shè)計(jì)思路，或者延伸出更多的想法。

　　2、搜集圖片

“藝術(shù)家是收藏者，而非囤積者。要知道，這兩者有個(gè)區(qū)別：囤積者會(huì)無選擇地收納，而藝術(shù)家則選擇性地收藏。藝術(shù)家只會(huì)搜集自己真正熱愛的東西?！薄狝ustin Kleon《像藝術(shù)家一樣偷竊》

　　預(yù)處理的第二個(gè)階段是搜集圖片，這也是我每天都做的事情。數(shù)以百計(jì)的風(fēng)格，成千上萬的圖片充斥網(wǎng)絡(luò)，但是我特別喜歡的還是老派的風(fēng)格。我會(huì)在Dropbox中為這些圖片分門別類(Dashboard、iOS、插畫，等等)。當(dāng)我拿到需求或開始項(xiàng)目的時(shí)候，會(huì)通過這些圖片來尋找靈感。Dropbox會(huì)預(yù)先同步好所有圖片內(nèi)容，因此無需聯(lián)網(wǎng)你就可以隨時(shí)隨地查看它們。 (另外，小編也一如既往的推薦國內(nèi)人氣設(shè)計(jì)師網(wǎng)址導(dǎo)航：http://hao.uisdc.com/ 里面有全球最贊的12個(gè)圖庫資源)

　　3、Moonboard與準(zhǔn)備工作

我們可以通過很多網(wǎng)站獲取靈感——Dribbble、Behance、Pttrns、Pinterest等等，我們常常可以從中找到別人做的類似項(xiàng)目。此外，也許別人正在試圖解決與你相同的問題，因此，你也可能從中受益。

做好Moodboard很有必要。

什么是Moodboard?Moodboard是指經(jīng)由對使用對象與產(chǎn)品認(rèn)知的色彩，影像，數(shù)字資產(chǎn)或其它材料的收集，可以引起某些情緒反應(yīng)，作為設(shè)計(jì)方向與形式的參考。

當(dāng)我開始一個(gè)新項(xiàng)目的時(shí)候，我總會(huì)準(zhǔn)備一個(gè)文件夾來收納相關(guān)信息，PSD、截圖、靈感以及資源各一個(gè)文件夾。其中，名為靈感的文件夾中收納著我從網(wǎng)上搜集的、與項(xiàng)目相關(guān)的所有的文件，用以激發(fā)我的靈感，這就是我的Moodboard。

　　這個(gè)文件夾里面應(yīng)該包含從基礎(chǔ)色版，到Behance上完整的案例研究等各種類型的信息。如果這是一個(gè)涉及用戶信息的APP，那么你還應(yīng)該有吸引人的人物照片。有時(shí)候我用不到這個(gè)文件夾，當(dāng)然，那是另外一種情況了。

　　B、工作過程

　　4、我不在意線框圖的質(zhì)量

我并不是那種花費(fèi)半年來打磨線框圖原型的人。如果客戶能預(yù)先準(zhǔn)備了線框圖那就最好了。

好的客戶會(huì)在準(zhǔn)備好自己的想法和思路，甚至?xí)嬙诩埳稀Ｓ镁€框圖原型舉例，并不是想說它，我只是強(qiáng)調(diào)深入理解產(chǎn)品本身非常重要。你的UI/UX技能、想要表達(dá)的想法與你本身才是決定最終產(chǎn)品的因素。借助線框圖，你可以了解客戶的想法，弄清楚需要幾屏來構(gòu)成整個(gè)應(yīng)用。借此，你也會(huì)更加了解應(yīng)用本身。

有一種情況絕對是設(shè)計(jì)師的噩夢：客戶希望將線框圖1:1地輸出成最終產(chǎn)品，分毫不改?？蛻裟?，您是猴子請來的逗比么?這哪里是設(shè)計(jì)師干的事情啊?所以，當(dāng)你碰到這樣的項(xiàng)目的時(shí)候，盡快搞定，然后像博爾特一樣奔跑著遠(yuǎn)離這個(gè)項(xiàng)目，劃清界限。

　　5、大尺寸PSD背景

7個(gè)月前我剛開始在Badoo工作時(shí)，看到同事Sasha的工作過程時(shí)就在想，這哥們恐怕完全不明白Photoshop是怎么工作的吧?不過現(xiàn)在我正準(zhǔn)備用他的方式來作圖，因?yàn)檫@種模式更對我的胃口：當(dāng)你正在做一整個(gè)APP或者信息量較大的Dashboard的時(shí)候，使用大尺寸背景能更好地設(shè)計(jì)界面。

在創(chuàng)建新的PSD文件時(shí)，我基本上會(huì)將背景設(shè)置成8000×5000像素的大小。要知道，我不僅僅只是創(chuàng)建一套UI kit，在大背景下工作時(shí)我能看到每一個(gè)元素相互之間的搭配，體會(huì)每一個(gè)界面狀態(tài)的差別。此外，用這種方式來設(shè)計(jì)，還可以非常輕易地截取小圖或某一狀態(tài)/階段下的產(chǎn)品圖片給開發(fā)者。

　　6、用一個(gè)PSD收納所有界面

當(dāng)我做一個(gè)普通的APP界面的時(shí)候，我也會(huì)用到其他APP的UI界面。這個(gè)時(shí)候，我更喜歡其他所有的界面都存在于一個(gè)PSD中，即使它們不是同一個(gè)產(chǎn)品的。

　　我很清楚，這種情況下先用Sketch會(huì)很有幫助，但是我更喜歡使用Photoshop，并將大量不同UI的源文件置于一個(gè)PSD當(dāng)中，而非幾十個(gè)單獨(dú)文件。如此一來，我可以直接快速地從一個(gè)UI中選擇圖層拖放到當(dāng)前的界面中，而無需在幾十個(gè)不同PSD文件中慢慢找某一圖層。

　　7、文件夾與規(guī)范

從各個(gè)角度上而言，我都是一個(gè)整潔的人——桌面上只有圖標(biāo)，每個(gè)項(xiàng)目每個(gè)客戶都有單獨(dú)的文件夾。我每個(gè)文件夾都是依據(jù)相同規(guī)則整理好內(nèi)容，就像我的PSD的圖層結(jié)構(gòu)一樣。我的每個(gè)PSD結(jié)構(gòu)都非常清晰，我整理它們的時(shí)候，一旦發(fā)現(xiàn)一個(gè)文件夾的圖層超過8個(gè)，就會(huì)創(chuàng)建新的文件夾，將不同屬性的圖層區(qū)分開，歸納好。我會(huì)將PSD圖層整理得井井有條，仿佛隨時(shí)迎別人檢閱一樣。我不用為每個(gè)圖層單獨(dú)命名，因?yàn)槟憧梢院茌p易地通過我的文件夾命名和結(jié)構(gòu)來了解每個(gè)圖層的功用。

最近我開始同@Luká?Kus一同工作的時(shí)候，他老是抱怨他在AE中沒有這樣的結(jié)構(gòu)化文件夾。你看，這很重要吧?

如果你想知道更多PSD禮儀，不妨看看PSD禮儀白皮書。

　　8、與朋友交流

朋友們對產(chǎn)品設(shè)計(jì)的反饋，對我而言是至關(guān)重要的信息。我可以很輕易地創(chuàng)建一組小型的用戶測試，并且傾聽朋友們反饋它們碰到的問題，以及修改意見。這些想法常常能為解決問題開拓思路打開一扇全新的門，我會(huì)在產(chǎn)品開發(fā)的各個(gè)階段進(jìn)行這樣的測試，獲取反饋。此外，這種測試誰都可以參與，不過我一般會(huì)將被測試者分為兩個(gè)部分：來自社區(qū)的UX設(shè)計(jì)師以及普通用戶。這主要是因?yàn)楫a(chǎn)品受眾常常是普通用戶，而非設(shè)計(jì)師。

　　9、界面設(shè)計(jì)

當(dāng)我或者客戶準(zhǔn)備好線框圖原型之后，我更傾向于將它們合并到一個(gè)PSD文件中去。接下來，我會(huì)琢磨界面交互，點(diǎn)擊不同的地方會(huì)產(chǎn)生什么效果。在這個(gè)過程中，我們常常能發(fā)現(xiàn)缺失的環(huán)節(jié)和需要補(bǔ)充的界面，以及其他的錯(cuò)誤，這些都是客戶和我們最初考慮不周全的地方。如此一來，我便可以將所有的界面和元素放在一起，綜合起來看。當(dāng)我面對一個(gè)擁有15屏的APP界面設(shè)計(jì)稿的時(shí)候，就會(huì)發(fā)現(xiàn)讓它們保持統(tǒng)一風(fēng)格是一件很難的事情，最初的設(shè)計(jì)準(zhǔn)則也因此需要調(diào)整。

三種不同的標(biāo)識線，第一種是帶數(shù)字標(biāo)號指向下一屏的，第二種是屏內(nèi)指引線，第三種是指向外部應(yīng)用和鏈接的線。

含聯(lián)系人的預(yù)覽圖

　　完整預(yù)覽圖

　　關(guān)于樣式——我所使用的原型設(shè)計(jì)樣式和很多設(shè)計(jì)師差不多，但是比起耗費(fèi)大量的時(shí)間去繪制復(fù)雜的指引線展示交互過程，我更愿意使用代表下一屏的數(shù)字標(biāo)號和簡單直觀的指引線來展示我的設(shè)計(jì)。這種方式有點(diǎn)兒像過去老范兒的游戲說明書，但是它比起印刷電路板般的指引線地圖要好的多。如此一來，你便可以在整張圖上看到更多有效的信息。

為此我附上PSD，讓你更容易理解我的想法。

　　C、后期處理(設(shè)計(jì)規(guī)范)

終于接近尾聲了，最后一個(gè)部分是創(chuàng)建設(shè)計(jì)規(guī)范，檢查并確保視覺的一致性。事實(shí)證明，這一環(huán)節(jié)是項(xiàng)目中極為重要的一個(gè)部分，不論項(xiàng)目是大是小。在大型項(xiàng)目中，如果要改變某些組件的屬性，通常我是無法100%確定是不是把所有相關(guān)組件都改過來了。有了設(shè)計(jì)準(zhǔn)則之后，我們就能確保UI中不會(huì)出現(xiàn)50種不同濃淡的灰色和14種不同尺寸的字體。

　　10 色彩規(guī)范

做好色彩規(guī)范是我謹(jǐn)記的第一要?jiǎng)?wù)。在扁平化設(shè)計(jì)風(fēng)行的今天，我們終于可以盡可能少地為按鈕和文本設(shè)定色彩規(guī)格。你可以在PSD中創(chuàng)建類似Photoshop調(diào)色版一樣的色彩規(guī)范圖。

　　11、版式規(guī)范

另一個(gè)重要規(guī)范就是版式和字體的規(guī)范。將每個(gè)組件所涉及的字體、字號、粗細(xì)、字距、行距等等都明確地標(biāo)識在PSD中，這將極大地減輕設(shè)計(jì)師和開發(fā)者在規(guī)范化上的負(fù)擔(dān)。

　　12、UI Kit

當(dāng)討論APP與網(wǎng)站的一致性的時(shí)候，UI Kit就顯得極為重要了。同時(shí)，如果你身處設(shè)計(jì)師團(tuán)隊(duì)中或者與前端工程師協(xié)作的時(shí)候，UI Kit一樣是不可或缺的。有了這份標(biāo)準(zhǔn)化的文檔，設(shè)計(jì)師可以隨時(shí)隨地的抓取UI元素創(chuàng)建新的界面，而前端工程師也能清晰地了解每個(gè)UI元素的樣式，不用隔三差五跑來問設(shè)計(jì)師了 。

值得注意的是，很多大公司依然未曾注意產(chǎn)品的UI元素統(tǒng)一性的問題，CSS樣式一次又一次地重寫，你會(huì)發(fā)現(xiàn)同一個(gè)按鈕在三個(gè)不同程序中有三種截然不同的說明，甚至截然不同的樣式。因此，千萬不要忘記保持一致性。

　　D、效率技巧

　　13、todo

我保持一切井井有條的秘訣在于使用 todo list。使用什么樣的APP并不重要，重要的是執(zhí)行。我喜歡Cultured Code出品的效率工具Things，偶爾也喜歡用紙張記錄各種待辦事項(xiàng)。完成所有代辦事項(xiàng)的感覺非常棒。我曾經(jīng)沉迷于接手所有發(fā)送到我收件箱的項(xiàng)目，但是現(xiàn)在我才發(fā)現(xiàn)，最暢快的還是一次專注于1-2個(gè)項(xiàng)目，并且100%地完成它們之后，再開始新的項(xiàng)目，這比起同時(shí)奮斗5個(gè)不同項(xiàng)目來的更加高效靠譜。

“如果你同時(shí)追兩只兔子，你將空手而歸?！薄猂ussian Proverb

　　14、目標(biāo)

明確自己的目標(biāo)是挺好的，但是千萬不要受到它的束縛。我會(huì)給自己做兩周內(nèi)的計(jì)劃(就像短跑)，并定下季度目標(biāo)。同時(shí)，我會(huì)讓自己嘗試新的事務(wù)，并設(shè)定可達(dá)成的目標(biāo)(比如使用AE做自己的第一個(gè)動(dòng)畫)，并同時(shí)不斷完善手頭的項(xiàng)目直至完成(例如完成2個(gè)Behance案例研究)。

　　還有什么?

我不用鼠標(biāo)，只用觸控板，并且學(xué)會(huì)了所有的快捷鍵。我使用Skala Preview將Photoshop上的顯示內(nèi)容輸出到iPhone上。目前我還在學(xué)習(xí)AE和Sketch。創(chuàng)建原型的時(shí)候，我使用InVision來處理網(wǎng)頁設(shè)計(jì)的項(xiàng)目，而iOS程序則使用最新的MarvelAPP來應(yīng)對。對我而言，使用紙筆設(shè)計(jì)UI比在iPhone上拖拽來的更快。有時(shí)候我依然會(huì)用PopApp來創(chuàng)建早期原型。

　　最后幾句話

讓我嚴(yán)格依照上面的流程來處理每一個(gè)項(xiàng)目的確不現(xiàn)實(shí)，因?yàn)橛械捻?xiàng)目一開始就有思路和想法，我會(huì)跳過上面的某些流程直接開工。

在我曾經(jīng)工作的公司里，我從未體驗(yàn)過真正的信息反饋。設(shè)計(jì)師能從用戶測試和信息反饋中了解更多并從中受益，這些信息能促使他們思考新項(xiàng)目，完善老項(xiàng)目。尤其是在用戶測試的環(huán)節(jié)，設(shè)計(jì)師收到的反饋會(huì)刷新它們對于產(chǎn)品本身的認(rèn)知，因?yàn)樗麄兘K將發(fā)現(xiàn)，很多普通用戶壓根不會(huì)按照設(shè)計(jì)師的設(shè)計(jì)來使用APP。

文章來源：互聯(lián)網(wǎng)的一些事