• <menu id="gokgi"></menu>
    <nav id="gokgi"><nav id="gokgi"></nav></nav> <menu id="gokgi"><tt id="gokgi"></tt></menu>
    您的位置:首頁 >聚焦 >

    我改了三天沒改出來,他卻只用了半天?

    2023-01-09 09:57:56    來源:程序員客棧


    (相關資料圖)

    今天來做一個桌面端的「關于」頁面,它沒有多么難的視覺效果,只是很考驗 UI 排版的基本功,要把這個頁面的內容處理清晰有條理。需求方給到的頁面信息如下:要怎么做呢?是不是把東西往上擺擺,有大有小就可以了?信息少還好,但如果要擺的東西比較多,排出來可能會比較凌亂:那有沒有更好一點的處理方式?有的,下面我就分享一下稿子優化的心路歷程~01 分類處理除了把信息放上去,調好大小對比之外,我還會再多加一步:分類處理這個靈感主要來自很多網頁都有的、頁面底部的「關于我們」把眾多文字信息分類處理,能讓頁面看著清晰不少,也能幫助用戶快速查找。于是我哐哐一頓分類排布,再排出來的頁面如下:02 知道一些交互,根據交互做排版的調整除了看著清晰不少之外,我也站在用戶的角度想了一下交互1. 電話可點擊,點擊后喚起對應的軟件,撥打電話在 Mac 上可以實現這樣的快捷操作,會幫你自動用手機撥打2. 購買鏈接也做成可點擊的,點擊后即可跳轉3. 二維碼采用鼠標懸浮上去后出現(這么做是為了服務于排版整齊一些)這樣處理一番后,頁面出來是這樣:交上去后,需求方還是想將二維碼外放!所以之前想的「鼠標懸浮后出現二維碼」的排版偷懶辦法是不行了,自己對自己始終有些放松,還得被人逼一下,我們才會做更多的嘗試。03 將三個二維碼外放&視覺修正排版三個二維碼一擺出來,就是浩浩蕩蕩的一排但是由于空間原因,這里最多只能放三列,所以將「協議聲明」改到頁面底部,中間就放三個二維碼logo 決定了整體排版都是居中對齊的方式,那最好都采用居中對齊,調整一下:做到這,我發現整體內容看起來依然不是在整個畫面中央,雖然它左右邊距都是一致的是因為左側導航欄的緣故,讓這塊內容看著有些偏右,直接視覺修正一番就好,將整體往左走一些這樣就好了。04 還有細節可優化Logo下面字給人的感覺很不舒服,它造成的不好看,主要有兩點。1.由于它的存在,把整個畫面信息分割成了比較平均的三大塊2. 文字下面挨著文字,看著節奏感不是很好所以出于以上的原因,我嘗試把 logo 的文字去掉,確實看著好一些。再把整體的大小對比調整一下,最終版:總結排版是 UI 的基本功,在我得到最終版本之前也做了不少的嘗試,只是為了探索出更好的方案,所以想要做的好,想要做的妙,免不了多做幾稿!將腦中浮現的想法都落地做出來,直觀的去看才知道什么是最好的。

    我不太會借鑒,總是做著做著就和別人很像,怎么破!

    關鍵詞: 鼠標懸浮 居中對齊 大小對比

    相關閱讀

    和老少妇做真爽
  • <menu id="gokgi"></menu>
    <nav id="gokgi"><nav id="gokgi"></nav></nav> <menu id="gokgi"><tt id="gokgi"></tt></menu>