空間設計事務所 http://www.zoosmid.com Mon, 15 Apr 2019 13:56:55 +0000 zh-CN hourly 1 https://wordpress.org/?v=4.9.10 網站登錄頁面用戶體驗及風格設計 http://www.zoosmid.com/archives/3064 http://www.zoosmid.com/archives/3064#comments_reply Fri, 12 Apr 2019 05:59:03 +0000 http://www.zoosmid.com/?p=3064 文章轉載,來源素馬設計

網站設計發展至今已有多年歷史内蒙古11选5基本走势图,網站設計的技術和流程也相當成熟穩定内蒙古11选5基本走势图内蒙古11选5基本走势图。從一開始,我們對網站設計的理解就是要好看内蒙古11选5基本走势图,要漂亮,要好用∧诿晒?1选5基本走势图,F在可不止這樣了,還要把顧客當上帝一樣服務,要照顧他的使用感受。在所有網站的頁面設計當中内蒙古11选5基本走势图,我個人覺得内蒙古11选5基本走势图,網站的登錄頁面設計是最有意思的,最考驗一個ui設計師、交互設計師和一個網站的用戶體驗的地方。當然内蒙古11选5基本走势图,跟網頁表單相關的頁面界面設計都涉及到用戶體驗内蒙古11选5基本走势图。登錄頁面是一個用戶開始考慮深入網站的入口,是進入我們家里内蒙古11选5基本走势图、進入公司里做客的門,我們該怎么設計網站登錄頁面才最漂亮最貼心呢内蒙古11选5基本走势图。

登錄類型

用戶通常有兩種不同的方式來登錄一個網站内蒙古11选5基本走势图。最新的一個方式是通過某社交網站的賬號采用第三方授權登錄的方式,這種方式在很多app上都可以看到。對于一個新的app或者產品而言内蒙古11选5基本走势图,如果不想打攪用戶去填寫創建一個賬戶,這是尤為正確的一個做法内蒙古11选5基本走势图。譬如通過Facebook或者Twitter去登錄是輕而易舉的事情,因為你只要點擊一個按鈕内蒙古11选5基本走势图,然后等上幾秒鐘去連接上社交網站就可以了。

另外一種方法是通過提供用戶名或者郵件地址以及密碼來登錄内蒙古11选5基本走势图。這是一種比較常用的且可以提升其用戶體驗的登錄方式。這里所說的技巧也是和這種登錄類型相關的。所有登錄類型都各有利弊,而現在我們主要討論一下如何提升這種比較典型且傳統的登錄方式的體驗。

1. 允許郵件登錄

我們常常能看到一個網站在注冊的時候不需要填寫用戶名内蒙古11选5基本走势图。使用郵箱去登陸也是很正常的,對嗎内蒙古11选5基本走势图内蒙古11选5基本走势图?要么使用用戶名内蒙古11选5基本走势图,要么使用郵箱,我覺得這都沒什么問題内蒙古11选5基本走势图内蒙古11选5基本走势图。請兩種方式都允許,我的問題就是當郵件登陸也應該被允許的時候為什么只認用戶名呢。

我有遇到過那種用郵箱或者用戶名都可以登陸的,但標簽信息只顯示“用戶名”,設計上這是一個缺陷内蒙古11选5基本走势图。

總的來說是這樣的,通常用戶使用的都是相同的郵箱地址登陸,但并不一定使用的是相同的用戶名。比如說,我Twitter賬號的用戶名和我Instagram的用戶名就不一樣,因為有用戶在Instagram上已經注冊使用的用戶名跟我在Twitter上使用的一樣,就是這么巧。

而且除此之外,我OKCupid賬戶的用戶名跟其它賬戶也不一樣内蒙古11选5基本走势图,而這一回是我故意的,因為在OKCupid里我不想讓別人知道我的全名。然而,所有的這些賬戶都可以使用相同的郵箱登陸。不管什么方案内蒙古11选5基本走势图,在登陸的時候用戶名和郵箱都被允許使用的話對用戶來說的確將會方便很多内蒙古11选5基本走势图。

2. 提供一個清晰的錯誤提示信息

說到登錄,你為用戶提供的反饋信息是多了還是少了其實是比較講究的。信息過多可能就會被黑客利用,而信息過少可能又會增加用戶的困惑。

我們得承認那種系統自動生成的錯誤提示比如“無效的輸入”對用戶來說并沒有幫助。錯誤提示應該用比較通俗易懂的語言内蒙古11选5基本走势图。

如果你想在用戶體驗上更好,你可以使用Javascrip來幫助用戶提前確認輸入信息的正確性内蒙古11选5基本走势图。 ? 有一個最好的案例,就是在智能手機上用戶錯把.com輸入成了.con或者說小點也忘了輸入,系統都可以識別并且及時提醒内蒙古11选5基本走势图。在用戶點擊提交或者在輸完所有信息前就可以預先看到反饋信息内蒙古11选5基本走势图,知道自己輸入的信息正確與否内蒙古11选5基本走势图。而用戶的生活也因此變得更簡單,因為它節省了用戶的時間。(如果你有安全方面的擔憂,錯誤消息提示信息不用特別的具體)

3. 為用戶提供找回密碼的鏈接

你可能會覺得這是顯而易見的事情,但有些網站就會忽略掉它。你常常會想要一個鏈接來找回忘記的密碼。(忘記用戶名也是D诿晒?1选5基本走势图。┎灰獙⑦@個鏈接藏起來或者要讓用戶經歷多次失敗的嘗試、歷經千辛萬苦才找到它。要讓它時刻準備著。它并不一定要在顯而易見的地方;它也不是說有那么重要;但它就是應該出現在登錄表單的周圍内蒙古11选5基本走势图。

4. 干擾 — 自由登入

一般來說有兩種方式來設置登錄,一種是在頁面上方的窗口登錄,還有一種是有單獨的一個登陸頁面。

對于采取單獨頁面的登錄方式的確是有一些優勢的。然而,如果你采取了這樣的方式,請記住在登錄頁的周圍不要有太多的干擾信息内蒙古11选5基本走势图,你首先想要的是用戶登錄進賬戶,然后才是產品推廣諸如此類的信息内蒙古11选5基本走势图。用戶登錄后内蒙古11选5基本走势图,想要推銷一些東西給用戶就會變的容易許多内蒙古11选5基本走势图。

此外,我要提到保留和轉換的問題内蒙古11选5基本走势图。對于用戶來說干擾越少,用戶就更輕易的可以登錄,使你進一步推銷產品。如果這種方法對于注冊表單和結賬系統都奏效的話,那么也應該同樣適用到登錄。而且頁面上的無關的條目少了,加載的速度也會變快的。

5. 重要的標簽

任何表單(控件)上的文案及位置都很重要。你無論做什么,不要把“提交”的按鈕寫成“提交”,而是用“登陸”代替。就是這么簡單。這樣可以讓用戶知道和預想到點擊后的確切的事情。

它提高了用戶體驗并且對你來說幫助很大内蒙古11选5基本走势图。避免只有一個輸入框讓用戶填寫,至少也要放一個圖標在里面,但最好還是使用一個輸入標簽來提示用戶該填寫什么。不要忘了明確内蒙古11选5基本走势图内蒙古11选5基本走势图,用郵件和用戶名的方式都可以登錄。

登錄頁的風格

1.體現品牌類

這種類型的登錄頁面多是由LOGO與登陸框兩個元素組成内蒙古11选5基本走势图,頁面質感比較強内蒙古11选5基本走势图,操作性比較強内蒙古11选5基本走势图,用戶在這樣的登錄頁能快速的完成填寫與登錄,同時還能對產品的品牌一目了然,整個頁面呈現一種比較理性的設計内蒙古11选5基本走势图,沒有任何的視覺干擾。

如果硬要說是有干擾的話内蒙古11选5基本走势图,可能干擾的對象就是設計師們,設計師對高質感的設計都有很敏銳的觀察力,頁面中的設計細節(如漸變、陰影、高光等)可能會讓設計師短時間內停下來觀察,隨后快速完成注冊。

2.有趣味性的設計

當這種風格的登錄頁面展現在用戶眼前時内蒙古11选5基本走势图,用戶的第一視覺中心往往實在這個圖片上,其次才會看登錄框。但這些廣告圖又很好的傳達了產品的相關信息,如:品牌(是什么產品)内蒙古11选5基本走势图、性質(這個產品是用來做什么的),或者傳達一種節日的氛圍(春節、國慶等)。

雖然第一視覺中心不在登錄框上,但這些廣告圖又很好的詮釋了這個產品的涵義,加深了用戶對此產品的認識,同時内蒙古11选5基本走势图,這些廣告圖趣味性比較強,雖然是廣告,但并不會讓用戶感到反感内蒙古11选5基本走势图。

還有一種相似的廣告圖,廣告本身與此產品關系并不大,這些圖的內容更多的實在表現一種意境,一種情感,像是回憶、憧憬、幻想内蒙古11选5基本走势图、童話等,能讓用戶進入一種意境中内蒙古11选5基本走势图,產生共鳴内蒙古11选5基本走势图。

3.情景類

這種全背景的登錄頁,用大背景圖來烘托出比較隨性的情境,在登錄框設計上内蒙古11选5基本走势图,感覺比較輕松不拘束。比較適合用在個人空間内蒙古11选5基本走势图、博客等產品中。

廣告圖的寓意

綜合這些廣告圖的類型,其實都是在表達四種寓意:品牌宣傳、相關廣告、情景化設計和節日相關。

登錄頁廣告圖的變化,很多時候都見證了產品從宣傳”產品品牌”到宣傳”產品理念”的一個過渡内蒙古11选5基本走势图。在第一階段宣傳品牌時内蒙古11选5基本走势图,很多時候都以直白的產品特性為宣傳點内蒙古11选5基本走势图,隨著產品的運營,第二階段會對產品特性加以包裝,結合趣味性的設計語言,使產品的特性包含一些寓意,在接下來的階段中内蒙古11选5基本走势图,會融入越來越多的情感化設計内蒙古11选5基本走势图,情感化的文字,可以使用戶在了解品牌的同時,也加深對產品理念的認識内蒙古11选5基本走势图。

小結

以上分享的關于網站登錄頁面設計的用戶體驗研究及設計風格分享就這么多。設計不只是為了漂亮,也是為了好用内蒙古11选5基本走势图,照顧用戶使用的感受。這一切都是為了讓事情變得更加簡單化和人性化,希望通過這些技巧的分享,能讓你的用戶更加順暢的通過登錄注冊頁面,樂意去操作這些表單頁面内蒙古11选5基本走势图,最終提升整個網站的用戶體驗内蒙古11选5基本走势图。

]]>
http://www.zoosmid.com/archives/3064/feed 0
網站設計風格如何定位?品牌統一性如何體現内蒙古11选5基本走势图? http://www.zoosmid.com/archives/3063 http://www.zoosmid.com/archives/3063#comments_reply Fri, 12 Apr 2019 05:46:35 +0000 http://www.zoosmid.com/?p=3063 文章轉載内蒙古11选5基本走势图,來源素馬設計

