google 程序员 linux mysql nginx centos 云计算 wordpress 开源 Ubuntu apache shell java Android 编程 php Firefox 微软 Python Windows

基於Qt的詞典開發系列<六>–界面美化設計

本文講一講界面設計,作品要面向用戶,界面設計的好壞直接影響到用戶的體驗。現在的窗口設計基本都是扁平化的,你可以從window XP與window 8的窗口可以明顯感覺出來。當然除了窗口本身的效果,窗口中各種控件的特效也是特別重要的一環。下面講講我在詞典軟件中的一些設計:說到界面美化的設計,不得不提到美工,一個好的美工是相當的重要!軟件畢竟少不了圖標,而不懂美工的我,也就只能在網上使用別人的圖標了。

如何得到網上的圖標?
   直接百度就可以了,當然還有另一種方法:就是從別人的文件中提取這些圖標文件。一般來說,圖標文件是不會以圖片格式存儲在軟件目錄中的,一般都存放在後綴名為.rdb以及.ui文件中。具體的步驟如下:
1、找到要提取軟件的安裝目錄
2、進行搜索:搜索.jpg、.png等圖片格式文件(能夠搜到最好了),然後搜索.rdb或.ui文件
3、下載RDB打包解包工具,進行解包,就可以得到圖片資源了  

控件間的無縫連接:
    所謂無縫連接是指控件與控件之間沒有空隙,用Qt Creator打開界面文件,比如我打開這個詞典項目,打開searchwindow.ui文件,控件是否有空隙的效果如下所示:
控件間的空隙大小可以由這些子控件所在父控件的Layout屬性控制
1、當Layout屬性設置如下時:(有空隙的情況)

則控件間有空隙,顯示效果如下:

2當Layout屬性設置如下時:(沒有空隙的情況)

則控件間無空隙,顯示效果如下:


按鈕的美化
現在按鈕也開始扁平化,例如上圖中的所有按鈕都是扁平化的,兩者的差別如下:

顯然第一種是常規的按鈕,如果我們把ToolButton的autoRise屬性書中,就會出現第二種情況,之所以沒有使用QPushButton是因為它沒有autoRaise屬性。

當選中autoRasie屬性後,當鼠標放在該按鈕上時效果如下:


動態渲染效果
   我們發現很多軟件都有動態效果,如鼠標放在按鈕上時,會發生變化,點擊後又發生變化,這些是怎麽做到的呢?Qt中美化界面最好的使用QML,不過由於剛出來不久,網上資料不是很多,我也不是很懂,就不介紹了。學習過網頁制作的都知道,網頁的渲染效果用到了css,與此類似,Qt使用qss來美化界面。下面介紹一種簡單使用的方法來進行渲染操作:
右鍵單擊界面中的控件,選擇“更改樣式表……”,然後在彈出的窗口中設置渲染效果,下面以單擊按鈕來舉例說明:
首先,右擊關閉按鈕,選擇“更改樣式表……”:

然後在彈出的“編輯樣式表”按鈕中寫入如下代碼:
QToolButton{
    
    border-image: url(:/searchwindow/searchwindow/close_normal.png);
}
//上面的語句是給“關閉”按鈕添加close_normal.png的圖標,註意這裏需要寫你自己圖片的路徑
QToolButton:hover{
    
    border-image: url(:/searchwindow/searchwindow/close_hover.png);
}
//這條語句的作用是,當鼠標放在“關閉”按鈕上時,圖標變成close_hover.png的圖標,註意這裏需要寫你自己圖片的路徑

這兩條語句實現的效果如下:

一般情況下,關閉按鈕顯示如下:

當鼠標放在上面時,效果如下:

我在詞典中所有的按鈕幾乎都是采用了這種效果,如果想使用更多的效果,可以百度qt setstylesheet,可以看到更多的渲染效果。在軟件界面中,listWidget控件中我使用的樣式表如下:
QListWidget::item
{
    width:40px;
    height:40px;
    font:bold 20px;
    

}
 QListWidget {
    
    background-color: rgb(255, 255, 255);
 }

 QListWidget::item:selected:!active {
    background-color: rgb(98, 93, 255);
 }

 QListWidget::item:selected:active {
    
    background-color: rgb(98, 93, 255);
 }

 QListWidget::item:hover {
 
    background-color: rgba(50, 23, 255, 100);
    
 }
具體含義可以根據效果就可以看出,如下演示效果:

當前選擇項使用深藍表示,而鼠標停靠的選擇項使用淺藍表示。


下面是我軟件項目中所有的界面,圖標都是使用網絡上的圖標(若有侵權,請告知):


基於Qt的詞典開發系列

詞典框架設計及成品展示
本地詞典的設計
開始菜單的設計
無邊框窗口的縮放與拖動
無邊框窗口的拖動
界面美化設計
調用網絡API
用戶登錄及API調用的實現
JSON數據解析
國際音標的顯示
系統托盤的顯示
調用講述人
音頻播放
自動補全功能
HTML特殊字符及正則表達式
後序

延伸阅读

    评论