網(wǎng)站設(shè)計(jì)不得不要知道的原則
網(wǎng)頁(yè)視覺設(shè)計(jì)原則關(guān)系到網(wǎng)站的用戶體驗(yàn)。然而對(duì)于網(wǎng)頁(yè)的設(shè)計(jì)原則,需要網(wǎng)頁(yè)設(shè)計(jì)師充分了解設(shè)計(jì)原則才能設(shè)計(jì)出更好的網(wǎng)頁(yè)。今天洛壹網(wǎng)絡(luò)繼續(xù)為大家介紹一下網(wǎng)頁(yè)的視覺設(shè)計(jì)原則。
讓頁(yè)面有層次有重點(diǎn)
交互設(shè)計(jì)師完成頁(yè)面布局設(shè)計(jì),突出頁(yè)面重點(diǎn),方便用戶瀏覽信息、完成任務(wù)。視覺設(shè)計(jì)階段,好的設(shè)計(jì)稿對(duì)于延續(xù)前期交互理念,引導(dǎo)用戶操作是非常有幫助的。
模擬現(xiàn)實(shí)世界匹配用戶心智模型
原型設(shè)計(jì)中常說,操作方式要符合用戶的心智模型,其實(shí)視覺設(shè)計(jì)也一樣。把一些現(xiàn)實(shí)元素拿來(lái),模擬真實(shí)世界,會(huì)給用戶身臨其境的感覺。
插圖讓產(chǎn)品更有情感
插圖在文章頁(yè)面中很多,我這里只舉錯(cuò)誤頁(yè)的例子。大家都有感觸,錯(cuò)誤的體驗(yàn)是非常不好的,但設(shè)計(jì)師卻用一張張插圖,讓這種挫敗和焦躁的感覺降到了最低,化解了用戶的負(fù)面情緒,同時(shí)產(chǎn)品也更有味道了。
9、巧用Icon,頁(yè)面更精彩
Icon設(shè)計(jì)是視覺設(shè)計(jì)非常重要的一部分,很多晦澀難懂的內(nèi)容,配上Icon圖形化解釋,會(huì)更容易理解。相反,如果圖標(biāo)的設(shè)計(jì)元素不合適,或是將圖標(biāo)將背景亂用,也會(huì)干擾用戶理解。
10、柵格化提升用戶體驗(yàn)和開發(fā)成本
柵格化在視覺設(shè)計(jì)中,越來(lái)越受重視,究其原來(lái),主要是三點(diǎn):一是可以統(tǒng)一頁(yè)面的布局,提升用戶的瀏覽操作體驗(yàn);二是將頁(yè)面模塊的尺寸標(biāo)準(zhǔn)化,降低開發(fā)和維護(hù)的成本;最后,柵格化也是網(wǎng)頁(yè)設(shè)計(jì)專業(yè)度的體現(xiàn)。
至此,視覺設(shè)計(jì)原則講完了。
說了這么多,最后簡(jiǎn)單談?wù)勛鳛榻换ピO(shè)計(jì)師的我們?cè)撛趺醋霭?。思考這個(gè)問題之前,還請(qǐng)大家把以上的原則再?gòu)?fù)習(xí)一遍:
1. 通過字體表達(dá)產(chǎn)品風(fēng)格
2. 通過配色展示產(chǎn)品定位
3. 營(yíng)造統(tǒng)一的品牌形象
4. 造型讓產(chǎn)品更有沖擊力
5. 重要內(nèi)容留在首屏
6. 讓頁(yè)面有層次有重點(diǎn)
7. 模擬現(xiàn)實(shí)世界匹配用戶心智模型
8. 插圖讓產(chǎn)品更有情感
9. 巧用Icon頁(yè)面更精彩
10. 柵格化提升用戶體驗(yàn)和開發(fā)成本
總的來(lái)說,我們可以把這10個(gè)內(nèi)容歸成兩類,一個(gè)完全是視覺設(shè)計(jì)師的領(lǐng)域,以溝通為主;另一個(gè),交互可以和視覺設(shè)計(jì)配合完成,溝通以外注重交付物的傳遞。
第一類包括:通過字體表達(dá)產(chǎn)品風(fēng)格、通過配色展示產(chǎn)品定位、營(yíng)造統(tǒng)一的品牌形象、造型讓產(chǎn)品更有沖擊力、模擬現(xiàn)實(shí)世界匹配用戶心智模型。
了解這些內(nèi)容,了解視覺設(shè)計(jì)師能做哪些提升體驗(yàn)的事情,才能更好地和他們溝通。讓視覺設(shè)計(jì)師提早了解需求,獲得對(duì)等的產(chǎn)品信息,才能更好地發(fā)揮設(shè)計(jì)的力量。
第二類包括:重要內(nèi)容留在首屏、讓頁(yè)面有層次有重點(diǎn)、插圖讓產(chǎn)品更有情感、巧用Icon頁(yè)面更精彩、柵格化提升用戶體驗(yàn)和開發(fā)成本。
這類原則,除了和視覺設(shè)計(jì)師有效溝通,最好在自己的交付物——原型以及講解中有所體現(xiàn)。比如原型中通過不同灰度色塊表現(xiàn)設(shè)計(jì)重點(diǎn)、注重各個(gè)組件的柵格化、為重點(diǎn)內(nèi)容設(shè)置插圖和Icon的占位符等等。通過這種對(duì)視覺設(shè)計(jì)的理解、交付物形式的傳遞,配合視覺設(shè)計(jì)師做出更符合產(chǎn)品需求以及用戶體驗(yàn)的產(chǎn)品。
設(shè)計(jì)網(wǎng)站中有哪些關(guān)鍵技巧?有哪些陷阱?在這里,世界上一流的網(wǎng)站設(shè)計(jì)專家,讓你共享他們的秘密,告訴你:使網(wǎng)站賦予情趣的訣竅、應(yīng)該避免做什么、應(yīng)使用什么工具軟件以及他們喜愛和厭惡的網(wǎng)站。
大部分網(wǎng)站或產(chǎn)品的按鈕色彩都不會(huì)超過3種,指向“動(dòng)作”的按鈕應(yīng)當(dāng)統(tǒng)一為同一種顏色,比如Google的“搜索”按鈕是藍(lán)色,而Twitter的“注冊(cè)”按鈕則是明亮的黃色。色彩能夠幫助品牌極為簡(jiǎn)易的建立用戶認(rèn)知:
今年,許多網(wǎng)站都將這個(gè)小元素納入界面,成為頁(yè)面導(dǎo)航的重要組成部分。除了導(dǎo)航設(shè)計(jì)趨勢(shì),還有各種設(shè)計(jì)方法,如全屏導(dǎo)航,底部導(dǎo)航等,所有這些都有利于網(wǎng)頁(yè)設(shè)計(jì)師。
網(wǎng)頁(yè)設(shè)計(jì)必須簡(jiǎn)約,任何無(wú)用的特質(zhì)都必須移除;與此同時(shí),網(wǎng)頁(yè)設(shè)計(jì)必須能夠滿足用戶需求。
做網(wǎng)站設(shè)計(jì)時(shí),我們應(yīng)該考慮哪些因素?在做的過程中設(shè)計(jì)師應(yīng)該思考哪些問題,怎么樣才能做好網(wǎng)站設(shè)計(jì)?
用戶體驗(yàn)好的方案,用戶感受到的體驗(yàn)真的好嗎,真的在意嗎?用戶愿意為這個(gè)體驗(yàn)更多的使用?還是愿意付更多錢? 如果設(shè)計(jì)希望被認(rèn)可價(jià)值,那么就必須清晰表明:設(shè)計(jì)到底實(shí)現(xiàn)了什么價(jià)值,以及設(shè)計(jì)是如何穩(wěn)定實(shí)現(xiàn)這些價(jià)值的。 網(wǎng)站設(shè)計(jì)中設(shè)計(jì)師到底要實(shí)現(xiàn)什么價(jià)值?
玻璃擬態(tài)(Glassmorphism),更直觀的說就是玻璃擬物化。它是在2020年末開始在各大設(shè)計(jì)平臺(tái)流行起來(lái)的設(shè)計(jì)趨勢(shì)。當(dāng)時(shí)蘋果新發(fā)布的Mac OS Big Sur操作系統(tǒng)中也使用了這種風(fēng)格
網(wǎng)頁(yè)設(shè)計(jì)師想出了一些非常聰明的技巧,讓他們的作品有一種實(shí)體感。玻璃擬態(tài)(Glassmorphism)就是這樣一種技術(shù)。當(dāng)您將模糊效果與透明度相結(jié)合時(shí),像素會(huì)呈現(xiàn)出磨砂玻璃的略微不透明的品質(zhì)——為設(shè)計(jì)增添一絲質(zhì)感和維度。