值得慶幸的是，國(guó)外已經(jīng)有很多優(yōu)秀的移動(dòng)用戶(hù)界面資源是可用的，這些先驅(qū)的寶貴資源可以大大幫助你的移動(dòng)設(shè)計(jì)或開(kāi)發(fā)你的響應(yīng)式網(wǎng)站。相信今天要隆重推薦的10個(gè)網(wǎng)站，無(wú)論是在你設(shè)計(jì)一個(gè)新的移動(dòng)應(yīng)用程序還是尋找特定的設(shè)計(jì)解決方案時(shí)，他們都會(huì)踏踏實(shí)實(shí)的幫助到你。

1. Konigi

這個(gè)網(wǎng)站上展示了許多完美的交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)案例，網(wǎng)站提供了許多不同的方式來(lái)引導(dǎo)你便捷的搜尋感興趣的項(xiàng)目！一定要利用好標(biāo)簽喲。

本文譯自蘋(píng)果官方人機(jī)界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由騰訊ISUX設(shè)計(jì)師翻譯整理，非發(fā)文者一人之作。譯文首發(fā)于ISUX博客，如在閱讀過(guò)程中發(fā)現(xiàn)錯(cuò)誤與疏漏之處，歡迎不吝指出。

圖標(biāo)設(shè)計(jì)及素材

筆者最常用的是

1>圖標(biāo)搜索 http://www.iconfinder.com/，但是網(wǎng)絡(luò)速度有點(diǎn)慢，圖標(biāo)是最多最全，最好找的，而且有相關(guān)聯(lián)性，用戶(hù)體驗(yàn)很好。

2> 中文圖標(biāo)搜索 http://www.iconpng.com/

3> http://www.fasticon.com/

4> http://dryicons.com/

5> http://www.icotrip.com/6

6> 提供搜索http://www.icones.pro/6>

7> 國(guó)外圖標(biāo)http://weloveicons.com/

8> http://www.freeiconsdownload.com/

9> http://www.freeiconsweb.com/

俗話(huà)說(shuō)，一張圖片勝于千言萬(wàn)語(yǔ)。人類(lèi)是視覺(jué)性動(dòng)物，圖片更能吸引人的注意，是傳達(dá)信息的重要方式。隨著互聯(lián)網(wǎng)和顯示設(shè)備的發(fā)展，越來(lái)越多的網(wǎng)站使用引人注目的大圖片方式來(lái)吸引用戶(hù)的注意力，同時(shí)，對(duì)用戶(hù)來(lái)說(shuō)也是一種視覺(jué)體驗(yàn)。通常一張圖片無(wú)法傳遞全部的信息，所以很多網(wǎng)站便用類(lèi)似旋轉(zhuǎn)木馬的方式輪播顯示多張圖片。

屏幕尺寸：指屏幕的對(duì)角線(xiàn)的長(zhǎng)度，單位是英寸，1英寸=2.54厘米。常見(jiàn)的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。

鑒于早期的圖形化用戶(hù)界面中，立體效果被大肆用在所有地方，這還包含了陰影、漸變和高光等一系列的效果，其目的是為了讓用戶(hù)能第一眼就識(shí)別出行動(dòng)按鍵。然而，早期的GUI把這些偽3D效果應(yīng)用得太過(guò)火了，在視覺(jué)上造成了相當(dāng)?shù)母蓴_，并極富侵略性。

吉薩金字塔、蒙娜麗莎、Twitter和百事可樂(lè)有什么共同點(diǎn)？答案很簡(jiǎn)單，它們的設(shè)計(jì)都遵循了黃金比例。作為一個(gè)常見(jiàn)的數(shù)學(xué)比例，黃金比例實(shí)際上是從自然界中總結(jié)并發(fā)現(xiàn)的，用于設(shè)計(jì)中的時(shí)候能賦予作品更多的設(shè)計(jì)美感，賞心悅目。那么，黃金比例到底是怎么樣的比例，它又是如何運(yùn)用到設(shè)計(jì)中并提升設(shè)計(jì)作品的呢？

“ 故事也許是人類(lèi)最早的敘事方法。大多數(shù)人在童年時(shí)，故事用來(lái)引導(dǎo)他們的行為，了解歷史文化和培養(yǎng)社會(huì)認(rèn)同感?！保璅orm Wikipedia

譯者注：本文譯自蘋(píng)果官方人機(jī)界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由騰訊ISUX設(shè)計(jì)師翻譯整理，非發(fā)文者一人之作。譯文首發(fā)于ISUX博客，如在閱讀過(guò)程中發(fā)現(xiàn)錯(cuò)誤與疏漏之處，歡迎不吝指出。后續(xù)章節(jié)會(huì)陸續(xù)更新，敬請(qǐng)期待。

為了對(duì)稱(chēng)，我將她肩膀上的缺口補(bǔ)上了，但是作為一個(gè)形象剪影，她的頭發(fā)太像《星球大戰(zhàn)》中黑武士的頭盔了，所以發(fā)型還需要進(jìn)行一些調(diào)整。馬尾辮足夠現(xiàn)代，也非常女性化，看起來(lái)會(huì)給人年輕的感覺(jué)，但是在32像素的寬度之下，馬尾辮的效果看起來(lái)像是某種嚙齒動(dòng)物。如果改成長(zhǎng)發(fā)披肩或者其他的造型，在如此低的分辨率之下也難以準(zhǔn)確表達(dá)、消除歧義。所以，最終我使用了一個(gè)更加爽利精致的短發(fā)形象。

更新完女性剪影之后，問(wèn)題來(lái)了：舊的男性剪影似乎也有些僵硬而過(guò)時(shí)。于是，我調(diào)整了男性剪影的發(fā)型，令其更加平滑，讓肩膀的弧度更大。在更新這個(gè)圖標(biāo)設(shè)計(jì)的時(shí)候，我發(fā)現(xiàn)Facebook的常常會(huì)用男性單人圖標(biāo)來(lái)表示“添加好友”。這樣的設(shè)定似乎并不公平，或者說(shuō)是不準(zhǔn)確，難道所有的朋友請(qǐng)求都應(yīng)該用男性標(biāo)識(shí)來(lái)傳達(dá)么？唯一的性別圖標(biāo)是不恰當(dāng)?shù)?，所以我?zhǔn)備了一組。