深圳做網頁設計這些年,跟顧客探討内蒙古11选5基本走势图、溝通、反復確認最多的問題,就是網站設計風格如何定位以及如果通過網站多媒體做品牌延伸設計内蒙古11选5基本走势图,確保品牌的高度統一性??梢赃@樣說,網站設計如能在版式風格及品牌一致性方面做到高度原創、獨特的話,視覺稿過稿率是極高的。今天分享的這篇文章内蒙古11选5基本走势图,詳細介紹5個通俗易懂且有效的知識點技巧,相信可以在設計工作效率上幫到大家。

01

在產品前期設計風格探索的過程中,如果使用到情緒版内蒙古11选5基本走势图,會遇到哪些問題或者局限性?

其實任何標準化的方法論都會有一些局限内蒙古11选5基本走势图,我們面臨不同的產品内蒙古11选5基本走势图,不同的場景必然不能100%匹配内蒙古11选5基本走势图。例如情緒板,步驟大致是召集利益相關者,通過他們對產品的感覺,規劃,定位提煉關鍵詞,然后對關鍵詞進行究根溯源,然后采用圖像匹配的方式内蒙古11选5基本走势图内蒙古11选5基本走势图,讓利益相關者選擇他們認為最接近他們心里想法的圖片。最后通過整個過程的關鍵詞和圖片再提煉出風格走向加以指導設計。

1.利益相關者的召集及選擇,做一次完整有參考價值的情緒板所話費的成本是較高的,所以務必做好充分的準備。這里的利益相關者指的是具有代表性的用戶内蒙古11选5基本走势图、公司內部產品研發及市場運營團隊相關者内蒙古11选5基本走势图。用戶選擇以中級和專家為宜内蒙古11选5基本走势图内蒙古11选5基本走势图,這里需要考慮用戶的人口學背景盡量分散和不重復。

公司內部團隊需要將核心人員以及各部門領導還有老板都邀請進行參與内蒙古11选5基本走势图,這里會出現的問題是内蒙古11选5基本走势图,必須強調目標内蒙古11选5基本走势图内蒙古11选5基本走势图,讓所有利益相關者明確此次情緒板調研的目的和想達到的結果内蒙古11选5基本走势图。不然的話會出現為了迎合上司而作出不誠實的判斷和結論的問題内蒙古11选5基本走势图内蒙古11选5基本走势图,這樣會失去很多機會。

2.關鍵詞提煉,在進行這個步驟的時候要注意内蒙古11选5基本走势图,利益相關者會從自己對產品的認知出發從而對產品產生不同的情緒内蒙古11选5基本走势图,但是無論如何關鍵詞都可被分為2類:具象和抽象。對于具象的關鍵詞我們從字面意思能夠較準確的刨析利益相關者想表達的意思内蒙古11选5基本走势图,但是抽象關鍵詞内蒙古11选5基本走势图,我們要對其進行3-5個why的深度挖掘内蒙古11选5基本走势图,否則可能曲解其想要表達內容的含義。

3.圖像選擇内蒙古11选5基本走势图,關鍵詞不能直觀表達感情及想法,這時候需要借助圖像内蒙古11选5基本走势图。這里需要注意的是1.圖片需要清晰内蒙古11选5基本走势图,有主體。2.同一關鍵詞的圖片需要找多張不同場景、感情、色彩的圖片,以便準確定位内蒙古11选5基本走势图。

4.導出結果及方向,之前提過需要老板及各部門領導的參與,希望他們站在對產品戰略内蒙古11选5基本走势图,商業模式的角度考慮符合用戶的產品風格以及提出建議,可導出的結果有很多内蒙古11选5基本走势图,例如色彩、字體内蒙古11选5基本走势图、logo内蒙古11选5基本走势图、排版、材質等等,但這些都是以過程中最后的結果為參考去設計去修正的,不要過于依賴結果内蒙古11选5基本走势图。

注意點:很多時候在做情緒板之前我們其實內心就有一個風格方向内蒙古11选5基本走势图,但是設計師的理解依然過于片面,我們依然需要從用戶、產品定位、以及場景出發去挖掘相對客觀的結果。

圖片來自網絡 作者Andreea Vlad

02

如果確定風格之后,你將如何在設計中體現品牌,做到品牌統一性,并且在用戶心中深刻植入品牌形象?

品牌邏輯:品牌=內容+渠道+時機

品牌發展過程:發現、認識、記住、喜歡、忘不了内蒙古11选5基本走势图。

內容可以理解為他的展現形式内蒙古11选5基本走势图,符號形象内蒙古11选5基本走势图、產品展示、品牌形象。渠道即使品牌在市場上曝光以及傳播的途徑内蒙古11选5基本走势图。一個非常強大品牌能夠通過溢價的作用,讓一件成本并沒有那么高的商品賣出非??捎^的價格,這就是品牌的力量内蒙古11选5基本走势图。

從品牌的基因角度講設計使多個產品内蒙古11选5基本走势图,多個鏈路建立關聯性,引發用戶聯想。這些聯想也讓品牌基因得到很好的傳播。簡單的說就是以細節滲透各個鏈路,將理念以設計的方式傳達給用戶。

舉個例子:一個移動端產品從哪些方面可以體現品牌理念内蒙古11选5基本走势图?通過情緒板内蒙古11选5基本走势图,我們驗證了各方的猜想内蒙古11选5基本走势图,那么我們就可以從以下細節去強化產品的品牌感:

1.視覺元素:文字風格,大小内蒙古11选5基本走势图、圖片風格、剪裁、圖標風格、留白内蒙古11选5基本走势图、情感插畫。

2.交互動效:信息架構内蒙古11选5基本走势图内蒙古11选5基本走势图、任務流程、頁面切換、操作反饋、異常提示、設備特性内蒙古11选5基本走势图。

3.品牌vi:包裝内蒙古11选5基本走势图、物料、logo、文案、廣告等。

不同的文字大小、粗細、間距對比起來都會呈現不同的氣質。圖片的剪裁方式以及運營圖片的風格,留白的多少,情感化插畫的表現形式,品牌卡通形象的使用内蒙古11选5基本走势图,都一定程度上形成品牌的記憶特性。統一的交互手勢,轉場動畫,包括所有的反饋提示内蒙古11选5基本走势图。統一的文案話術内蒙古11选5基本走势图,獨特創意的廣告宣傳、以及包裝,這一切設計元素必須都始終圍繞產品的理念愿景以及用戶的定位來進行設計。

一個成功商業產品,首先需要所有團隊成員有一個共同的目標内蒙古11选5基本走势图,并且大部分人具有品牌思維和設計思維,將其落實到和用戶的每一個觸點中去,也就是我們所說的服務設計内蒙古11选5基本走势图,這樣品牌的影響力才能逐漸深入人心。

圖片來自網絡 作者Ramotion

03

如何衡量設計是否是成功的?請說出具體是如何衡量的方法

1.理解業務目標 和設計目標

設計目標其實屬于業務目標的一部分,而設計目標服務于業務目標内蒙古11选5基本走势图,設計目標在服務業務目標的同時也要結合用戶目標。

2.數據(具體可以去看阿里的《U一點料》)

GSM:Goal 目標 、Signal 信號 、Metric 指標

五度模型:吸引度内蒙古11选5基本走势图、完成度、滿意度、忠誠度、推薦度

圖片來自網絡

04

請描述一下内蒙古11选5基本走势图,你認為規范的設計流程。

這里不非常詳細的說内蒙古11选5基本走势图,只說需要注意的點:

1.需求的來源是否基于業務目標和用戶目標内蒙古11选5基本走势图,并且是否深入洞察。目前的一個大趨勢想必大家也知道UXD的方向内蒙古11选5基本走势图,UI/UX設計已經不能局限于自己的一畝三分地了,勢必需要深刻了解業務,并自我驅動内蒙古11选5基本走势图。

2.需求涉及的利益方是否達成一致,開發前后端是否溝通到位,項目進度的節點是否排好,如果資源短缺是否進行優先級梳理内蒙古11选5基本走势图,準備plan B,時間充裕應該做可用性測試或者A/B測試。

3.設計復盤内蒙古11选5基本走势图,回顧設計目標,衡量設計結果内蒙古11选5基本走势图,發現缺陷并及時優化。

4.尋找更高效的設計策略及設計手段内蒙古11选5基本走势图,關注新技術。

圖片來自網絡 作者Fe Ribeiro

05

ued如果在公司話語權較低,如何自主推動項目落地。例如内蒙古11选5基本走势图,ued推動需求優先級較低,開發資源排期靠后,此類問題如何解決内蒙古11选5基本走势图?

一般公司難以避免的問題内蒙古11选5基本走势图,設計屬于中臺,在中臺中的地位確實比較低。之前在品牌的話題中說道,如果大部分人都擁有設計思維或者品牌思維内蒙古11选5基本走势图,那么想必并不難推進?,F在的問題在于:

1.開發資源不足。

2.以運營、產品為導向的公司研發必定優先完成這些業務方的需求。

3.UED缺乏足夠說服力的數據或者證明自己要推進的需求很重要很緊急。

4.個人執行力、推進力不足。

雖然現在很多公司都標榜自己以用戶體驗為唯一準則内蒙古11选5基本走势图内蒙古11选5基本走势图,但是實際上只不過是一個口號。在發展業務的同時能夠兼顧到一點用戶體驗已是大幸内蒙古11选5基本走势图,所以目前我們能做的就是尋找我們的業務方,并用事實說服他們一起推進需求。UED的影響力建立需要逐步提升,需求總有先有后不必過于爭搶。

網站設計風格在當下,大致有哪些關鍵詞標簽?

1.全屏網頁設計(Full Screen Design)

網站設計制作所謂設計不分家,近年來平面設計里“純凈”“留白”等概念也被互聯網設計吸取,為了更簡單明了的突出主體,提供更舒適的感官感受,很多網站開始采用全屏網頁設計,利用精心挑選設計的漂亮背景,加上合理的頁面布局,視覺沖擊力大可很好的吸引觀者注意。通常頁面內的文字內容不會特別多(所出現的少量文字加上精美的排版將會變得更加吸引人),主要以圖片展示為主。這個樣子的網站多用于攝影團隊或個人作品集展示會比較常見。雖然簡單養眼,但是承載信息有限,公司部門的主頁很少見這樣的設計。

2.響應式網頁設計(Responsive Web Design)

現在越來越多用戶都擁有多種終端:臺式機,筆記本,平板電腦,手機,能夠適應不同尺寸顯示屏的網頁是現在的潮流,甚至是未來很長一段時間的設計趨勢。那么響應式網頁設計就是來解決這個問題的。這種特別的開發方式能保證網頁適應不同的分辨率,讓網頁要素重組,使其無論在垂直的平板電腦還是智能手機上,都能達到最好的視覺效果。

網站設計制作除了多終端的多樣化,我們還可以看到我們的電腦屏幕,手機屏幕都在不斷變大,而在對未來生活的預測、概念設計里,“屏幕”這個產物更是被運用到多種新平臺上。例如微軟發布的“未來生活概念視頻”里,廚房、室內墻壁、辦公室玻璃墻面都成為了交互平臺。所以我們可以發現,響應式網頁設計所具備的良好的適應性和可塑性,在未來的網頁設計里將占有舉足輕重的位置。

3.扁平化設計(Flat Design)

網站設計制作扁平化設計可以說是去繁從簡的設計美學。去掉所有裝飾性的設計,可以說是對之前所推崇的擬物化設計的顛覆。我們不能妄加評論說這是好還是不好,只能說它提供了一種新的設計思維。扁平化設計是否會成為將來的趨勢我們也無法回答,盡管褒貶不一,備受爭議,但是就現在來說它是當下的一種潮流。

