首頁(yè)

聊聊各種有趣的loading界面

用心設(shè)計(jì)

現(xiàn)在無(wú)論是手機(jī)端還是PC端都有越來(lái)越多的H5頁(yè)面,他們的內(nèi)容都會(huì)做的十分豐富,于是需要加載的東西就會(huì)很多。但是用戶或許會(huì)網(wǎng)速慢或硬件卡,可能會(huì)遇到需要加載的情況,而沒(méi)有耐心的人,就會(huì)因?yàn)椴粩嗟募虞d而放棄瀏覽直接關(guān)閉。

于是添加一個(gè)Loading的畫面,就可以大大緩解了等待的無(wú)聊,讓用戶知道目前加載的狀態(tài),以及使用戶關(guān)注在Loading畫面的本身上,讓他們會(huì)把等待看成一件美好的事,那么我們來(lái)探尋一些有趣的Loading畫面吧。

001

濃縮的精華!從零開(kāi)始帶你認(rèn)識(shí)的圖片格式WEBP

博博

image-format-webp-introduction-1

編者按:相信走在前列的設(shè)計(jì)師已經(jīng)知道了WebP這種圖片格式,比起JPEG、PNG 和 GIF ,它能在保證圖片精細(xì)度的同時(shí)縮小圖片體積,在 Google 的明星產(chǎn)品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影,今天騰訊的同學(xué)@Hahn__研究后總結(jié)了一篇深度技術(shù)文《WebP 探尋之路》,不落人后,來(lái)學(xué)習(xí)吧。

想跟上大潮流,這篇熱門好文少不了:《我的征程是未來(lái)!帶你展望2015年最重要的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)》不管是 PC 還是移動(dòng)端,圖片一直是流量大頭,以蘋果公司 Retina 產(chǎn)品為代表的高 PPI 屏對(duì)圖片的質(zhì)量提出了更高的要求,如何保證在圖片的精細(xì)度不降低的前提下縮小圖片體積,成為了一個(gè)有價(jià)值且值得探索的事情。

智能設(shè)備沒(méi)有界面如何交互?Henri給你靈感

用心設(shè)計(jì)

智能設(shè)備的誕生創(chuàng)造了需要讓設(shè)計(jì)師來(lái)解決的新問(wèn)題,其中最重要的就是界面:如何做才能讓一個(gè)沒(méi)有屏幕的小設(shè)備或電器和用戶進(jìn)行交互呢?這個(gè)問(wèn)題是品牌和設(shè)計(jì)公司Method一直在思考的,以至于他們開(kāi)發(fā)了Henri,這是一個(gè)可以和用戶交互的小設(shè)備,使得它更容易讓設(shè)計(jì)師去探索未來(lái)設(shè)備的UI。

對(duì)設(shè)計(jì)與設(shè)計(jì)師“價(jià)值”的4個(gè)方面思考

用心設(shè)計(jì)

你究竟為誰(shuí)而設(shè)計(jì)

UED從業(yè)者都知道User-centered Design的概念,但真正做到的卻并不多,更多的現(xiàn)實(shí)情況是這樣的:為老板而設(shè)計(jì)——上面的人一拍腦袋就圍繞對(duì)方的idea屁顛屁顛去考慮詳細(xì)方案執(zhí) 行,不去深度考慮這樣做的本質(zhì)原因與合理性,缺乏獨(dú)立思考能力與向上說(shuō)服抗?fàn)幍挠職猓粸镈eadline而設(shè)計(jì)——追求項(xiàng)目按時(shí)上線比什么都重,在時(shí)間有 限的情況下沒(méi)做好優(yōu)先級(jí)管理,集中到關(guān)鍵設(shè)計(jì)點(diǎn)上去,結(jié)果什么都做了,什么都沒(méi)做好;為規(guī)范而設(shè)計(jì)——死守iOS/Android平臺(tái)規(guī)范,死守可用性原 則,不去思考規(guī)范這樣做的本質(zhì)原因(如設(shè)備特性,避免和通用交互操作沖突等),把規(guī)范凌駕于設(shè)計(jì)目標(biāo)和業(yè)務(wù)目標(biāo)之上;為自己而設(shè)計(jì)——以設(shè)計(jì)師的專業(yè)挑剔 目光去要求產(chǎn)品,卻不考慮到這樣的設(shè)計(jì)讓自己滿足了,卻可能令用戶迷惑,沒(méi)有帶給用戶想要的東西,反而增加了他們操作理解的成本……背離了設(shè)計(jì)目標(biāo)的本 質(zhì),變成了為設(shè)計(jì)而設(shè)計(jì),創(chuàng)造出來(lái)的價(jià)值自然也大打折扣。

Workstation-books-l

眼前一亮!25個(gè)令人心動(dòng)不已的全屏網(wǎng)站欣賞

博博

來(lái)源:優(yōu)設(shè)網(wǎng)

Draftfcb

全屏背景網(wǎng)站是吸引訪客的方式之一,且適用領(lǐng)域非常廣。

平常網(wǎng)站,講究字體、排版、配色等等。但對(duì)于全屏網(wǎng)站,一個(gè)漂亮的姑娘 or 帥氣的小哥出境顯得尤為重要。今天我們收集了30個(gè)優(yōu)秀的全屏網(wǎng)站案例,如你所見(jiàn),美女帥哥總是讓人眼前一亮 :)溫馨提醒:看完這些網(wǎng)站,可能童鞋們的心開(kāi)始小鹿亂撞了。在此奉上靜心丸一枚:多讀書,讀好書??偙O(jiān)級(jí)設(shè)計(jì)師推薦閱讀→ 《設(shè)計(jì)師必備圖書目錄》

Ditto Residential

Ditto Residential

 

