有哪些交互設計的網站值得推薦？

12-09

最好是有詳細的 PS 教程步驟的，而且專門針對一些國外的流行趨勢設計的。

很多朋友都推薦 Dribbble，現在 dribbble 也有app了，方便了很多，但是會發現網站和app的訪問速度極慢，特別是圖片。

所以我做了一個 app 來解決這個問題（這幾天剛上線），對 dribbble 的所有圖片都做了緩存代理。訪問速度非常快。

下載鏈接：

https://itunes.apple.com/us/app/%E8%AE%BE%E8%AE%A1%E6%90%9E/id1282966969?l=zhls=1mt=8

界面預覽：

https://itunes.apple.com/us/app/%E8%AE%BE%E8%AE%A1%E6%90%9E/id1282966969?l=zhls=1mt=8 (二維碼自動識別)

我覺的任何一門學科，都需要先模仿再創新，先了解到底何為好的設計，再去創造出好的設計。那學習好設計的方法尤為重要。推薦下好的ui設計的網站平台和工具吧。

首發於公眾號：作品集分享portfolio

歡迎關註：作品集分享Portfolio - 知乎專欄

———————————————————————————————————————————

做之前，多看優秀作品是一個很好的學習辦法，推薦一些交互非常棒的網站和工具吧，對作品集的構思和製作都很有幫助。

主要跟大家分享三部分，第一部分和介紹一些現在做的比較好的設計作品社區，包括一些藝術作品分享網站等。可以幫助大家尋找靈感，裡面的一些好的案例，也可以成為你們作品集中second research的一部分，也算是一種casestudy。

第二部分給大家介紹的一些網站是比較偏學術性的網站。這些網站會發表專業性、學術性很強的文章，大家在現在的階段讀這樣的文章，一方面可以增加自己對所要學習專業的專業性的了解，另一方面可以學習的最前沿，最系統的理論知識。

第三部分我會給大家介紹現在平台上可以利用的工具，現在有很多公司都將他們內部資源開放原始碼，像我們所熟知的Facebook，它開放了很多內部的設計資源素材，其實也是為我們所用，有針對性使用這些template。

一、設計作品社區

1、 uplabs

第一個給大家介紹的網站叫uplabs。如果同學們對behance或者dribbble很熟悉，我相信大家對uplabs也一定不陌生，它是一個很好地為設計師打造的資源推薦社區，上面彙集了很多前端設計作品，還有大量的android和ios UI這樣的資源。

另外uplabs也有很好地marketing功能，大家可以去免費或付費下載資源。

2、collect UI

第二個給大家介紹的是 collect UI。它是一個基於dribbble的每日資源推薦社區，同學們可能會感覺有點奇怪，因為如果它是僅僅是dribbble的「再分享社區」，那麼它和dribbble網站似乎就不會有很大的區別。

其實並不是這樣的，因為collect UI都是通過人工篩選的方式來保證這個社區有很高的質量，我們可以看到在左側列表欄劃分出了不同的頁面類別，比如sign up、landingpage、user profile，這樣我們在搜索不同類別時可以很清晰，尤其是同學們在做同學們在做app的項目時候。

3、site inspire

第三個網站是 site inspire ,一聽這個名字就知道這是一個尋找靈感比較好的網站。

這個網站收錄了很多的網站交互型比較優秀的作品，會分為不同的風格和類型，包括不同主題的網站，我會比較關注這個網站是因為很早看它上面有推薦的網站其實很有視覺衝擊力的，算是比較前沿特別是在排版上比較簡潔同時會有很高的格調，我覺得如果對板式很關注的同學可以多看一些這樣的作品。

4、 one page love

第四個網站叫做 one page love 。這個網站彙集了很多優秀單頁，也有很多模板和資源，有20多種基於行業的分類，你會發現它沒有像其他作品集網站的頁面，它會將大家的注意力集中於界面，模板主題很直觀，所以你可以很輕鬆地找到自己喜歡的不同行業的模板。