4.視差滾動設計(Parallax Design)

網站設計制作視差設計可以說是近年來網頁設計中的一大突破,也備受推崇。視差滾動是讓多層背景以不同速度滾動,以形成一種3D立體的運動效果,給觀者帶來一種獨特的視覺感受。

除此以外,鼠標滾輪的流暢體驗,讓用戶在觀看此類網站時有一種控制感,簡單來說這是有響應的交互體驗。就好像童年看到走馬燈,轉動它你就能看到人物動起來,還能欣賞故事。視差滾動設計的趣味也在于此。所以無論是網站還是電商商品宣傳頁都經常采用視差設計,吸引眼球也很受用戶喜愛。

5.無限滾動模式(瀑布流)

有一些網站內容很多,但他們并沒有簡單分頁,而是采用的是一種垂直瀑布流的方式布局。將那些內容垂直排布,當用戶縱向滾動時,內容會不斷更新好像永無止境。這樣的瀑布流很早之前就開始流行,最早采用該布局的是pinterest。這樣的滾動頁面就大大減少了分頁的數量,個人認為對于這類信息量大,每日更新數據快的網站是比較不錯的方案。

6.滾動偵測網頁設計(Scrollspy)

網站設計制作利用CSS的實現將導航欄固定在網頁頂部(大多數是頂部,當然也有側面或底部),并將版面內容按照導航順序垂直或橫向排布,使得用戶點擊相應導航tab時頁面自動滑到相應頁面,而若點擊內容,導航也將隨之改變。這樣的網頁設計頁面基本不會跳轉,每一個tab所指向的頁面內容也基本一屏顯示完整,所以在頁面呈現的內容上會有所局限。為不影響布局一般也會伴隨自適應。

滾動偵測式的網頁會給設計師帶來了很大挑戰——要在有限空間內保證內容呈現的完整性,故設計師會在版面上下足功夫。而這類網站結構和視差設計有異曲同工之處,所以我們發現很多網站會結合兩者,給觀者帶來不一樣的視覺感受和用戶體驗。

7.網頁的風格化設計(The style design of Webpage)

網站設計制作現在的網頁早已不再像過去受諸多條件和技術限制了。其呈現方式頗為豐富。風格從清新到復古,插畫手繪到擬真設計,無奇不有。無論是版面版式,還是設計元素,用標新立異這個詞形容絕不為過。根據自己撇到的冰山一角,提一下對我感觸最深的變化:

(1)注重字體設計(Pay attention to the font design)

近年來很多設計師將字體設計也融入了網頁設計中,并作為設計的一個重要元素提升整個網頁品味。通過使用CSS3設計師可以擁有許多自定義的字體,這給網頁的視覺設計也增加了一個重要的設計思路。

(2)豐富靈活的動畫(The flexible animation)

Html5和flash的廣泛應用,讓網站設計制作的交互動畫變得更加生動有趣。

通過觀察這些趨勢如何影響現代網站設計,或許可以為網頁設計師帶去指引,發散出新想法。

(3)平面設計感的加強(Strengthen the sense of graphic design)

網站設計制作隨著設備和技術的革新,早已突破了過去單一框架的限制,變得更加靈活。所以就頁面風格更多地開始向平面設計靠近,許多頁面設計得極賦海報和雜志的版式感。時尚而富有沖擊力。

雖然設計師和開發者都需要和市場接軌并跟上潮流的腳步,但是所謂的潮流是當下的,未來確是未知的。網站設計制作的確需要保證自己不被行業趨勢甩到隊尾,但更重要的是在浪潮中適應和學習。

小結

網站設計風格的定位問題,品牌延伸設計以確保品牌一致性問題,是為企業建站過程中最為敏感和核心的問題。如能很好解決這兩大問題,項目設計與開發周期將會大幅度縮短。以上分享的5個方面的知識及技巧可能還不是最周全的,需要我們在實戰中多總結才行。

]]>
http://www.zoosmid.com/archives/3063/feed 0
極具現代及未來簡約風格的網站是這樣設計出來了!超簡單! http://www.zoosmid.com/archives/3061 http://www.zoosmid.com/archives/3061#comments_reply Fri, 12 Apr 2019 05:41:48 +0000 http://www.zoosmid.com/?p=3061 文章轉載,來源素馬設計

當我們為企業網站定位和設計為哪一種風格時,首先要以設計目的為導向。一味的追求極簡簡約設計并非是好事。我們之所以熱衷于這一類風格的表現手法并致力于推薦給更多的高端有氣質的品牌企業,是因為極簡簡約風格的網站,在表現上張力很足,通過網站的界面及用戶操作體驗能感受到一種國際氣質綻放在網站的界面上。在素馬自媒體來看,極簡的設計手法應該是國際化的,極具未來前瞻氣息的、內容經過高度精簡優化以達到視覺聚焦的、提高網站與用戶的高效溝通的設計方式。它不應該只屬于現代,也能駕馭未來。

什么是極簡設計

極簡設計,嚴格上講不能算作一種視覺風格,而是一種設計哲學。它在保持了基本的骨架內容的基礎上,剔除掉多余的元素、裝飾、色彩和紋理,是通過不斷思考而進行化繁為簡的設計過程。這樣做的結果是突顯了主題內容。所以,它是扎根于設計思想根部的概念。

極簡主義起源于蘇格蘭,當時在各個文化領域都掀起了極簡的風潮:平面設計、建筑、音樂、文學、繪畫等。直到現在,也開始在網頁設計中盛行。

盡管極簡設計風格在十年間并未得以足夠的關注度,早先的互聯網領域中根本看不到它的影子,樣式復雜的LOGO和廣告,艷麗的色彩……網頁設計一直以來都以臃腫繁雜的形象出現。

少即是多

前已提及,極簡風格是直截了當地展示主題,減少對觀者的視覺干擾。如果一個頁面有太多的元素,用戶就會在眾多的元素中,由于無法決定其主次而陷入混亂。一個優秀的極簡設計勢必會用不偏不倚的姿態焦距主體內容。

舉例來說,一個以黑白灰為主色的網頁中,如果出現任何色彩,都會成為視覺焦點。就如下例所示,白色作為底色背景,再加上一點淺色背景,搭配黑色文字,同時有相應配圖,配圖的色彩表現集中在模特的服飾上,這很好的突顯了服裝品牌這一焦點。

這一種設計風格就讓用戶焦距到服裝本身的質地、色彩、樣式上,從而輕而易舉鎖定了用戶的注意力。而與此同時,在服裝本身以外不再增加任何的裝飾和元素,除了主體結構再無其他。

怎樣簡化內容

首先對于網頁所展示的內容,設計師要有一個清晰的認知。先將網頁上所需要出現的元素列出清單,再從中進行逐次審視是否有出現的必要,是否需要去除。

這是一份我認為可能需要思考是否應該不予出場的元素清單。

– 社交媒體的圖標

– 標語和詳細介紹

– 目前流行的一些比較引人耳目的元素(比如分享和贊等)

– 一個頁面多出三個部分以外的部分

– 導航中的次級元素

當然,這并不是一個框架,你當然需要考慮如果有必要時也不能統統刪除而后快。主頁出現的部分元素都可以放到二級頁面里。畢竟如果主頁信息量太大,你的用戶也許也會“消化不良”。

這樣精簡以后的結果是,也許你的網站的功能性相比弱化了一些,但刪減了多余的元素,使之成為一個更為簡化的布局,這讓用戶可以在你的網站停留時間更長一點。而讓用戶成為愿意為之學習的網站。

怎樣簡化設計

你需要不斷簡化任何出現的元素,讓紋理消失直至不見、更少顏色、更簡單的造型……總而言之,這一系列的處理過程的確讓你的設計變得有些平淡了。但這時你要記住,不要偏離了極簡的方向,你可以把設計集中到焦點內容上,讓焦點內容成為唯一重要的視覺核心。使用一些創造性的技巧來處理細節。

//使用優雅的線框

大家都知道,使用線框能讓你的設計看上去更“穩固”,因為你的眼力其實超乎你想象的好用,它甚至會記得每一段間隔每一個交點,所以任何破壞視覺平衡的元素都會格外突兀,這時你的直覺只會告訴你“感覺不對”。但這其實就是沒有運用好線框的結果。

一個合適的線框圖是極簡設計致勝前提。你可以運用它獲得合適的比例,創造出有趣的視覺平衡。

你可以在設計伊始就用2B鉛筆在草稿上畫出你的頁面布局和元素樣式。

在畫線框時,你需要遵循下面的順序

1)決定你的網頁中需要出現的元素 2)對元素之間,按優先次序進行排序 3)畫出線框草圖并試著去達到最佳的布局視覺效果

//留白

在我眼中,留白是一種設計素材。留白并不等同于極簡,但它與極簡設計有著千絲萬縷的聯系。

不管你多么有創意,一個極簡設計如果沒有足夠留白,那么也將是失敗的。所以,在設計時,你要考慮每個元素的周圍都有足夠多的留白空間。

例如上面這個網頁主頁中的LOGO部分周圍的大量留白,讓LOGO本身得到直觀的展示。

//讓簡單成為習慣

我們不可否認,我們有一種自我膨脹的惡習。設計中,不知不覺就會增加過多的東西,因為你的腦海中一直浮現一種想要“完美”它的欲望。鑒于此,我們必須要讓自己從這個習慣中擺脫出來形成另一個良好的習慣。

如果你在設計中陷入了盲區,總覺得不對勁“仿佛缺了點什么”的話,這時,與其糾結于給頁面增加更多的元素,不如想想怎樣讓頁面減少更多的元素。

最后,當你對設計已經滿意后,再看看是否仍然可以進一步簡化設計。就像給樹苗修剪枝葉一樣的耐心。

網頁設計中極簡范式

//黑白灰:色彩禁欲主義

黑白灰的大氣讓人難忘,雖然是信手拈來的設計道理,但放到實踐中,設計師往往需要更多的勇氣做這樣的設計。因為做這類設計的風險太大,不小心就會讓設計變得死氣沉沉一片荒蕪,帶給觀者負面的感受。如上圖中以黑色為背景就需要嚴格與網站的內容契合,表現出黑色的“酷”。同時,元素的編排也必須不拘一格,比如將人物置最前,文字放于背景之上,黑白的搭配頓顯時尚感。

//線形插畫:形魅力

灰色的背景上只用白色作為前景色,内蒙古11选5基本走势图的焦點是中心位置的線性插畫,這是品牌展示的一種最為直觀的方式。而運用一定的投影效果,讓插畫仿佛懸浮在半空中則是增加了一些創造性的細節,這就讓畫面活躍起來,不會陷入一片荒蕪當之中。

//字母:形的構思

字母本身的造型就是一副完美的構圖,加上文字本身所具有一定的含義,融合一身,就會讓畫面變成雙向發聲。所以,重新縮小或放大文字,讓文字成為畫面的焦點用以傳達品牌形象,這種方式在極簡的網站中很容易做到。如本例中可以將文字的背景作為創意擴展的部分,讓鼠標移動時出現不同的漸變色背景,這些漸變色色彩都傾向鮮艷,而這里極好地點綴了文字本身的美感。而中文相比英文更為復雜,想要把文字也變為對形態的焦距,就需要將中文改為在形態上較為突出的字體,例如書法字體等。如下圖所示。