26個(gè)來(lái)自英國(guó)最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)

博博

the-best-england-website-1

如果你也著迷英倫風(fēng),那么你一定那句耳熟能詳?shù)摹癒eep Calm and Carry On”,這句著名的標(biāo)語(yǔ)可以向上追溯到1939年。隨著英倫風(fēng)在世界范圍內(nèi)的流行和網(wǎng)絡(luò)的快速發(fā)展,這句話也出現(xiàn)了許多變種,比如設(shè)計(jì)師的版本:“Keep Calm and … Design”。這些有趣的文化現(xiàn)象,不僅激發(fā)了英國(guó)人的創(chuàng)意,還間接催生了許多優(yōu)秀的英國(guó)網(wǎng)站。

作為一個(gè)歷史悠久也獨(dú)具個(gè)性的歐洲國(guó)家,英國(guó)有著豐富的文化和藝術(shù)遺產(chǎn),如同“Keep Calm and … Design”這樣古典與現(xiàn)代互動(dòng)式的設(shè)計(jì)對(duì)英倫設(shè)計(jì)師而言簡(jiǎn)直是信手拈來(lái),和諧自然。除了這種獨(dú)特的創(chuàng)意特征之外,英國(guó)網(wǎng)站還有一個(gè)獨(dú)到之處:來(lái)自英格蘭、威爾士、蘇格蘭和愛(ài)爾蘭的藝術(shù)家的緊密合作,將不同地區(qū)的文化藝術(shù)都融合到了網(wǎng)站里面。

配色弱的進(jìn)來(lái)!如何巧用色彩打造動(dòng)人心弦的網(wǎng)頁(yè)設(shè)計(jì)

博博

color-psychology-web-design-1

色彩心理學(xué)被廣泛地運(yùn)用到各個(gè)設(shè)計(jì)領(lǐng)域,這早已不是什么秘密。從日常的雜貨到LOGO設(shè)計(jì),色彩所起到的作用越來(lái)越大,它是給用戶傳遞信息的最重要的因素之一。

根據(jù)Kissmetrics 的說(shuō)法,當(dāng)我們看到一個(gè)色彩的時(shí)候,信息會(huì)傳遞到大腦的下丘腦的某個(gè)區(qū)域中。接下來(lái),信號(hào)會(huì)進(jìn)一步傳遞到腦垂體,然后到甲狀腺腺體。這也就意味著,色彩會(huì)刺激大腦和腺體分泌激素,引發(fā)出我們的情緒反應(yīng),并影響我們的行為。

科學(xué)研究表明,色彩會(huì)影響情緒,會(huì)招致正面的情緒,也能帶來(lái)負(fù)面的影響,有的時(shí)候帶來(lái)的情緒與實(shí)際要的并不匹配。Kissmetrics 接著補(bǔ)充道,網(wǎng)站的訪客通常只需要大概90秒就能針對(duì)一個(gè)網(wǎng)站作出判斷和選擇,而在者其中,有62%~90%的因素是取決于某個(gè)產(chǎn)品的色彩。

安卓手表 VS 蘋果手表

用心設(shè)計(jì)

自PC時(shí)代(包括智能手機(jī)、電視機(jī))以來(lái),計(jì)算機(jī)操作系統(tǒng)的用戶界面中含有各種各樣的控件元素以及操作規(guī)范。也正因?yàn)榻缑嬖睾筒僮鞯牟煌蛊湫纬闪俗约邯?dú)特的系統(tǒng)特征。不同的可穿戴計(jì)算設(shè)備也同樣有著不一樣的系統(tǒng)特性,比如安卓手表和蘋果手表之間的系統(tǒng)差異性。

兩個(gè)操作系統(tǒng)界面都會(huì)包含豐富但又隱性的操作層次/方式。比如有些功能操作需要手勢(shì)激活、或語(yǔ)音命令調(diào)起、又或者通過(guò)硬件實(shí)體按鍵操作等。在實(shí)際過(guò)程中,我發(fā)現(xiàn)我們很難準(zhǔn)確無(wú)誤地記清楚所有這些隱形不可見(jiàn)的且不同的操作方式。

緊跟潮流之布局篇!2015年至關(guān)重要的四種排版趨勢(shì)

博博

2015-4-essential-layout-trends-1

編者按:讓網(wǎng)站布局創(chuàng)意爆棚!互聯(lián)網(wǎng)變化千千萬(wàn),排版模式不離其宗,但總有些非同尋常的布局創(chuàng)意驚艷到我們,它們也最有可能風(fēng)靡2015年,今天@十萬(wàn)個(gè)為什麼同學(xué)總結(jié)了即將流行的四種排版趨勢(shì),一起跟上來(lái)吧!

2015即將流行的設(shè)計(jì)趨勢(shì):

近十年來(lái),互聯(lián)網(wǎng)已經(jīng)發(fā)生了翻天覆地的變化,然而它其實(shí)一點(diǎn)也沒(méi)變。如果看看10年前,我們會(huì)發(fā)現(xiàn)大批網(wǎng)站都有一套通行的排版模式。頁(yè)頭、頁(yè)腳、側(cè)邊欄和內(nèi)容區(qū)域,構(gòu)成了這種直截了當(dāng)?shù)牟季?。這是人們預(yù)期中的網(wǎng)頁(yè)排版。同時(shí)期Macromedia Flash的興起,引領(lǐng)其他排版方式進(jìn)入了一個(gè)新的時(shí)代。布局不必再拘泥于固定格式。當(dāng)然,隨著FLASH的衰退,這種方式也稍稍淡出……我說(shuō)稍稍,是因?yàn)樗缃裼志硗林貋?lái)了。

日歷

鏈接

個(gè)人資料

存檔