5、 resource cards

第五個網站是 resource cards，這個我覺得是一個特別給力的比較結合性的網站。

如果我們對設計還沒有很多了解，如果你的設計收藏夾還為零的話，僅僅這一個網站就可以解決很多問題，因為它的resource cards是一個專門為設計師提供豐富資源的網站，這上面有不同的卡片類別，每一個卡片類別下面都會有相應下一級的分類，每一個小小的卡片都是一個收藏夾。

6、 dribbble、behance

最後兩個網站，一個是dribbble另一個是behance。

對設計有一定了解的同學應該很熟悉這兩個現在做的已經很著名的設計創意社區，有很多包括全球的優秀設計師都會在上面進行作品的分享交流，也可以看到不同作品的反饋。

以上7個網站基本上就是第一部分和大家介紹的，可以幫助大家發展靈感，對大家做research有一些有幫助的平台。

二、學術性、概念性較強的網站

1、smashing magazine

第一個網站叫做smashing magazine（門檻會有一點高），這裡面的文章比較綜合包括整體的質量很高，很適合做用戶體驗的同學來關注。

它比較適合美國留學的同學，因為其實美國會對交互有一些技術性要求，會需要你有coding的能力，需要你有交互的能力，其實這裡面也有涉及到這樣的分類，比如coding，mobile都會有偏向這樣的文章。smashing magazine裡面的文章總體的質量很高篇幅很長，我不知道現階段大家的英語能力怎麼樣，但是我覺得大家可以一篇一篇堅持讀下來我相信對大家這樣的專業辭彙的能力的提上還是很高的。

2、 ux booth

第二個網站是ux booth,它其實是個偏向於用戶體驗的文章的彙集網站，與上面的smashing magazine主要的區別的在於是更聚焦於用戶體驗這樣相關的方面，整體具有很系統很嚴謹的學術性，很系統很嚴謹。三個功能都很棒，一個是交互，一個是acceptability，還有一個偏向於可用性測試也很不錯。

3、 ux magazine

第三個是ux magazine，這裡的文章和上面其他的網站上的相比更短小精悍一些。比較會用通俗的案列講解理論知識，分析得很有理有據，可以作為大家二手調研里的素材，同時會有一些結合心理學與設計的探討，與上面幾個相比會比較容易理解。

4、designmodo

第四個是designmodo，這個網站前一陣子很風行，上面會有很多關於webstyte的一些文章。

designmodo介紹了很多設計前沿與趨勢，這裡面有兩個元素很不錯，一個是inspiration（靈感），一個是resorts（訴諸）。inspiration裡面的內容很新穎，resorts有一些很實用的小工具和一些大家可以測試方法性的工具。我們在主菜單上面可以看到shop,這裡面是許多有想法的設計師分享的作品。

5、 web design

第五個是web design。我最初關注這個網站其實是被它的視覺設計所吸引，它的視覺設計確實做的很棒，關注一段時間你會發現這裡面的內容很新穎，很適合持續關注，這裡面會精選互聯網裡優質的文章，這上面的漫畫都是由職業的漫畫家親自手畫而成。

另外web design 在主菜單裡面有一個freebies的模塊。這裡面有很多優質的資源大家都可以去下載。

6、 Facebook design

第六個是Facebook design。這個頁面結合了Facebook的設計師所製作的免費設計資源，因為目前你可以看到很多互聯網公司它都有將公司內部資源開放出來再做開源，如果你想知道這些前沿的企業他們是如何做這些設計，你都可以下載這些素材看到這些原始的文檔。

如果同學們在做作品集中有APP這樣的項目，這裡面有很多模板，你不需要再去拍照就可以用你最後做的interface（介面）去植入到這樣的圖片裡面。因為這個網站上線的時間不是很久，所以上面的資源不是很多。

三、平台上可以利用的工具

1、 workMark