//攝影:用圖講故事

用一張高清的攝影作品作為背景,也是網頁中極簡設計的常用方法。這幅攝影作品本身就是極簡風格的,讓品牌故事隱藏于照片中。照片的寫實程度無能出其左右,而本身的風格就必須要明顯地突出主題。這時文字的出現是為解釋說明的作用,你可以在你的設計中加以刪減或增加。

你還可以像上圖示例那樣讓圖片和文字展示出各種有趣的組合樣式,這時必須要考慮文字和圖片的結合,千萬不要用一張和文字內容毫不相干的圖片。

極簡設計的適用場合

就像大家所知,極簡設計由于內容展示較少,在目前商業應用中還不太廣泛,大多用在小型創意領域機構的官網較多。當涉及營銷時,由于營銷的目的就是最短時間推送最豐富全面的信息給用戶,因此一般的商城都不會讓自己看上去太輕松。雖然這樣說,但我們在設計商城的時候也注意到,目前已經有設計師開始利用這種簡化的風格設計商城,做出不一樣的細目更深化的小型商城。這類商城的產品也針對的是較高端的用戶,比如時裝行業里的網站,可以不妨一試這樣的設計風格。如下例所示。

可以看到所有的信息都被濃縮了,產品展示讓人一目了然。我認為這是一個進步,不論是審美方面還是營銷影響方面都讓產品和用戶的距離更近了一步。

小結

極簡簡約表現手法的網站是相當吸引人和出眾的,他主張內容深度優化和精簡以達到主題鮮明突出,去掉無用多余的修飾元素讓網頁無論視覺上還是體積上都是輕奢優雅有氣質??戳吮疚牡脑敿毥榻B,相信大家都能駕馭極簡簡約網站設計風格了吧。

]]>
http://www.zoosmid.com/archives/3061/feed 0
用戶體驗設計相關專業術語知多少? http://www.zoosmid.com/archives/3055 http://www.zoosmid.com/archives/3055#comments_reply Fri, 12 Apr 2019 05:37:20 +0000 http://www.zoosmid.com/?p=3055 文章轉載,來源素馬設計

提起用戶體驗這個詞,互聯網設計師有哪個沒有聽過的嗎?我想一個都你沒有。因為為一個企業公司建站,也需要懂得一定的用戶體驗設計方面的知識。用戶體驗相關的專業術語有多少呢?為什么需要知道它們?本文將簡單揭曉。

01

現在不只是互聯網產品設計,企業建站網站設計,移動應用App設計,微網站,小程序設計與開發都要懂得用戶體驗。不懂用戶體驗的設計師、程序員、前端制作等將難在互聯網立足,更不可能領兵帶隊。

用戶體驗的相關術語有哪些,怎么樣才能輕易記???

02

直接跟用戶體驗這個崗位相關的角色有:

UED:User Experience Design(用戶體驗設計師)

UX:User Experience Design(用戶體驗)

UI:User Interface(用戶界面)

GUI:Graphical User Interface(圖形用戶界面)

UCD:User Centered Design(以用戶為中心的設計)

HCI:Human Computer Interaction(人機交互)

當然,跳出這些角色之上或者說這些角色形成一個圓形,圓心還需要一個核心角色Product Manager產品經理(簡稱PM)。

03

另外,用戶體驗的五要素之前也有深入解析和討論過。

用戶體驗五要素是一個非常經典的框架體系,他包括戰略層、范圍層、結構層、框架層和表現層。

04

有了以上用戶體驗基本常識的基本鋪墊,再來了解下面介紹的任務流、用戶流、流程圖等全新術語就更加容易了。

任務流和用戶流是多年來常聽到的用戶體驗術語。雖然我嘗試通過Google搜索等方式搜尋其“官方”權威定義,但結果卻是,現存的很多UX術語表并未集中過定義它們。

盡管如此,無論如何,這類“流”都是在描述Web或軟件的“運動”情況。設計師需要考慮如何設計和引導用戶瀏覽一個網站或軟件。創建這類網頁或軟件“流”能夠幫助設計師思考和預估用戶在瀏覽一個頁面之前或之后可能發生的情況,并集中處理其中重要的部分。而且,此外,作為創建可運行原型的第一步,這類“流”的設計也能夠幫助開發人員了解,軟件或網頁在交替狀態下是如何運作的。

流程圖

流程圖是一張展示一個復雜系統或活動中人或物動作或行為的順序圖。而,應用到軟件或Web設計中,則表示一張展示用戶一系列頁面活動或行為的順序圖。

任務流與用戶流

任務流和用戶流并非完全不同。因為它們目的都是為了以最小的阻力,幫助用戶完成某項任務。它們都能夠幫助你在設計開發具體軟件或網頁功能之前,深思熟慮一些設計問題。如果你希望能夠更簡單具體地區分它們,也可以如此定義它們:

任務流

任務流是所有用戶為實現某特定操作所完成的單一流程,所有用戶所經歷流程都是相似的,比如網頁或軟件注冊。任務流是一條單一的流程,毫無分支。

用戶流

用戶流則是用戶所遵循的軟件或網頁執行路徑??梢砸曌魇怯脩粼跒g覽軟件或網頁所經歷的一個個迷你旅程。用戶流不一定是線性的,還可以有分支。通過定義或設計軟件或網頁路徑,你能夠發現其中可能的轉變點和提升點,從而優化用戶體驗。

用戶流可以非常簡單,僅用以幫助設計網頁或軟件的“紅色路徑”——即網頁或軟件主路徑。當涉及和添加更多相關條件和要求時,用戶流也可以變得極其的復雜??傊?,在開發產品之前,用戶流可以幫助設計師和開發人員有效地分解復雜的流程,從而加深理解,提升工作效率。

Morgan Brown曾經說過:“用戶流設計可以為用戶和企業帶來更多實效?!?/p>

頁面流程圖

世界聞名的37 signals軟件公司曾對用戶流進行速記,并認為它們存在以下不足:

– 在設計過程中,用戶流有時很難解釋并用以交流。

– 繪制出流程細節,會非常費時。

– 而且隨著界面設計的更迭變化,流程設計很快就不在適用。

雖然用戶流以及頁面流程圖之類“流”存在不足,你也可以在實際的Web或軟件中嘗試使用它們。因為作為一種Web或軟件設計的快速入門方式,它們能夠在時間有限的情況下,滿足你的設計需求。

而且,隨著設計需求的不斷變化,為方便設計師展示和交流其設計理念,一些原型工具,例如簡單快捷的Mockplus, 提供了專業的頁面流程圖功能。設計師一鍵點擊即可生成所需Web或軟件頁面流程圖,并根據設計需要設置其顏色,背景以及連接線,添加頁面備注以及導出為圖片等。能夠幫助設計師極大的提升設計和交流效率。

Wireflows

多年來,我通過創建流程圖來演示和交流Web或軟件中的交互設計。而且為了囊括更多的設計情景,這些流程圖已演變成包含線框圖的“流”設計。而全球知名的用戶體驗研究機構Nielsen Norman Group最近提出了一個全新的術語“Wireflows”來描繪此類用戶體驗的可交付內容。

Nielsen Norman Group這樣定義Wireflows:

Wireflows是一種結合了線框圖風格的頁面布局格式,采用了一種簡化的流程圖來展示Web或軟件的各種交互設計。

只有線框圖是遠遠不夠的。因為線框圖常常僅僅展示Web或軟件的頁面布局或靜態內容,并未包含任何動態交互。而流程圖則囊括了Web或軟件的交互細節,但卻忽略了可能發生的應用情景。而Wireflow則能夠幫助設計師存儲復雜的交互設計,并展示這些交互設計中變化的內容和布局。

Wireflow元素

– 入口和出口

– 步驟:例如用戶操作,系統操作以及替代路徑

– 連接:指示所需的路徑和可能的不同流程

– 決策點:用戶必須從兩個或多個選項中選擇。

總結:

了解和預估這些“流”可能的應用場景,能夠有效地優化設計體驗。以上所描述的任何“流”都能夠幫助設計師更好的展示和交流各種設計理念,從而提高協作效率。

資源

以下是一些可以加速UX工作流設計的資源,希望能對你有所幫助:

界面工具包資源

FREEBIE — Flowchart kit for?Sketch(來自Greg Dlubacz設計師的流程圖工具包)

這是一個精心制作的Sketch流程圖工具包,可以幫助你輕松快捷的創建簡潔直觀的站點地圖。包含的所有元素,包括箭頭等,都是可編輯,可定制的。

Flowchart Kit Sketch Resource(來自 Arthur Guillermin Hazan設計師的流程圖工具包)

這是一個展示了網頁界面之間交互設計的流程圖工具包。你可以使用它輕松地為你的界面添加箭頭以及圖標等元素,自定義你的界面,甚至在其幫助下創建更加精確的站點地圖。

User Flow Diagram Template(來自Jaros?aw?Ceborski設計師的用戶流程圖模板)

這個用戶用戶流程圖模板能夠幫助你簡單地制作美觀吸睛的圖表。其中包含的所有方塊和箭頭都是便于直接使用的Sketch符號。

Sketch插件資源

Sketch plugin — AEFlowchart(來自Marko Tadic的AEFlowcharts插件)

Sketch提供了多種能夠幫助設計師常見Web或軟件流程圖的插件。而在簡單查看這些插件之后,小編發現,AEFlowcharts是所有這些插件中最易用的。

小結

由于本人資歷尚淺,分享的用戶體驗相關專業術語就到這里。從用戶體驗部門相關重要崗位角色名稱,到用戶體驗五要素,再到用戶流、任務流、流程圖等各種“流”,再深入細一點就是原型圖的制作、ui界面排版設計、前端制作及動效設計等等更為細膩的用戶體驗設計方面的技巧和教程了。

懂這些術語有什么用?一句話,裝逼有底氣。不信?你試下把本文提到的這些概念全部搞懂,然后跟商務部去談單,借機插入話題談用戶體驗以及本文提到的一些專業術語,保證鎮住集團公司參加會議的所有人!有時候,運氣,指的可能就是平時不經意積累的這些知識、技巧,這些裝逼神器說不定在關鍵時刻就把單給簽了!

]]>
http://www.zoosmid.com/archives/3055/feed 0
平面設計轉網頁設計可行嗎? http://www.zoosmid.com/archives/3054 http://www.zoosmid.com/archives/3054#comments_reply Fri, 12 Apr 2019 05:31:06 +0000 http://www.zoosmid.com/?p=3054 文章轉載,來源素馬設計

平面設計師轉行做什么好?曾經有人問我這個問題。我想都沒想就直接回答。做網頁設計最合適。無論是兩者在版式設計以及品牌延伸設計上都有著非常相似的特征,過度起來更輕松一點。而且,精通品牌設計的平面設計師,在今后跟顧客溝通的過程中更容易拿捏顧客的需求及痛點。反而,一開始就參加網頁設計培訓班的這一批老司機更難進一步塑造。他們在策劃與執行品牌網站設計方案上大多數都是力度不到,只是在網頁設計及企業建站技術方面相對專業。正由于這一點,素馬設計通常招聘網頁設計助理都是瞄準了有著品牌設計經驗的平面設計師。

北上廣平面設計師現狀

