首頁

不同情境的列表設計

藍藍設計的小編

藍藍設計將分析列表在各種情境的界面設計方法,以及需要注意的事項。

列表常見的使用情境

  1. 概觀:瀏覽較多的的信息時,列表可以提供一種概觀性的的方式來呈現(xiàn)內容。
  2. 逐一瀏覽項目:用戶可能逐一或隨機的的閱讀信息,就像是 Facebook 動態(tài)信息。
  3. 搜尋:用戶可能在列表上尋找他們想要的信息,就像是 Google 搜尋結果。
  4. 分類與過濾:用戶可能正在分類信息或者使用一些方式(檔案大小、名稱)過濾內容。
  5. 項目的整理、新增、刪除與分類:用戶正在整理信息,此時很有可能需要多選、搬移的輔助功能。

模式1. 雙面版選擇器

雙面板列表是一種將列表區(qū)分為兩個區(qū)域的一種設計模式,用戶可以自由在第一個面上選擇項目,第二個面版上會顯示面板一選擇的項目內容。

優(yōu)點

  • 操作非常的有效率,不需要來來回回的在不同列表切換。
  • 減少用戶記憶與認知的負擔,使用者不必了解內容在列表上的位置,也不需要學習如何返回列表。

缺點

  • 需要比較大的屏幕時才能支持。

交互設計中如何增加趣味性、提升愉悅度?

藍藍設計的小編

「好的產品關注功能,優(yōu)秀的產品關注情感」

趣味性、愉悅度,這些都是針對用戶情感化設計的領域。

功能、實用性,這些需要很強邏輯性的事物很難和情感產生關聯(lián),并不是指這些不重要,它們很重要,它們是基礎,但缺少了情感的作用,很難產生一些東西,像:快樂、愉悅、悲傷、美…

花、大海、春天、小屋… 這些都是很普通的名詞,但將它們富有詩意的組合在一起:我有一所房子,面朝大海,春暖花開。接受者會投入不同的情緒去理解這樣一個組合。

上面這些名詞就像我們在界面設計過程當中所遇到的各種元素,按鍵、菜單、icon、動態(tài)效果… 將它以詩意的方式組合在一起,由此用戶產生了情緒上的波動。

交互設計的本質是對用戶行為的一種界面設計,直達內心的UI設計能夠影響用戶自身的情感,從而導致用戶的行為。常會有設計師說將用戶當成是一個易怒、情緒不定、不明理的人,為什么?因為人的本質是非理性的,邏輯是理性層面的考量,而面對情感這個潛藏在理性背后的東西,需要設計師有深厚的功力,這不是單純技巧上的問題,而是一種時間、感覺、情緒等綜合的圓熟。

針對用戶情感進行設計時需要考慮產品的用戶群,情感設計的應用將會為產品塑造個性,需要明確產品個性是否與目標用戶相符。所以題主需要考慮一下,所說的趣味性是否與產品所預期的個性相符,這很重要。

扯回到正題,交互設計中的趣味性如果讓我用一句話表達,我會說:「情理之中,意料之外

btw:自己對有趣的定義可能會與大家不太一樣。

10個提供免費CSS教程的網站

藍藍設計的小編

藍藍設計對每一個網址做了簡單的說明,你可以先了解大概的教程類型,再決定是否學習。(提醒:大多數教程為英文網站,童鞋們不要擔心,趁機鍛煉下英語,也可以用google翻譯)

假如你想從零開始學習如何建造一個網站,還可以到藍藍設計每日博客去發(fā)現(xiàn)藍藍設計精心推薦的網站 : )

01  Html.net

如果你的問題為:什么是CSS,它是怎樣被創(chuàng)造的,它如何運行工作,有哪些基本語法?所有這些都可以在這個網站得到答案。

01

動感十足的體育競技類網頁設計欣賞

藍藍設計的小編

生命在于運動,體育運動是保持健康活力不可缺少的一個環(huán)節(jié),與運動相關的網站設計自然也要充滿積極向上的風格。運動服飾、運動員、運動方式,展示運動過程中的美。

特寫的照片是除視頻外最能展示運動瞬間美的載體,所以一張激情十足的照片加上動感的交互方式,是塑造運動網站界面設計之美的神兵利器。今天就和藍藍設計一起感受這些充滿活力的正能量網站吧!

更多與運動相關的網站設計欣賞:http://m.sillybuy.com/

Solasie

