閱讀859 返回首頁    go 阿裏雲 go 技術社區[雲棲]


新手來看,常用的web前端技術

今天小編同學給小編安利了一個特別炫酷的頁麵,上麵全是她的偶像照片,小編羨慕壞了。會web前端就是狂拽炫酷,小編想說求婚的隨便寫個網站給女票就好了嘛,還要啥套路。

web前端看上去好像是搞文藝的,整天都要“符合顧客的審美”,但其實它的重點主要是在功能方麵,要超越桌麵應用程序, Web應用程序必須提供簡單、直觀和即時響應的用戶界麵,讓他們的用戶花更少的精力和時間。 
今天小編告訴大家一些web前端小技術,幫助大家做更好的攻城獅。

界麵元素的需求

在Web前端設計中,簡單清新的頁麵是很重要的。在任何時候,用戶的屏幕上顯示的模塊越多,那他將花費更多的時間去搞清楚所有模塊的作用。當模塊很少時,可用的功能變得更加明顯更容易被發現。簡化界麵顯然是不容易的,尤其是如果你不想限製應用程序的功能的時候。


當你點擊 Kontain 搜索框的搜索鏈接時,會出現一個類似於下拉菜單的層。所以,如果您需要來縮小搜索範圍,您可以選擇菜單中你所需要的類型。這些選項的聚合簡化了搜索框。 
我們需要了解用戶的習慣,去掉不需要的部分,隻顯示最常用的部分。 
你可以用彈出式菜單和操作來做這件事,這在桌麵軟件中很常見。決定該保留什麼隱藏什麼不是一個簡單的任務,也會取決於重要性和操作時的頻繁程度。

專門操作

根據情況選擇合適的控件是很重要的。不同情況下可以用不同的方式處理,帶有目的性的控件會比其他控件能夠更好地完成他們的目標工作。

例如,拿日曆和下拉列表來做比較,顯然日曆選擇器相比下拉列表不是很方便,在日曆裏你可以直接通過點擊選擇你想要的某一天。日曆選擇器也會讓你更容易看到日期、周期和月份(特別是工作日和休息日),因此能夠讓用戶更快做出選擇。

禁用按下按鈕

在web應用程序的表單問題中,如果你快速地點擊兩次或者更多次“提交”按鈕,這個表單會被多次提交。這個問題是因為它會重複創建相同的項目 。其實這個問題不難,大多數Web應用程序來說做到這一點是非常必要的。 
它有兩層維護:客戶端和服務器端 。我們不會通過服務器端維護是因為這將取決於您使用的編程語言和你的後端架構。基本上你應該做的就是在提交過程中添加一個檢測機製,去檢查被提交的內容是否重複,並且是否需要阻止提交。(web前端學習交流群:291851189 禁止閑聊,非喜勿進!)

彈出窗口的陰影

在彈出菜單和窗口下的陰影不止是看起來很漂亮這麼簡單。它們幫助菜單或者窗口通過強調從背景中脫穎而出 。它們還通過周圍暗色調區域來屏蔽掉背景內容的噪音。 
這種技術來源於傳統的桌麵軟件,幫助用戶把他們的焦點放在出現的窗口上。由於大多數情景窗口是不容易從桌麵程序中辨識出來,所以陰影幫助他們更接近於讀者,因為這種類似於三維的立體感,讓用戶更好分辨出。

空白狀態時你要做什麼

當你的頁麵處在一個空白階段時,你是怎麼利用的? 
當在頁麵或者查詢結果沒有信息時,告訴用戶如何才能處理這些空白區域是跟用戶最好的交談。例如,一個項目管理應用程序的網頁可能會列出用戶的項目,但如果沒有項目,你可以提供一個創建項目的鏈接。即使已經有創建項目的按鈕存在在頁麵上,但這還是大大有利的 。 
通過空白狀態去激勵用戶行為,可以大大減少“彈出”,並且幫助您的潛在客戶,更好地了解該係統如何工作。

按鈕的按下狀態

小編很喜歡頁麵上看起來很立體的小按鈕。其實默認輸入按鈕可能不適合在一些情況下,而文字鏈接很多時候不是很討人喜歡。那麼,當你把你的鏈接弄得看上去像按鈕時,它們的操作也應該和按鈕一樣,當然包括被“按動”的效果 。 
這不是一個純粹的視覺調整。提供即時反饋給用戶將使應用程序感覺更有響應性。 
你可以通過CSS為按鈕增加按下的效果。

在登陸頁麵提供注冊的連接

這個大家應該都是懂的,無論你點進大大小小的網站,不幹點啥都要注冊個賬號。現在這個流量比油貴的年代,哪個站長不設置個注冊才傻呢。

一些沒有注冊你的應用程序的用戶將不可避免地停在你的登錄頁麵上。他們想要使用你的應用程序,但是卻不能立刻找到注冊頁麵,這樣的用戶體驗,會讓你永遠的失去這個用戶。

關聯導航

站在用戶角度思考為什麼他會點這個,那麼他下一步想看見的是什麼就給他什麼鏈接。你不需要在每個地方顯示同樣的導航鏈接因為在用戶可能不是在每個環境中都需要它們。 
web應用程序也可以受益於這種上下文關聯的控件,因為這些控件通過隻顯示用戶需要的內容來幫助整潔界麵,並非顯示所有的內容 。

最後更新:2017-10-20 16:03:41

  上一篇:go  用樸素貝葉斯模型預測柯南中被害人和凶手!
  下一篇:go  10月20日雲棲精選夜讀:揭秘雲棲大會VR直播雲服務解決方案的技術亮點和核心能力