最近，一個朋友建議我寫點關(guān)于新聞類網(wǎng)站界面設(shè)計的分析：什么是正確的新聞類網(wǎng)頁設(shè)計，什么是錯誤的。他認為現(xiàn)今的線上新聞用戶體驗非常落后，讓人感到厭倦無比，而且只是他們不用心做罷了，采用AJAX或者類似的技術(shù)就能把內(nèi)容呈遞的完善，而且導(dǎo)航做得十足精美。

一開始我非常贊同他的觀點。藍藍設(shè)計認為新聞類網(wǎng)站的約束在于：過去傳統(tǒng)的報紙以及雜志均為紙媒，動輒就在頁面里融入了那些根深蒂固的慣例。因此用戶在瀏覽時會發(fā)現(xiàn)，這類網(wǎng)站的感覺很熟悉，但是卻限制了視覺表現(xiàn)。與此同時大部分新聞類網(wǎng)站的用戶體驗設(shè)計非常差，經(jīng)常會出現(xiàn)令人閱讀困難的小文本。

從《互聯(lián)網(wǎng)設(shè)計之道》開始，我知道這句話已經(jīng)別人重復(fù)無數(shù)次了，如果把網(wǎng)絡(luò)比作一種媒介的話，那么網(wǎng)絡(luò)是流動的，是復(fù)雜的，也是美麗的。而且網(wǎng)絡(luò)的威力超出了大多數(shù)人的意料。
所以我們一起來看一下這些國際知名的新聞類網(wǎng)站，看看他們的優(yōu)點與缺點。

歸根結(jié)底是移動端的用戶體驗

其實，主要還得是移動端用戶的體驗。然而很多新聞類網(wǎng)站并沒有將此類用戶納入考慮。當(dāng)然，確實很多新聞網(wǎng)站已經(jīng)出了iOS或者Android版本的原生應(yīng)用，可惜效果并不理想，大部分的用戶下載完之后，用幾次就基本廢置到一旁了。

我們獲取信息的途徑是什么？因為太過官方，內(nèi)容太過常規(guī)，現(xiàn)在的用戶很少主動瀏覽新聞類網(wǎng)站。他們通常是通過點擊朋友、親戚、網(wǎng)友的分享來得到信息。通過社交網(wǎng)絡(luò)，E-Mail，RSS Feed以及新聞源中的鏈接來得到信息。而鏈接導(dǎo)向的往往是網(wǎng)站，而不可能是應(yīng)用。因此，每個新聞類網(wǎng)站都必須要注重移動端的用戶體驗?，F(xiàn)在用手機瀏覽消息的人實在是太多了。

那么問題又是什么？為什么新聞類網(wǎng)站不改進呢？
路很漫長，前方有兩塊絆腳石有待清除。

平面設(shè)計和網(wǎng)頁設(shè)計是兩個截然不同的領(lǐng)域，這兩個領(lǐng)域有不同的設(shè)計需求、設(shè)計實踐和設(shè)計方法。

例如，在網(wǎng)頁設(shè)計中更常使用基于像素或柵格的文件格式，諸如JPG、GIF或PNG。相反，在平面設(shè)計領(lǐng)域像logo這樣的圖形可能會用到不同尺寸，因此使用最多的格式則是EPS和AI這樣的矢量格式。然而，用于網(wǎng)頁界面設(shè)計的矢量格式，如SVG或HTML5 Canvas則不能廣泛應(yīng)用，也不會被所有瀏覽器所支持。

另外，用于web端的圖形有基于它們自身的相關(guān)處理方式。其中一條便是你要時刻注意文件的大小，因為你需要使你的網(wǎng)頁加載越快越好。作為一名網(wǎng)頁ui設(shè)計師，你應(yīng)當(dāng)盡量減少HTTP對圖像的請求次數(shù)——無論通過減少圖片的使用數(shù)量還是將它們整合成CSS sprite——以及確保你選擇了正確的圖像格式，使其在圖像大小和質(zhì)量間得以平衡。

Photoshop是平面設(shè)計師和網(wǎng)頁設(shè)計師使用的行業(yè)標(biāo)準(zhǔn)工具。以下是你在創(chuàng)建web端使用圖像時的一些簡單的小技巧。

1. 將圖片保存成Web所用格式

在網(wǎng)頁設(shè)計中，你必須確保你的圖像大小越小越好。當(dāng)然，當(dāng)你想要圖片完好顯示時可以拋棄這條原則。
在Photoshop中創(chuàng)建圖像的完美方法便是平衡質(zhì)量與文件大小。
網(wǎng)頁設(shè)計師經(jīng)常犯的一個錯誤便是使用“另存為”命令，而不是使用“存儲為Web所用格式”。

扁平化界面設(shè)計越來越火爆，那么在弱化視覺效果的情況下，有ui設(shè)計師提到該從交互方面使體驗更加愉悅，現(xiàn)在很多App界面設(shè)計也在努力朝這一方向發(fā)展，例如最近火遍全球倍受好評的 《FACEBOOK PAPER 中23個的設(shè)計細節(jié)》，還有《設(shè)計師新寵！交互神器ORIGAMI》等都足以讓人期待交互的未來。

今天藍藍設(shè)計收集總結(jié)了一組移動端的App動畫設(shè)計，朋友們可以學(xué)習(xí)一下。