Solasie

網頁設計中圖片格式的選擇技巧

藍藍設計的小編

網頁設計中,切圖輸出是指UI設計師將手邊繪制完成的原始圖稿轉換成網頁界面設計用的圖片格式、并交由下一位人員網頁排版的重要步驟。選擇適合的圖片格式不但可以將讓設計得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小,節(jié)省下載時間、有效的減少服務器的負擔。今天藍藍設計就和朋友們分享一下網頁設計中圖片格式的選擇技巧
UI設計師最常用的 Photoshop 以及 Illustrator 為例,都提供了「儲存為網頁用…」的功能。與默認的存盤模式不同,在這個模式中,軟件提供了仿真圖文件輸出的質量調整、檔案大小控制等針對網頁圖文件需求的選項:

網頁設計中優(yōu)化圖片的6大技巧

藍藍設計的小編

平面設計網頁設計是兩個截然不同的領域,這兩個領域有不同的設計需求、設計實踐和設計方法。

Photoshop是平面設計師和網頁設計師使用的行業(yè)標準工具。以下藍藍設計分享的是你在創(chuàng)建web端使用圖像時的一些簡單的小技巧。

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

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

2702d5d227fdbb0be2cd35ac6a37f76f 網頁設計師必須知道的6個小技巧

設計師應該知道的圖片優(yōu)化技巧

藍藍設計的小編

藍藍設計收集了UI設計前輩們的一些關于圖片優(yōu)化的技巧,在此收攏到一起,對于各個方法的優(yōu)化原理做了一些研究,希望能給大家對于圖片優(yōu)化這一塊起到拋磚引玉的作用。提高朋友們的界面設計能力!

下面來給大家介紹一下圖片的一些基本原理和優(yōu)化的方法:

1.JPG原理與優(yōu)化
JPG是一種對彩色或灰階之類連續(xù)色調圖形作壓縮和解壓縮的標準.這個標準是由ISO/IEC JTC1/SC29 WG10所訂定。
壓縮算法為正、反離散余弦轉換,如下圖:

正離散余弦轉換

如何讓網站提速:圖片優(yōu)化網站推薦

藍藍設計的小編

頁面的加載時間是每一個UI設計師都擔心的數據,或者至少是每個UI設計師都應該擔心的問題。圖片的大小肯定是一個需要留意的問題。這就是為什么藍藍設計在這里寫了幾個有助于優(yōu)化頁面中的圖片的小技巧,這些小技巧將有助于大家解決這個問題,這些小技巧也可以在你需要優(yōu)化圖片的時候提供很多幫助。提高大家的網站界面設計能力!

TinyPNG
TinyPNG是使用智能有損壓縮技術,來減小png圖片的大小。

優(yōu)秀圖像優(yōu)化工具推薦

藍藍設計的小編

網頁設計中往往需要大量部署圖片。網站設計的品質取決于圖像,如果一個網站的界面設計圖像品質精良,那么體驗將非常的棒。
可以去看看那些優(yōu)秀UI設計師和開發(fā)者的作品,他們往往非常注意圖像的優(yōu)化。既保證了圖片的質量,又適度壓縮圖像,以提高加載速度。

藍藍設計將介紹多種極佳的圖像優(yōu)化工具,可以在日常應用中幫助你。

Online Image Optimizer(在線)

The Online Image Optimizer是一款在線壓縮圖像工具。支持本地上傳圖像進行壓縮(最大不超過2.86MB)??梢赃x擇圖像輸出類型。默認輸出格式設置為和輸入圖像格式相同。

Online Image Optimizer

注冊表單的設計技巧

藍藍設計的小編

網上擠滿了各種各樣的UI設計方案,事實上我們已經有一套套的方案可遵循。但!設計永無止境!哪怕是一個注冊表單的界面設計,也值得再細心研究。下面藍藍設計給出注冊表單設計5個小技巧

1、別讓用戶重復填寫相同的內容

幾乎每個人都經歷過這樣一個事實:注冊時被要求填寫郵箱地址兩次或重復輸入密碼。但是這其實是沒有必要的。僅填寫一次,因為用戶一般都記得自己常用的郵箱地址和密碼。假設哪天用戶忘記密碼了可以通過郵箱找回,再多此一舉填寫兩次反而更加容易導致用戶流失。

5個注冊表單的用戶體驗設計技巧

下面是一些非常值得參照的表單設計:

 

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