平面設計,是藝術與商業的結合,是帶著鐐銬跳舞的舞者。它一方面要求有不斷更新,不斷跟進且引領普羅大眾審美的藝術素養。光這一點,就能篩除掉一大批熱情老去,隨波逐流的從業者。另一方面它更要受到商業市場的束縛,它是克制的命題作文,不是天馬行空離題萬里的自我抒發。這一點,又能篩除掉一大批從業者。

好多做平面設計的做了幾年都沒有再做了,有的是兼職著做些設計賺點小錢,有做一輩子的都是大師級的人物在大單位里面拿待遇。三流的設計職業工作者很難干得長遠。

他們或是工作成果越來越隨波逐流,缺乏競爭力。做創意漂亮的稿子,靠著熱情堅持一兩年你覺得還好,三四年呢,更久呢?你開始懶于動腦,找找抄抄,過稿就萬事大吉?;蚴菬o法用自己的工作成果來與市場溝通,作為服務型創意產業的一枚螺絲釘,這是致命的。時間一長,你再也不愿意去思考問題,去耐心探明需求,去跟客戶溝通,時間一長,你對客戶惟命是從只為稿子通過提案拿錢,心身俱?!?/p>

平面設計這個工作門檻低,這是實話,國內環境下,去學幾個月軟件培訓都能去做,但要做好,就是另外一回事了。如何拿筆寫字誰都會,但把字寫的漂亮呢?寫的漂亮且有個性呢?寫的漂亮有個性且大家拍手叫好呢?寫的漂亮有個性大家拍手叫好且引領潮流成為大家呢? 做到這個程度的設計師,屈指可數。

當然,網頁設計師在這一點上跟平面設計師有著相似之處。每年從網頁設計職業培訓班出來的“精英人才”一批又一批。同樣有著入行門檻低,人才飽滿等等相似現象。

平面設計轉網頁設計是否可行

不少做平面的設計師想轉行走網頁設計這條路,做網頁和做平面是完全不同的思維,加上還要熟悉或了解html和CSS代碼,所以就很考驗設計師的自學能力了。而且還有一點,我們在設計網頁的過程中,并不是你想怎么設計都可以的,還要考慮編碼實現和用戶體驗。所以說,平面設計轉網頁設計,還需要加把勁學習一下網頁設計及企業建站相關的技術和常識。

想轉型成為網頁設計師,需要必備的一些技能知識點

1.Photoshop

2.Illustrator

3.HTML

4.CSS

5.Responsive

加分:Bootstrap、Sass、Compass、Susy…等,會套用現成的 jquery 包、JS 包之類也就差不多了。再深入就是F2E的領域。

//Photoshop

基本中的基本,只要是任何單位是「PX」、給屏幕用的圖稿我都建議用 Photoshop 制作,Illustrator 是印刷用軟件,對 PX 支持度很差。

//Grid

現在新開發的網頁通常會要求制作 Responsive ,為了要方便套用 Bootstrap 或 Susy ,Grid 就是一定要懂的觀念。

//切圖

當你會寫 Html、搞懂 Div、Css 后,你就知道怎么切圖了(無誤),不會寫 Code 的視覺設計師切出來的圖常常被退貨也只是剛好…做個蛋糕需要糖和巧克力粉、材料供應卻老給他鹽和胡椒粉,是想逼寫 Html 的人從種甘蔗和可可樹開始嗎?

//Illustrator

既然都是平面設計師想轉型,這套一定用的非常熟悉,可惜我對這套的定義就是「送印刷廠」用。在我的制圖過程中,所有能用向量繪制的部份我都會用向量。PS 的向量工具不太好操作,遇到比較復雜的圖型我會在 AI 里畫好、貼進 PS 為形狀圖層,再來調整圖層樣式。所以 AI 只會用到畫向量的功能,其他全進 PS 處理。

//HTML

不會切圖、不會手寫 Code 的不要說自己是網頁設計師,做網頁只靠 Dreamweaver?和蒸飯箱蒸出來的便當感覺差不多,勉強能入口但很難吃。有的 RD 會接受用 Dreamweaver 之類可視化軟件產生的 Code,這要看和設計師配合的 RD 接受度到哪里。通常平面想轉網頁設計很大部份是薪水可以喊比較高,如果想拿更高的薪水就不要依賴 DW ,老老實實的練英打吧。

//Responsive

先把 Html 和 Css 練熟了再來看 Responsive 這個大難題。要做好一個 RWD 從 Wireframe 就要規劃好。在 Wireframe 階段我習慣先設計 Desktop 版本,功能最多最完善。但在寫 Code 的時候會是反過來、先從 Mobile 的尺寸開始刻。剛接觸 RWD 的先套 Bootstrap 增加成就感和手感,等熟悉了覺得不夠用綁手綁腳的時候,差不多該踏進 Sass、Compass、Susy 的領域。

別用現成的軟件做 Responsive,除非是純靜態網頁不需要和 RD 合作,原始碼臟就臟沒關系反正不會有人看了。目前我看到「排排版就好」的軟件產出的 Code 沒有干凈的,只要是之后有人還要接手的產出、拜托維持它的干凈整齊。有沒有打開廁所門看到一團亂產生暈眩感臉色發青的經驗?看到惡心的 Code 就是這種感覺。

小結

本文寫的有些粗淺,只能算是給個方向讓初學者知道要怎么學習。如真想從平面設計師轉行做網頁設計,最好的建議是到隊伍里去學習,跟專業的同事參加新項目的策劃、原型圖制作、ui界面設計等一系列真槍實彈的工作,從實踐中學習是最好的!

]]>
http://www.zoosmid.com/archives/3054/feed 0
30個國外品牌企業都鐘愛的極簡網站設計風格分享講解 http://www.zoosmid.com/archives/3052 http://www.zoosmid.com/archives/3052#comments_reply Fri, 12 Apr 2019 05:26:04 +0000 http://www.zoosmid.com/?p=3052 文章轉載,來源素馬設計

說起極簡,很多人馬上就能想到家裝方面,家里的物品如何丟掉多余的保持極簡。極簡的生活理念與生活方式,極簡主義盛行的日本總給人干凈的印象。極簡這種態度和表現風格形式,運用到網站頁面設計中,自然增加了很多給用戶想象的空間,禪意的已經脫穎而出。極簡風格既作為眾多網站界面版式設計風格中的一種,又可以作為設計技巧中的一種存在,有著非常永久、經典、深刻的指導意義。今天,我們繼續捧著繼續關注設計資訊的熱度,來一組極簡、簡約、干凈的網站設計經典案例。希望能激發大家的設計靈感,為新項目打Call!

01

Basis – Berlin Real Eastate?

柏林房地產市場 高級顧問

02

KXU?

運動、健美、健身房、健康飲食類

https://www.kxu.co.uk/

03

Tom Hodgman?

界面設計大師團隊官網

http://tomhodgman.com/

04

Andre Ribeiro?

巴西出生的設計師及藝術總監在紐約布魯克林區創作

https://andreribeiro.co/

05

KBS Canada?

Loading設計非常有意思,主頁采用柵格化系統布局版式新銳

https://kbsagency.ca/

06

Intrusive Thoughts

https://www.intrusivethoughts.org/

07

Fru.it

意大利著名服飾鞋類品牌

https://www.fru.it/

08

Teleset Plus

卡通,手繪,矢量元素在網站中大量運用 很有人工智能的科技感

網站微交互設計做得非常不錯

https://teleset.plus/

09

Dixon & Moe

策略、設計、開發——我們幫助公司理解、原型化和部署定制技術。

一看就知道是牛逼轟轟的做前沿技術的公司

https://dixonandmoe.com/

10

Living Divani srl

完美、和諧的比例和低調的奢華感的特色酒店的動態和充滿活力的生活,家庭擁有的公司,其商標的裝飾。

做軟裝、室內裝修設計的同行應該看看這個官網

https://livingdivani.it/en/homepagewelcome/

11

Progressive Punctuation

我們今天應該使用的非標準標點符號集合。

單單看網站内蒙古11选5基本走势图,你能猜出這個網站是解決用戶什么問題嗎?

http://progressivepunctuation.com/

12

Café du Trocadero

健康飲食類

http://www.cafedutrocadero.com/

餐飲糕點類素馬設計經典案例

13

Spy Films

網站的結構布局很奇特,封面三個女漢子讓你欲不能罷

漢堡式菜單居中的布局少見但非常好用 海報banner頁碼樣式的切換波瀾起伏市場少見

http://spyfilms.com/

14

Boffi

折疊菜單左邊超窄展示 柵格化系統布局 圖層折疊展示 懸浮按鈕FAB經典案例 文字壓圖巧妙運用

https://www.boffi.com/

15

Unconquered

別小看内蒙古11选5基本走势图略圖,點進去要刺瞎你的眼!H5技術的嫻熟運用,滾動視差技術及結合視頻,動態圖技術等等,互聯網網站設計前沿新技術運用得淋漓盡致。

http://www.weareunconquered.co/zoltner-wolf-textiles/

16

The Gigi project

這個項目必須是UI界面設計師與交互設計師融為一體才能做出來的經典案例。因為單單從界面角度去策劃和設計這個網站,你根本不知道怎么下手。只有UI和交互設計師一起策劃和設計才能有這個效果。

http://www.thegigi.it/en/

17

Envoy

不要被略圖迷惑。實際上打開網站后,你會非常驚訝,怎么有人能想出這樣的網站呀。技術上也非常牛逼。結合動態圖,滾動視差技術等等。

https://www.weareenvoy.com/

18

TenderToArt

這個就是所謂的超窄菜單導航網站了

http://www.tendertoart.com/en/

19

Ever and Ever

光是打開内蒙古11选5基本走势图的loading就很有創意。剛開始沒怎么注意,看到像是一輛動車一閃而過。后來才注意到,是品牌字母E在奔馳。

菜單導航居中樣式、海報輪播切換頁碼樣式相當新銳。每個欄目新內容的展示都結合了視頻動態圖技術。視覺非常聚焦。

https://www.everandever.co/

20

Marcus Eriksson

http://themarcus.com/

21

Epok Design

22

Pretty Good Human

真實網站比略圖還要酷炫,尤其是logo出現的瞬間,真的非常震撼!

http://prettygoodhuman.com/

23

Volcán De Mi Tierra Tequila

酒類品牌網站,UI界面及交互設計做得非常給力,不管是視覺上還是聽覺上,都是棒棒滴。

https://www.volcan.com/en

24

Réard Paris

比基尼類品牌網站,網站高大上,服裝也設計得逼格

https://www.reard.com/fr-fr

25

M2H agency

餐飲類牛排現場炒作,結合了動態視頻圖來展示,無論是視覺感官,還是內容聚焦方面,做得出神入化,視頻動態圖在這樣的行業網站里非常助力!用戶體驗超級棒!

當重要的視頻內容沒有立即加載時,一張養眼的靜態圖先打底,這個做法就是非常細膩到位,也是用戶體驗考慮的一部分哦。

http://m2hagency.com/

26

Unpigeon

光看這張略圖,你會以為這個平臺是用來干什么的呢?

https://unpigeon.me/

27

La peau de l’ours

網站框架也算是國際化的,簡約,清新,極簡。但真正吸引人的地方,我想應該是大英文字母之間的行距,以及點擊菜單展開后,每個欄目的大字母寬間隔以及鼠標觸碰時的交互樣式。