百度云UE負責(zé)人@elya妞也分享了一篇App動態(tài)設(shè)計的好文，基礎(chǔ)不行的同學(xué)可以補補：
提升品質(zhì)！豐富App動態(tài)效果的六點原則

1、flipboard：

利用上下動畫來切換到下一個界面（由于網(wǎng)慢數(shù)據(jù)沒有加載出來）；

用戶界面設(shè)計元素是現(xiàn)在的熱門焦點，我們很多設(shè)計師的工作已經(jīng)和它息息相關(guān)。那么，如何提高UI設(shè)計水平呢？這也是一個永恒的話題，值得探索、值得鉆研。而今天要和您聊聊的是在用戶界面組件中，存在與網(wǎng)站和移動應(yīng)用程序的切換開關(guān)ui設(shè)計，是不是很有價值的話題呢？設(shè)計師通常試圖優(yōu)雅或吸引力的去設(shè)計各種形狀、尺寸和主題來詮釋自己對切換開關(guān)界面設(shè)計的理解。今天藍藍設(shè)計展示在下面的圖片，都是附帶psd源文件的，戳鏈接即可。這意味著，這些文件是完全可編輯的。你可以自由修改顏色或二次創(chuàng)新這些開關(guān)，直到在你的設(shè)計里看上去漂亮和諧。
Toggle Switch PSD

在這篇文章中藍藍設(shè)計收集了許多可免費下載的注冊登錄界面設(shè)計PSD，從簡潔的扁平化到精致的擬物化ui設(shè)計都有，童鞋們可以依自己的需求擇優(yōu)而求。

Login Free PSD

在產(chǎn)品設(shè)計中，產(chǎn)品界面、使用情景、用戶操作等都會影響用戶對產(chǎn)品的體驗。因此我們在ui設(shè)計的過程中應(yīng)遵循一定的原則，避免設(shè)計者片面的根據(jù)自己主觀認識對產(chǎn)品做出抉擇。

原則1：用戶界面設(shè)計應(yīng)該是基于用戶的心里模型，而不是基于工程實現(xiàn)模型

就是把后臺本來很復(fù)雜的事情通過設(shè)計符合用戶日常生活中常用的瀏覽方式或操作方式。其實這一點是設(shè)計師把生活中的細節(jié)和數(shù)據(jù)結(jié)合的凝聚點，用戶的心理模型抓的越準(zhǔn)，界面就會越優(yōu)秀。

藍藍設(shè)計從自身豐富的應(yīng)用開發(fā)設(shè)計實踐經(jīng)驗和大量的優(yōu)秀界面設(shè)計應(yīng)用實例中，總結(jié)提煉了從產(chǎn)品概念、ui設(shè)計、開發(fā)到市場推廣等一系列的相關(guān)原則，指導(dǎo)移動開發(fā)人員怎樣來打造一款成功賺錢的應(yīng)用。姍姍來遲的這篇文章希望給大家?guī)硪恍└形蚺c幫助。

原文地址：http://m.lzhte.cn/ 

絕大多數(shù)應(yīng)用都失敗了。 這個殘酷的現(xiàn)實令很多幻想破滅的開發(fā)者開始認為，在Apple store中成功就像在淘金熱潮中致富一樣：你所需要的僅僅是運氣。

“運氣論”這種想法是危險的，它就像是用來減輕失敗痛楚的麻醉藥。感到痛苦是件好事，這樣才能看到問題所在。如果我的應(yīng)用失敗了，我會尋找失敗 的原因。與其埋怨那些超出你控制之外的因素，為什么不看看像tap tap tap和Tapbots這些公司做了些什么，可以讓他們一次次的成功。

曾經(jīng)有一段時間，大伙兒都在努力把網(wǎng)頁內(nèi)容全部塞進首屏。今時不同往日，網(wǎng)站設(shè)計師和開發(fā)者們不再害怕滾屏，而是將背景漸進展示、頁面元素動畫以及其它基于滾屏動作的酷炫效果融入其中，把滾屏當(dāng)作一個吸引訪客的絕佳靚點來好好展現(xiàn)。

為了給親們帶來新的ui設(shè)計靈感，藍藍設(shè)計特意收集了一系列把滾屏玩出新花樣的網(wǎng)站界面設(shè)計，跟我來感受一下吧！

Hot Dot

年尾總結(jié)年初預(yù)測已經(jīng)成為了多數(shù)人的習(xí)慣。2013年很多人以為世界真的會末日，我們真的看不到2014年的日出，但是事情并沒有發(fā)生， 我們順利的活到了2014年，那么今年的網(wǎng)頁設(shè)計領(lǐng)域又有什么新的發(fā)展呢？是延續(xù)經(jīng)典還是推陳出新？通過大師的預(yù)測，我們發(fā)現(xiàn)了一些蛛絲馬跡，那么今天藍藍設(shè)計就來給大家分享一下這些寶貴的信息！如果你有什么想法記得在下方的評論里告訴我們呦~

01. 先進的雜志式布局

最近的網(wǎng)頁設(shè)計中，有許多網(wǎng)頁是運用大圖元素作為網(wǎng)頁背景來做界面設(shè)計。一張好看的圖片能吸引大家注意力和點擊的欲望，并讓你的網(wǎng)站更有設(shè)計感。不妨一起來看看今天藍藍設(shè)計推薦給大家的這些運用大圖的網(wǎng)頁設(shè)計案例，看看有哪些你可以學(xué)習(xí)并運用到下一次的ui設(shè)計當(dāng)中。

Big Cartel Shop