它是一個可以幫你快速比較不同字體、選擇字體的工具，你可以簡單輸入你想要測試的文字，設置它的字體大小，就會在下面實時的顯示出實時做一個比較。當大家在看英文書籍時你可能會發現一個非常好看的英文字體，但是因為它的紙質的，我也沒有辦法去得到這個字體是什麼，其實這個時候掃描一下把它植入到平台裡面會自動幫你識別出這個字體，來方便你日後的使用。

2、 LOL COLORS

這是一個設計師獨立設計、獨立coding 的網站。這上面提供了很多不同顏色的配色方案，每一組有四個顏色，大家如果看到這上面有合適的配色方案，可以簡化大家的設計流程。

3、 coolors

我們可以卡到這也是一個配色網站，相比於上一個它的功能會更豐富一些，可以微調每個顏色的亮度，飽和度與色相。這裡有一個很好的功能，你會看到如果上傳一張圖片，它會幫你解析圖片的配色方案，最後你可以導出保存到調色板裡面。

④4、Icons for Everthing

這個網站可以簡化你的icons設計路徑，如果我們在做作品集排版的時候，我們經常會用icon做導引，在這樣的平台都可以找到合適的icon。

5、 Iconjar

這是一個偏向組織管理的搜索使用圖片的工具，大家可以在這上面下載不用的icon page，一方面是可以使用，另一方面是可以學習我們在做icon set的時候需要去遵循哪些規則。

6、 place it

在做用戶體驗，交互，服務設計的時候其實都會分4個部分，第一個部分是我們需要去發現一個實際問題；第二是定義一個核心的痛點；第三是去展示我們的設計結果；最好要把設計結果放入到一個真實的情景中去測試，從用戶的身上得到反饋。

這個place it其實就是幫助我們在最後在得到設計結果的時候自動生成最終場景的圖片，你只需準備好你的interface直接把它植入到這個環境里，不需要去修改，去ps。

⑦7、Pexels、 Adobe Stock、Shutterstock

最後給大家介紹的網站分別為Pexels、 Adobe Stock和 Shutterstock。

其實不用過多的描述，這三個都是屬於圖庫的性質，如果大家在排版在做作品集時候沒有合適的圖片又沒有辦法去拍照可以來這裡。

以上基本上都是一些平台，軟體工具類。無論這些平台還是工具，都只是我們設計的一環，更重要的是需要你在生活中學會發現Pain points，找到痛點，用設計去解決問題。尤其是交互與用戶體驗的同學，你需要去用你的設計結果去改變別人的行為，我覺得這是用戶體驗交互的核心。

———————————————————————————————————————————

首發於公眾號：作品集分享portfolio
歡迎關註：作品集分享
有問題可私信我，或微信我sjie1029

1、http://IconPng.com 愛看圖標網，免費中文圖標搜索引擎！中文網站,支持中文、英文搜索
2、Icon Search Engine 中文網站,只支持英文搜索
3、Icon search engine and market place 英文網站,只支持英文搜索
用戶體驗團隊網站
1、UCD大社區 http://ucdchina.com/
2、騰訊WSD 騰訊MXD移動互聯網設計中心
3、騰訊CDC 騰訊CDC
4、騰訊ISD http://isd.tencent.com/
5、淘寶UED http://ued.taobao.com/
6、著片會 http://www.shupianhui.com/
7、口啤UED http://ued.koubei.com/
8、阿里UED http://www.aliued.cn/
9、阿里媽媽UED http://ued.alimama.com/
10、163UED http://www.ued163.com/
11、搜狐UED http://todd-lee.net/blog/
專業UI設計團隊