當然,loading的設計以及每個功能塊鼠標移動上去后出現的文字的布局樣式效果還是非常精致的,有經過策劃和設計,不是簡單的分行布局。

https://www.lapeaudelours.net/fr/

28

Victoria Spicer

主圖非常吸引人,忍不住點擊進去看看這個網站。微交互做得非常到位,尤其是圖片灰色跟彩色的切換上,還有一個段落里,文字跟圖片的結合,鼠標觸碰圖片后的交互,真的是一個新的表達方式。

https://vspicer.com/

29

Collage

微交互太棒了。在圖片的波浪處理上,漢堡式折疊菜單的提示上等等。值得一看。

https://collagecrafting.com/

30

AUall

AU all (白杉)珠寶品牌網站設計 素馬實戰案例

www.auall.com

小結

關注設計動態,了解最新設計資訊,多看優秀經典的設計網站作品,總能保持自己的創作激情和激發設計靈感,讓自己每天的設計感和正能量都是滿滿的!還記得先前我跟大家分享過那句話嗎?“此刻,對手正在不停的鍛煉?!毙涯康挠≡诮∩矸繅Ρ谏?。在這個逆水行舟進慢一點就被淘汰的互聯網時代里,我們需要學更多優秀的東西。希望本身分享的這些極簡網站設計經典案例,有那么一兩個能抓住你的心,素馬自媒體就覺得值了!

]]>
http://www.zoosmid.com/archives/3052/feed 0
七個網頁界面ui設計細節你掌握了嗎(案例圖文講解) http://www.zoosmid.com/archives/3050 http://www.zoosmid.com/archives/3050#comments_reply Fri, 12 Apr 2019 04:53:18 +0000 http://www.zoosmid.com/?p=3050 文章轉載,來源素馬設計

素馬主張任何高大上的產品概念設計最終落地都化解為版式與圖片。隨著用戶對產品使用的體驗要求越來越高,新銳的版式加上精美的圖片,還需要加上獨特的動效設計(前端制作工藝)才行。那么,除了網頁設計三大塊版式、圖片、動效外,我們這些看似搬磚,每天做細節設計的ui設計師,是否有大的研究和作為呢。今天分享的這篇文章,主要是針對ui界面中非常細小的設計技巧進行講解。

01

使用色彩和字重來創造層次結構,而不是單純的大小對比

在對UI 文本進行樣式控制的時候,最常見的錯誤莫過于過度依賴字體大小差異來營造對比。

“這段文字重要嗎?那么讓它更大一些吧?!?/strong>

“這段文字是比較次要嗎?那么讓它變小一點吧?!?/strong>

單純使用字體大小對比,所營造的對比并不夠,嘗試結合色彩和字重來營造更好的對比效果。

“這段文字重要嗎?我們讓它色彩更加大膽一些吧?!?/strong>

“這段文字是比較次要嗎?我們讓它的色彩更淺一些吧?!?/strong>

如果可以的話,你甚至可以采用兩到三種顏色:

?主要內容采用深色(諸如標題,但是不要用純黑)

?次要內容采用灰色(比如文章發表日期)

?輔助性內容采用淺灰色(比如頁腳中的版權聲明)

類似的,在UI設計的時候,通常兩種不同的字重足以營造出優秀的層次感:

?大多數的文本采用正常的字重(400到500,具體取決于字體)

?對于需要強調的文字采用較重的字重(600到700,具體取決于字體)

應當盡量不要讓正文部分字重低于400,因為這一部分字體本身尺寸已經較小,低于400會使得可讀性不佳。如果你依然需要降低字重,那么不妨讓字體色彩更淺一點,或者替換成其他識別度較強、字重相對較小的字體。

02

不要在有色背景上使用灰色的文本

在白色背景下,將黑色的文本改成灰色,是不錯的淡化其視覺效果的做法,但是在彩色背景下這么做,則是另外一回事。

實際上,讓白色背景下文本由黑變灰實際上是達到降低對比度的效果。

但是在彩色背景下,想要降低對比度是應該讓文本逐步接近背景色,而不是改為灰色。

想要降低和背景色之間的對比,通常有兩種方法:

1、降低白色文本的不透明度

降低不透明度,能夠讓背景的顏色透過來一些,以一種不沖突的方式降低前景文字和背景之間的對比度。

2、基于背景色手工挑選文本的顏色

當背景是圖像或者圖案的時候,半透明的文本會影響可讀性,這個時候最好是基于背景主色調來挑選相應的文本色。

03

陰影設計

相比于采用大范圍的擴散模糊陰影,使用微妙的垂直偏移陰影效果更明顯,更自然,它模擬了最常見的光源特征,光線從上往下照下來所營造的陰影效果。

如果你對此有興趣,Material Design Guideline 非常清晰地給你講明白了這樣的陰影的制作細節。

04

盡量少使用 Borders

盒子模型是網頁前端最常用到的工具。當你需要在兩個元素之間創建分隔的時候,盡量避免使用兩者的邊界直接接觸。

雖然 Border 是分隔兩個元素的好辦法,但是它不是唯一的方法,使用過多會讓整個布局的設計感降低,甚至會造成混亂。

所以你可以嘗試下面的辦法來規避:

1、使用 box shadow

box shadow 同樣可以營造出邊界感,而且更加微妙,并不會顯得突兀,不會分散用戶的注意力。

2、使用不同的背景色來區分

通常,相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以,你所需要做的就是在不同的區塊采用不同的背景色,并且嘗試刪除邊框,因為你根本不需要它。

3、增加額外的留白

創建元素之間的分離效果,并不一定要通過線框來表現,只要增加留白,讓它們分隔開就行了。通過留白和間距來實現元素分組是UI設計中的常用手法。

05

不要讓小圖標無端地放大

當你在設計著陸頁的時候,可能會突出產品的功能,這個時候你需要一些大圖標來作為視覺錨點,這個時候你可能會去 Font Awesome 或者 Zondicons 這樣的網站找幾個免費的矢量圖標,然后放大到符合你需求的尺寸。

它們都是矢量圖標,照說是可以無損放大的。但是一個通常只有16×16 的圖標放大三四倍,它固然無損,但是在視覺上就顯得頗為不專業了:缺乏細節,總感覺過于矮胖。

可是,如果這些小圖標是你唯一能夠搞得到的素材的話,那么不妨試著將它置于另外一個帶有顏色的圖形當中:

這樣的設計不僅能夠讓圖標達到預期的視覺體積,而且看起來要比單純放大,看起來細節會更多一些。當然,如果你手頭不是那么緊的話,最好還是買幾個大尺寸的高素質圖標,比如 Heroicons 或 Iconic。

06

增加帶有顏色的單邊邊框提升個性

當然,你可能并不是一個對于平面設計有著足夠經驗的設計師,但是依然可以讓你設計的界面有足夠的視覺吸引力。

最簡單的方法,就是在界面的邊框中的一邊添加上單色甚至漸變的邊框,這能讓平淡無奇的界面一下子變得鮮活起來。

比如在警告彈出框的側面:

或者在導航欄的底部,以示觸發:

或者在整個頁面的頂部:

這并不需要什么平面設計的經驗,但是會明顯強化設計感。

退一萬步講,你不知道選取什么顏色,簡單,上Dribbble 的色彩搜索中隨便找幾個看著漂亮的顏色,其實也就夠用了。

07

并非每個按鈕都需要顏色

很多時候,按鈕本身所處的語境和按鈕上的文本內容會讓人感到迷惑。像BootStrap 這樣的框架就讓設計師按照語境和語義來進行選擇:

“這是一個積極的操作?讓這個按鈕是綠色的吧?!?/strong>

“這是否是要刪除數據?那么將按鈕設置為紅色的吧?!?/strong>

的確,語義和按鈕本身的設計息息相關,但是還有更重要的維度被忽略了,那就是層次結構。

網頁上每個操作其實都位于整個交互金字塔的某個位置。絕大多數的頁面其實只有一個主要操作,搭配一些不太重要的次要操作,以及為數不多的幾個三級操作。

在設計這些交互的時候,通過層次結構來呈現這些交互的重要性是很重要的設計環節。

?主要操作應該很明顯。采用實色、高對比度的按鈕是很有必要的。

?次要操作應該明顯,但是不突出,采用幽靈按鈕或者和背景對比度較低的色彩是比較合理的。

?三級操作應該是可被發現,但是不明顯的,他們最好被設計為鏈接。

“破壞性的交互所涉及的按鈕難道不應該是紅色的么?”

沒必要!如果破壞性的交互所涉及到的按鈕不是主要操作的話,讓它按照次要操作甚至三級操作的按鈕來設計就好了。

如果這樣的操作是主要操作的話,可以讓它是大號的、紅色的帶有加粗文本的按鈕:

小結

以上總結的七個ui界面設計小細節處理技巧,都是大量的項目實戰工作中總結出來的,容易理解也容易執行。有人可能說,連一個像素都在磕,又不是搞科學研究火箭發射,有必要嗎?我只能說,這是一個工作的專業度問題和態度問題。也許一像素并不影響ui界面的美觀問題,但是卻是一位大師和普通工人的區別。

]]>
http://www.zoosmid.com/archives/3050/feed 0
酷站Behance上最新行業網站設計風格趨勢 http://www.zoosmid.com/archives/3047 http://www.zoosmid.com/archives/3047#comments_reply Fri, 12 Apr 2019 04:46:13 +0000 http://www.zoosmid.com/?p=3047 文章轉載,來源素馬設計

2018年起,ai人工智能技術的崛起,智能手機的廣泛應用,伴隨著的各行設計風格趨勢紛紛在各大設計酷站上展現出來。其中最為具有代表性的是Behance設計靈感網站。

1

未來感

無論何時,我們都對未來充滿了幻想與期待。更先進的顯示技術、更高效的出行方式,那些若夢幻離的景象總是令人興奮,未來感的塑造總會喚起人們心中對科技的無盡渴望。

2

簡約舒適

少即是多,這是亙古不變的真理。簡約意味著簡潔,以簡約主義的白色為主,優化功能,強調空間感。

3

深度感

為傳統的平面元素增添厚度,是2018 年的設計大勢。一點陰影,賦予了元素另一個維度,為交互體驗打開了一扇窗??臻g造就了深度,深度成就了空間。

4

響應式圖標

在未來,越來越多的面向移動體驗,而日漸修長的屏幕讓縱橫之別不容忽視。無論哪種情況,圖標都必須適應新的環境。因此,響應式圖標設計對設計師而言至關重要。

5

插畫設計

任時光奔騰如梭,但歷史總是驚人相似。太長時間的同質化,讓突出個性的呼聲愈喊愈震。這些年尚未發力的插畫,在今年一定會得到大家的關注。

6

動效設計

雨木林風,荷伴漣漪。我們無時無刻都在被運動吸引,技術的不斷革新,為動效的使用鋪平了道路,越來越多的產品也隨之使用動效。大勢所趨,永不停息!

7

微交互

上下撥動,左右平移;點按有悅,長停則變。 優化體驗,塑造品牌,微交互無處不在。

8

演示動效

這種動效只供展示,引導用戶使用。特別是在啟動頁、空狀態,演示動效能極大的激發用戶使用興趣,幫助用戶完成特定操作。

9

明亮漸變

扁平化大行其道多年,多少讓人有些審美疲勞,漸變得以重新回歸。不同以往的是,鮮艷、明亮、酷炫,是當下漸變的特點。

