国产日本中文字幕网_久热免费视频_秋霞2016午夜限制电影在线_www色视频还会玩转热点_欧美中日韩免费专区在线_亚洲AV色噜噜男人的天堂吃奶_亚洲人成无码网址_国产成人主播在线观看_欧美韩日精品一区_久久精品国产亚洲AV高清色三区

公司新聞

將想法與觀點,與您一起分享~

開發(fā)案例插畫 插畫-樹 插畫-樹

重慶網(wǎng)站設計:按鈕的細節(jié)設計問題

潤雪科技 時間:2017-07-06 10:20 瀏覽量:3288

重慶網(wǎng)站設計中,關于按紐這祥的細節(jié)在網(wǎng)頁設計中至關重要,尤其在按鈕多的地方需要根據(jù)用戶使用習憤和情境來決定按紐層級、位置、組合方式。所以在網(wǎng)站設計之初需要先制定統(tǒng)一的按紐樣式和層級,以及使用場果,當然這不是固定不變的,在設計稿全部完成前還需要一定的微調完善。

一、通用按鈕

按鈕揉作的動作,基本上分為正常、移入、點擊、激活、禁用等,有的信息網(wǎng)站為了使用戶更容易區(qū)分是否閱讀過還會添加點擊過的狀態(tài)。

以下按紐顏色是重慶網(wǎng)站制作公司網(wǎng)站使用的規(guī)范,由內到外分別是正常、移入、點擊三種狀態(tài)的顏色。如果想偷懶的話可以直接選移入的顏色然后在上面調整透明度再吸顏色,但是差距不宜過大,否則會給頻繁使用的用戶造成視覺負擔。


使用場景:相似功能過多,沒有突出使用的按鈕或者禁用。
注意是“或者”,千萬不能同時使用!假如全都是可以使用的按紐,你突然來一個禁用,讓用戶點半天沒反應?瞄?如果區(qū)分困難的話當然可以在按紐文字和背景顏色上做文章。

使用場景:為了突出當前頁面的主要功能,區(qū)分于其他零散功能。
數(shù)據(jù)或者工具網(wǎng)站中一般用于提交、上傳、下載、搜索等,電商網(wǎng)站后臺最常見的就是“確認收貨’’按鈕,它們一般被賦予logo的顏色或者網(wǎng)站主色調。主睡色同樣被使用在文字按鈕的移入樣式和控件激活樣式中。

使用場景:基本上和主要按紐一同出現(xiàn),層級低于主要按鈕。
為了功能上的區(qū)分需要次要桉紐的出現(xiàn),它的層級主要根據(jù)用戶使用頻率來定義,并不是設計師看心情來定奪的

使用場景:操作成功的提示中,或者toast中的輔助按紐。
通常為了銷簡顏色使用,我還是推薦使用主要按鈕的顔色,還是考慮到用戶的人認知負擔的問娌》使用的時候可以根據(jù)網(wǎng)站顔色來決定要不要采用這些顔色。

使用場景:和成功類的按鈕類似,僅作為信息提示使用。
可以采取一小部分作為點綴色對網(wǎng)頁上的按紐和icon進行裝點。

使用場果:威脅到“生命安全”時使用,通常涉及到財產和賬號安全性使用警告色。
紅色一般很少用,除非你的網(wǎng)站主題色就是紅色,然后危險警告可能就需要換成黑色或者色相或者明度差距更大的顏色了。


既然有了默認按鈕,那么按紐的大小和細節(jié)樣式需要根據(jù)網(wǎng)站布局和風格來調整了。


二、按紐樣式

按紐的大小需要首先定義默認大小,然后再根據(jù)特殊場景下的頁面對按紐的大小進行調整,使之與頁面在視覺和交互層面和諧。我通常使用高度36p>(的按紐為默認按紐,基本上可以適用于所有的頁面,但是也不缺乏按紐多到可以擠在一起的情況,這時候可以考慮Small Button,不建議使用TinyButton,不僅交互體驗差,點擊容易出現(xiàn)錯誤,對于近視的人也是很差的體驗。



如上圖所示,單一的按鈕大小雖然看不出什么,但是放在一起的話,默認的按鈕大小略顯笨重,反而小按鈕在視覺上相對輕巧。

大按紐基本上在頁面中沒有其他特殊控件或者按紐參與的悄況下使用,這樣可以鎮(zhèn)住”場面’’,當然也SS要頁面的顔色配合啦。也可以在彈窗中使用,有助于聚焦。這就涉及到組合按鈕樣式了。



來源聲明:本文【重慶網(wǎng)站設計:按鈕的細節(jié)設計問題】由潤雪科技編輯原創(chuàng)或采編整理,如需轉載請注明來自潤雪科技。以上內容部分(包含圖片、文字)來源于網(wǎng)絡,如有侵權,請及時與本站聯(lián)系。

TAG標簽:網(wǎng)站開發(fā) 網(wǎng)站設計

相關文章
  • 前端react項目使用prettier來格式化(美化)各種代碼

    前端react項目使用prettier來格式化(美化)各種代碼

    前端react項目使用prettier來格式化(美化)各種代碼,包括javascript、php、java、typesctip、css、less、json、sql等都可以美化

  • php用Mpdf將html文檔轉為pdf

    php用Mpdf將html文檔轉為pdf

    php將html文檔轉成pdf保存到服務器

  • php用libreoffice將ppt轉為pdf

    php用libreoffice將ppt轉為pdf

    1、先安裝libreoffice:yum install libreoffice;2、由于ppt中都是中文,執(zhí)行命令轉ppt的時候中文可能亂碼,我的解決辦法是在liunx系統(tǒng)中安裝中文字體,把windows的字體直接全部拷貝到liunx服務器中,直接把所有字體都上傳到服務器

  • php利用imagick擴展將pdf導出成圖片

    php利用imagick擴展將pdf導出成圖片

    需要先安裝php的imagick擴展,兩種方式,第一種是使用php,第二種是使用命令執(zhí)行;隨便用哪種執(zhí)行需要修改nginx配置文件增加:proxy_read_timeout 600s;使其鏈接60秒后不斷,不然pdf一旦過大60秒無法完成工作就斷開鏈接了

  • apache配置轉發(fā),如使用workerman 或 webman等框架的時候配合apache

    apache配置轉發(fā),如使用workerman 或 webman等框架的時候配合apache

    在使用workerman 或 webman等框架開發(fā)應用的時候需要配合nginx 或 apache進行轉發(fā),官網(wǎng)的文檔只有寫nginx,下面的apache的配置,前提是apche需要開啟這兩個模塊

  • 一個class類幾個函數(shù)即可調用各種微信支付場景

    一個class類幾個函數(shù)即可調用各種微信支付場景

    真在的只需要一個class類文件幾個函數(shù)就可以調用微信的所有支付,不管是微信公眾號、h5、app、小程序支付,加密方式都是一樣的,對比下微信的支付文檔,只需要修改第一步傳入的參數(shù)不同,下單地址不同,加密方式都是一樣的,所以只要看懂下面的第一個函數(shù),將搞定微信的任何支付。

如果您感覺我們的案例非常不錯,請與我們取得聯(lián)系~
立即咨詢
獲取方案及報價 023-6288-5285
網(wǎng)站建設流程 需求溝通
網(wǎng)站建設流程 簽訂合同
網(wǎng)站建設流程 項目開發(fā)
網(wǎng)站建設流程 上線/運營維護

張經(jīng)理

186-9655-6121

鄒經(jīng)理

188-1980-6503

潤雪科技二維碼
電話咨詢 在線咨詢 微信咨詢