1、eico http://www.eicodesign.com/
2、FaceUI http://www.faceui.com
3、西安超人科技 http://www.skyui.net/
4、Reooo http://www.reooo.com/
5、Rigo http://www.rigodesign.com
6、ICON http://icon.cn/cn/
圖標設計及素材
1、中文圖標搜索 http://IconPng.com 愛看圖標網，免費中文圖標搜索引擎！
2、http://www.fasticon.com/
3、http://dryicons.com/
4、http://www.icotrip.com/
5、提供搜索http://www.icones.pro/
6、國外圖標http://weloveicons.com/
7、圖標搜索 Icon search engine and market place
9、http://www.freeiconsdownload.com/
10、http://www.freeiconsweb.com/
網頁、UI設計門戶
1、站酷http://www.zcool.com.cn/
2、八隻熊http://www.8bears.com/coolsite/
3、國外網站欣賞http://www.thefwa.com/
4、網頁設計師*http://www.68design.net/
5、我愛設計網http://www.52design.com/
6、藍色理想http://www.blueidea.com/
7、視覺中國http://www.chinavisual.com
8、創意視覺http://cvsion.com/
9、國外設計門戶http://www.deviantart.com/
10、合子UI http://www.boxui.com/
11、酷點http://www.koodian.com/
12、優艾網http://www.chinaui.com/
13、中國UI設計師大社區http://www.uirsss.com
14、UI製造http://www.uimaker.com/
15、UI設計網http://www.worldui.com/
16、iconfans http://www.iconfans.org
17、uisheji http://www.uisheji.com
18、uiimg http://www.uiimg.com
19、UIrss http://www.uirss.com
素材門戶
1、素材精品屋 http://www.sucaiw.com/
2、昵圖網 http://www.nipic.com
3、全景網 http://www.quanjing.com
4、行業LOGO http://www.tucool.com
5、素材庫 http://www.sccooo.com/
6、LOGO大全 http://logopond.com/
7、圖圖網 http://www.tutu001.com/
8、創意悠悠花園 http://uuhy.com/

推薦看國外的一些設計網站
http://net.tutsplus.com/category/tutorials/design-tutorials/ 這個個人覺得挺好的，裡面html,css,web design, ps的教程都有
http://psd.tutsplus.com/
http://dribbble.com/
http://creattica.com/

技術類

Codecademy

鏈接：https://www.codecademy.com/

一個免費學習Coding 的網站

可以學習的編程語言很多：

網站是在註冊之後，選擇自己想要學習的編程語言之後，通過完成一個又一個小任務來學習編程。

以下是主要支持的瀏覽器：

動態資訊類

IxDA 國際交互設計協會

鏈接：http://ixda.org/

國際交互設計協會的官方網站，實時更新業界的動態與活動信息，首頁主要是IxDA的社交網路資訊分布。

同時還可以關注他們的 twitter ： https://twitter.com/ixda

案例和作品類

Behance

鏈接：https://www.behance.net/

主要是設計師和機構自主上傳作品的網站。

閱覽之餘有一定的可能可以直接聯繫到設計師本人

綜合的設計資訊類網站，涵蓋內容從工業設計和交互設計等都有。

主要是刊登專業文章和業內信息↓

Core77 http://www.core77.com/

Dezeen https://www.dezeen.com/

以上望有用，歡迎交流

———————————————————

歡迎關注我的個人官方微信（kang-shishi）

http://weixin.qq.com/r/BkRfRzjE_2WErXwk9xEU (二維碼自動識別)

如有藝術留學、院校、專業、作品集方面的問題，可私信康石石諮詢

首先，交互設計與PS是沒有直接關係的，PS更多是視覺設計師的常用工具。

我覺得，交互設計師最重要的能力有2點：1.問題的研究和分析能力，通過研究能否對要解決的問題給出準確、清晰地洞察；2.把研究洞察轉化成優秀產品方案的能力。
要做好交互設計，知識必須是「+」型的：專業方法、專業工具、商業、市場、技術…並且這些知識都是在不斷的飛速變化，交互設計師一定要讓自己的知識能力儲備與時俱進。

我覺得，高效利用手機工具，是非常好的方式。下面是我自己最近梳理的一個利用手機來日常學習框架，可供參考

推薦翼虎網： http://www.yiihuu.com/v_14163.html
星火：http://pc.21edu8.com/html/PSjiaocheng/
還有這個：http://www.52psxt.com/thread-48535-1-1.html