10

三維效果

3D 始終是我們不容忽視的力量,蟄伏多年,一直在尋找爆發的良機。且在這多年的隱忍中,聚集了越來越多的力量,讓本就可怕至極的力量變的愈加摧枯拉朽。2018 年,它不一定會發力,可一旦契機出現,就會勢不可擋。

11

金屬質感

現實和虛擬的界限愈加模糊,較為容易「欺騙」視覺的金屬質感重新博得設計師關注。

12

上個時代的彩色圖案

也許是懷舊情懷的需要,也許是那年的少年已肩扛重擔。那些年在玩具和衣著上的圖案重新煥發出新的活力。

13

傻大粗黑

這一點毋庸置疑,在較長的一段時間里它都不會被取代。更令人欣慰的是,無襯線字體也開始展露頭腳,讓字體的選擇進入了一個新世界。

14

字體設計

在一切歸于冷靜之后,那些精雕細琢,能彰顯差異性的東西重回王者之地,字體設計也得以榮膺桂冠。

15

粒子背景

沉浸體驗,是所有設計師的不懈追求。不喧賓奪主突出主體,不太阿倒持取悅用戶,正是粒子背景的魅力所在。

16

拆分頁面

一分為二,各司其職;化繁為簡,相輔相成。劃分頁面空間,重新定義區域,圖像與文字分離,構建信息結構。信息越是爆炸,越需要化繁為簡。

17

艷,更艷

從性冷淡到大膽用色,恍然間拋開了對過度的恐懼。越是過度,愈是討喜,任何大膽的設計都會被稱贊和鼓勵。

18

單色圖標

色彩紛呈,漸幻若璃;界面之中,唯我獨素。色彩艷麗的今天,唯有圖標堅守其道。不跟風任吹,不隨波逐流,這種堅持換來了舒適與愉悅。

19

混合圖標

線與面合,白與艷合;合則一派,不合則滅。在不同風格爭相出現的今天,也是一種不錯的嘗試。

20

新造型主義

作為新造型主義的奠基人,皮特·蒙德里安曾這樣說過:對自由和平衡(和諧)的渴望是人類天性。通過理想的繪畫形式將宇宙真理物質化、幾何化。簡化極致,井然有序,色面完美。率真的純粹原色相互對立與平衡,憑借兩種否定,黑與白分割構圖。

除了以上提到的20個設計趨勢外,開春時我們已提到過例如

3D Still Lifes

近幾年,3D項目越來越多,也出現了像mvsm和Peter Tarka這樣的頂級3D藝術家。我們認為,3D靜物的項目和作品在2018年將會更受歡迎。

More Design in AR

AR(增強現實技術)的應用領域越來越廣泛,除了游戲、視頻和應用軟件中,AR在建筑設計和景觀設計方面有非常大的潛力。我們生活中的日常用品也會逐漸被AR滲透。

More 3D Typograph

3D Typograph也變得越來越流行,相較于2D而言更容易讓人產生深刻印象。Nike就是一個很好的例子,2018年我們一定會看到更多的3D Typograph。

Digitalized Handmade Art

更多的新工具和新的電腦程序讓手繪與數字結合得更自然,這種新趨勢被稱為數碼畫筆,越來越多的品牌如Adobe或Nike正在將這種技術與他們的新產品進行整合。

等等。已開始流行一段時間了。

 

小結

Behance官網上展現出各行業的設計靈感及趨勢,都是非常具有代表性和前瞻性的。能從這些設計的案例中吸取優秀的設計原理和技巧是難能可貴的。上一期我們還跟大家提到過,掌握必要的黃金設計法則后,最主要的還是在實戰中邊運用邊感受,看這這些大師總結的經典案例和技巧趨勢,也是作為一種有方向感的參考,真正能幫到自己的,還是要考自己多理解,多實踐總結才行。

]]>
http://www.zoosmid.com/archives/3047/feed 0
網頁設計常見問題 破壞力巨大卻容易被忽略 http://www.zoosmid.com/archives/3037 http://www.zoosmid.com/archives/3037#comments_reply Fri, 12 Apr 2019 04:04:18 +0000 http://www.zoosmid.com/?p=3037 文章轉載,來源素馬設計

留白,是中國藝術作品創作中常用的一種手法,極具中國美學特征。留白一詞指書畫藝術創作中為使整個作品畫面、章法更為協調精美而有意留下相應的空白,留有想像的空間。留白,有時也稱作負空間,兩者是同一個概念。盡管這個術語尤其指留“白”,但它所指的區域并不一定要是白色的。它只是網頁布局中環繞各元素的空白空間。想要讓一個元素足夠吸引用戶的注意力,往往需要通過周圍的留白來襯托,這樣的設計所營造的用戶體驗更為優雅。今天將會通過一些極簡的網站經典案例講解,讓大家很好的掌握網頁設計中的留白技巧。

網頁排版設計中,更多的留白,等同于更奢華的品牌與網站

客戶往往要求設計師盡可能用盡網頁里的空間,因為網頁中的空間是昂貴的,只有有限的屏幕來展示信息。無論如何,反其道而行之——增加留白——促使設計師在更嚴格約束的空間中,打造更加光鮮的品牌信息。

另外,大家會覺得,留白更多的網站,它的內容比屏幕空間更重要。所以,品牌也顯得更盡奢華,因為它犧牲了更多屏幕空間,反而將焦點匯聚在內容信息上。

https://www.potterybarn.com/

奢華的品牌了解這層隱喻,通常都使用更多留白來達到這一確切效果。PotteryBarn是個知名的高檔家具零售商,它的網站很聰明地使用了留白, 恰恰反映了這一點。留白支配了主頁,頁面旁邊大片的留白,更好地將訪問者的注意力集中在頁面中間的交易與促銷信息上。甚至頁面頂部的品牌名稱本身,也在字 符之間慷慨地運用了留白。

留白在網站設計中可以提升搜索的流暢度

兩大搜索引擎Google和Yahoo Search,詮釋了留白簡潔有效,這個簡單的例子再適合不過了。

Google準確地理解了一點,正在搜索某個話題的用戶,不想被嘈雜的背景和廣告分散注意力。因此,留白支配了整個Google搜索引擎頁面,實際 搜索框只占據頁面中央窄窄一絲空間。類似的,Yahoo搜索也體現了使用留白的妙處。雖然這個頁面頂部有長長一條菜單欄,理念還是相同的:大量的留白,使 用戶專注于搜索,別無他物。

可讀性和易讀性得到應有的大幅提升

用好留白,任何網站的可讀性與易讀性都會得到改善。如果一個頁面上的文字過于擁擠,它就會妨礙舒適的閱讀體驗,從而阻礙整體用戶體驗。更多的留白使文字更易瀏覽,從而提升閱讀體驗,也更易理解。

Information Highwayman是個掌握這項原則的個人站點,是D Bnonn Tennant——一名文案和市場專員的個人網站。擅長夸耀的他,知道什么樣的網頁內容對任何小本經營管用,令人欣慰的是,Tennant在他自己的網站 上實踐了他所宣揚的東西。標題的字間距、文字段落和菜單欄間距,有利于確??勺x性和易讀性。

它讓顏色更鮮明

也許留白最直接,盡管也是最簡單的益處,就是突出網頁中的其他色彩,使它們更加鮮艷。這點對于吸引訪客目光大有幫助,因為顏色深淺、飽和度甚至濃度都更加突出。

I Am Dan背后的設計師處理得非常棒,他在主頁上使用稀疏的色彩,成為了這個概念的典范。他的網站簡直就是零星幾片紅色分割開的留白。通過這種手段,紅色突顯了他作品集的鏈接,吸引訪客瀏覽他的站點,有效地突出了他的網站,因此提高了訪客響應召喚的幾率。

http://www.iamdan.net/

在什么地方用留白

必須承認,并非每個設計都需要大量的留白。留白的使用一定是有范圍,且有留白會對設計中下列因素產生影響:

– 排版布局

–?影像圖片

–?功能控件

–?文本內容

–?邊距間隙

Mark Boulton 將留白劃分為大小兩種。

小留白是在較小的元素之間小間隙,比如下面的元素周圍的留白就是小留白:

–?鏈接

–?列表

–?圖標

–?按鈕

–?文本段落

相反,在處理相對較大的元素的時候,周圍的負空間是大留白。

正確使用留白能夠為整個設計帶來平衡感。對于文本內容,你會發現易讀性的高低和其中的小留白的控制有著密切的關聯,這對于內容的呈現有著重要的影響。

使用留白的好處還有很多:

留白能夠增加內容的可理解性。

留白能夠凸顯特定的 UI 元素,CTA 元素大都如此。

可以讓設計更加整潔、友好。

極簡網站經典案例中,網站留白設計很優秀的有哪些站點

Bear Creek Distillery

http://bearcreekdistillery.com/

充滿形式感和沖擊力的圖片搭配上令人眼前一亮的文案,Bear Creek Distillery 可以輕松地從同類網站中脫穎而出。為了突出他們作為酒類供應商的核心競爭力「蒸餾技術」,設計師盡可能地降低可能讓人分心的因素,從而將信息精準直接地傳遞給訪客。

Squarespace

https://www.squarespace.com/

在保證用戶能夠獲取足夠的信息的前提下,Squarespace 的設計師盡量限制了界面上使用 UI 元素的數量。搜索框讓用戶能夠輕松找到他們想要的信息,而文案設計上的獨特性使得品牌的調性得到了放大。文本的字體色彩選用了黑色,和淺色的背景構成了強烈的對比,讓閱讀和信息的獲取都無比的輕松。

Progressive Punctuation

http://progressivepunctuation.com/

如何使用標點符號來傳達復雜的情緒?Progressive Punctuation 這個網站將這些「全新」的標點符號都展示了出來。

和其他的頁面不同的地方在于,頁面需要承載多個不同的非標準標點符號,為了將信息準確的傳達,設計師巧妙地使用留白來控制符號之間的間距,確保整體的優雅性,又保證了信息的傳達。

Apple

https://www.apple.com/iphone/

關于留白的設計,很難繞過蘋果這么經典的案例。雖然他們不是先驅,但是蘋果將這一技巧的運用在自家的產品設計和網站設計上,體現的淋漓盡致。

在他們的網站上,你會看到清晰的視覺脈絡,頁面的每個部分都有清晰的視覺焦點,主次分明,用戶永遠不會在這里迷失和分心。

Tinker

https://tinkerwatches.com/

你可以在 Tinker 定制手表,在網站上,你可以選擇手表的樣式、色彩和裝飾元素。

為了突出產品的可定制性,Tinker 這個網站中所能看到的最顯著的視覺元素是清晰的被分離出來的手表組件圖片,就像蘋果的官網一樣,設計師不希望你的注意力被別的東西轉移走了,減少次要信息的展示,從而提升核心元素的展現。只展示必須的內容,直接給你需要的一切——手表就可以了。

The Pisacco Chronicle

http://thepisaccochronicle.com/

The Pisacco Chronicle 是一個專注于美食、電影和藝術的線上雜志,這些是絕大多數人都非常喜歡的東西。

有趣的是,網站為了吸引人采用了寶麗來風格的輪播圖。頁面中的標題和導航都非常吸引人,這很大程度上是因為頁面上能讓人注意到的元素確實不多。如果有更多的文本內容,就很難保證各個元素都那么清晰直觀了。

沒有晃眼的色彩和跳出式的配色,這樣讓頁面中的圖片內容沒有不吸引人的理由。

Seedlip

https://www.seedlipdrinks.com/

這個品牌同樣是釀酒廠,不過這次他們的網站推薦的是軟飲料。這次的飲料是基于全新的概念創造而來,使用帶有大量留白的網站來呈現是個不錯的選擇。

網站同樣使用了大量的留白來凸顯信息,更重要的是設計師還強化了瀏覽體驗,用戶向下瀏覽的時候,高清的飲料圖片會成為整個視覺的中心。為了強化品質感,設計師讓用戶可以很快注意到這個品牌巴洛克風格濃郁的華麗 LOGO,而這樣的效果同樣和留白的貢獻分不開。

Pocket Penguins

企鵝出版社一直以他們出色的封面設計而出名。加粗的文本和大膽的色彩是他們的特色,Pocket Penguins 這個網站就完美的延續了他們的品牌特色,通過色彩和排版讓用戶注意到他們的書本。

Sweetgreen

使用留白和色彩豐富的圖片來吸引用戶是非常有效的方法,因為兩者能夠正好構成對比。

對于美食尤其是如此,色香味三者當中,色彩和視覺是最先傳達給人的,誘人的圖片是 Sweetgreen 這個網站吸引用戶的最有力武器,所以留白盡量襯托出這些圖片,讓這些美食被用戶注意到。

Jomor Design

https://www.jomordesign.com/

當你想要傳遞信息的時候,讓用戶只專注于那條信息是最有效的方法,如果用戶只有這么一個信息映入眼簾的時候,自然就怎么都不會錯過了。

Johor Design 這個網站一直致力于傳達清晰的信息。作為一個設計機構,他們使用一個精心設計的文案來抓住你的注意力,「I wanna help you kick ass.」(讓我來幫你成為最牛的。)

如果頁面中有圖片的話,這段話是不會被注意到的,因為文本通常沒有圖片吸引人。

留白不是浪費空間

網頁設計師們越來越多拋棄之前的誤解——認為設計頁面時應該盡可能在屏幕內填塞每個元素、每種顏色。正如上面例子解釋過的,留白被用于突出品牌內容、提升可讀性與易讀性、突顯極簡色彩時,展現出了強大的影響力。

俗話說“少即是多”,不論你怎么看,它的確適用于關于留白的一切觀點。廣義上講,網頁設計中的這種極簡處理方式,如今正越來越盛行,這項趨勢肯定能持續下去。

小結

網站留白設計處理得當的話,確實可以為網頁設計帶來大量的益處。不應減少網頁設計中的留白,相反,應該增加網頁中的負空間。一些知名的大眾品牌已經在朝這個方向前進,更多的設計師們也在追隨他們的腳步。通過以上極簡的網站經典案例講解,相信大家都已經掌握網頁設計留白技巧了吧。務必要吃透哦!

]]>
http://www.zoosmid.com/archives/3037/feed 0
網頁界面設計巧用動效技術視覺體驗更加有趣 http://www.zoosmid.com/archives/3036 http://www.zoosmid.com/archives/3036#comments_reply Fri, 12 Apr 2019 03:56:54 +0000 http://www.zoosmid.com/?p=3036 文章轉載,來源素馬設計

我們談論網站網頁設計時的視覺體驗,通常只憑設計稿是不行的,要真正能體驗到用戶使用網站和感受到操作體驗,還真的必須要經過動效設計和網站使用過程中體驗。所以,網頁ui界面設計需要跟動效設計相結合才能做出更優秀的視覺體驗作品。

網站建設和設計早些年,依然是以平面設計為主的服務設計,如今用戶體驗泛濫成災,用戶對使用一個網站的期待和要求越來越高,做一個簡單的企業網站也得認真考慮用戶體驗問題,必須要在核心的體驗部分加入交互設計的技術,適當的采用有趣的動效設計。動效設計已經被絕大多數建站公司視作改善用戶體驗的重要手段。從為界面營造氛圍的微小動效,到用來溝通用戶的視覺線索,動效解決方案越來越全面。

今天我們一起探討關于交互設計中的動效設計問題,這些是素馬多年為深圳企業建站的經驗總結,是經過實戰經驗驗證、可行性極高的技巧。

01

彈性動效

有趣而優雅的彈性動效每天都能看到。通常,彈性動效是短暫而優雅的,它常常能夠吸引用戶的注意力。成功的動效通常不僅依賴于設計師的設計,還需要代碼實現,以及貼合物理規律的微積分函數作為支撐。在很多時候,這種看起來涉及物理學的動效,很難創新。不過事實上,關鍵還是要看你如何實現,以及在哪里實現這些動效。如果你對于 Velocity.js 和 WebGL 這些工具一無所知,也能用CSS實現它。最受歡迎的彈跳動效包括:

類似彈簧一樣,快速拉伸變大,然后迅速壓縮成所需的形狀,在打開某個組件的時候強化視覺,通常,這個過程都很短暫。

平滑的充滿流體動感的動效,伸展,浮動,然后收縮為初始狀態。一般而言,它會持續地彈跳,營造氛圍。

在具體的實施的過程中,設計師通常會合理地選擇兩種動效作為支撐。比如 LatinoMedios 和 Oprette 都使用彈性動效來增強控件的打開體驗。前者采用了圓潤流暢的彈性動效,而后者則采用了彈簧式的動效,更加搶眼。

LatinMedios

http://www.latinmedios.com/

Oprette

Taika Strom 這個網站中則采用了更加先進的技術,背景使用 WebGL 來驅動彈性動效,讓用戶在瀏覽的時候全程都能感受到動效,豐富了整體的體驗。

 

02

變化的LOGO

花上幾秒鐘看著LOGO逐漸變化,似乎是一件頗為浪費時間和資源的事情,但是在很多時候,它是非常有效的設計。作為品牌標識的一部分,LOGO 承載著品牌信息(特征、風格、元素、色彩等),也關乎審美。雖然LOGO在網頁中占據的位置并不大,但是它非常吸引眼球,在用戶心目中也會被視作為重要的組件,并不會被那么輕易被忽略。

在LOGO上施加動效有幾種不同的趨勢。

1、讓LOGO變得有趣

看看 HTMLBuger 這個網站的LOGO,它在動畫的加持下不僅僅頗為有趣,而且達成了兩個目標:

作為吉祥物,用來支撐品牌形象,展示品牌氣質和特征

作為一種有意思的動態效果,它為項目增加額外的樂趣,營造歡脫的氛圍

HTML Burger

https://htmlburger.com/

2、讓LOGO顯得嚴肅和保守

和前一個網站不同的地方在于, Muriel Guillaumon 同樣運用了動效,但是它們是為了營造網站嚴肅的氛圍。這里的動畫并不復雜,只是顏色和大小有微小的變化,但是它很好地匹配了網站的整體主題和審美趨勢。

Muriel Guillaumon

https://www.muriel-guillaumon.fr/fr/

3、讓LOGO顯得極簡而優雅

Funktional 這個網站就很好地利用了簡約的設計。當你在著陸頁打開網頁的時候,LOGO和文本內容結合起來,顯得完整而正式,隨著瀏覽的深入,進入子界面之后,文本會隱去,僅有品牌LOGO優雅地展示出來。

Funktional

http://www.funktional.net/

03

有意義的加載動效

是時候和無聊的等待加載的沙漏說再見了。優秀的加載動效已經越來越智慧和復雜了。

講真,現如今的加載動畫已經是聚光燈下的重要設計元素了。從最初簡單的設計,到如今加載動效成為了承載著重要作用的小動畫,它不僅告知用戶這個等待過程進度,而且通過愉悅用戶,增強了整個用戶體驗。它的功能并不單一:

作為品牌形象的支撐

提供額外的信息

說明當前情況

提醒用戶注意

創造愉悅感

給用戶留下好印象

強化第一印象

創造用戶預期

這個列表并不完整,因為它的功能還能更多。

現在實際的情況是,可以用來制作加載動效的方法和工具有很多。你可以選用CSS來實現,也能用 JavaScript 和 Three.js 等相對更重的工具。

看看 Open Continents 和 Do you speak human 兩個網站加載動效的設計吧。雖然具體的設計不盡相同,但是他們都有一個共同點,就是它們會照顧訪客的情緒和心理。

Open Continents 這個網站的加載動效讓人覺得興奮,設計師通過 WebGL 技術創造出貼合用戶預期的感覺,用戶能夠用光標同加載動效進行交互。

Open Continents

http://opencontinents.com/

置于第二個網站,它的加載動效更加簡單有趣,一個會舞蹈的機器人,是不是很有意思?

Do you speak human

http://doyouspeakhuman.com/

一般而言,創意團隊為網站搭建了有趣的細節和功能,并且希望用戶能夠等待加載之后能享受到這些設計。而加載動效就是招徠訪客的重要環節,它們讓用戶留下來,通過和網站本身統一一致的設計,給予用戶預期,讓他們期待后面會展現的內容。

04

動畫化的漢堡圖標

盡管這個由三條橫杠組成的小圖標在很久之前就已經失去其魅力了,但是它如今依然無處不在。所以,不少設計師還是盡量想為這個圖標注入更多的的魅力。你無需重新造輪子,不用進行復雜的重設計,你只需要為漢堡圖標添加一個有趣的動效就能產生為它注入生命力。讓它與周遭的設計融合起來,對于用戶更加友好即可。

看看 Aristophane 和 Brussels Airport In Numbers 這兩個網站是怎么做的。

前者采用了微妙的懸停動效,當光標懸停在上方的時候會觸發,點擊之后,動畫驅動漢堡圖標變化成為一個關閉按鈕。第二個網站情況不一樣,設計師專注于結合背景圖片來構造不同色彩主題的設計方案,而漢堡圖標的背景小方塊則成了這些主題的視覺線索。

Aristophane

Brussels Airport in Numbers

https://brusselsairportinnumbers.brusselsairport.be/

小結

隨著交互設計重要性的提升,動效也越來越被設計師所重視。它不僅僅是取悅用戶的工具,而且被視作為改善用戶體驗的重要手段。即便今天為一個小的企業建設一個品牌網站,也要慎重考慮動效設計表現問題。希望通過本文分享的四個技巧,對大家做網站ui界面設計及交互設計時有所借鑒。

]]>
http://www.zoosmid.com/archives/3036/feed 0
内蒙古11选5基本走势图 内蒙古11选5基本走势图 内蒙古11选5开奖 内蒙古11选5基本走势图 内蒙古11选5手机版 内蒙古11选5手机版 内蒙古11选5基本走势图 内蒙古11选5基本走势图 内蒙古11选5手机版 内蒙古11选5走势图表 内蒙古11选5开奖 内蒙古11选5开奖 内蒙古11选5开奖 内蒙古11选5开奖 内蒙古11选5手机版 内蒙古11选5基本走势图 内蒙古11选5开奖 内蒙古11选5基本走势图 内蒙古11选5基本走势图 内蒙古11选5走势图表 内蒙古11选5历史记录
  • <label id="mbc6a"></label>
  • <mark id="mbc6a"></mark>

  • <kbd id="mbc6a"><button id="mbc6a"></button></kbd>
  • <mark id="mbc6a"></mark>