97视频网站-97视频在线-97视频在线播放-97视频在线观看播放-97视频在线观看免费-97视频在线观看免费播放

×

網(wǎng)站建設(shè)

當(dāng)前位置:首頁(yè) > 龍鼎新聞 > 行業(yè)新聞 >

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式

作者:龍鼎網(wǎng)絡(luò)發(fā)布時(shí)間:2015-07-23 16:13:32瀏覽次數(shù):15386文章出處:晉城自適應(yīng)網(wǎng)站制作

  對(duì)齊與間距,無(wú)非左右上下的關(guān)系,怎樣才能讓符合用戶的視覺(jué)感知呢?蕓蕓眾生,紅塵滾滾,有幸讓他(她)瞄上一眼,留下個(gè)“很舒服”的第一印象,非常重要

  而且在實(shí)際設(shè)計(jì)的流程中,如果經(jīng)常因?yàn)槟睦餂](méi)對(duì)齊被批,會(huì)影響整個(gè)團(tuán)隊(duì)效率,你在團(tuán)隊(duì)中信任度也會(huì)降低。不要迷信什么大神了,還是把自己當(dāng)前水平該掌握的基礎(chǔ)知識(shí),拿到手,更靠譜。

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  說(shuō)的玄乎點(diǎn)是設(shè)計(jì)師的態(tài)度,說(shuō)大白話就是基礎(chǔ)不牢固,還總要建高樓。好,不念經(jīng)了,說(shuō)基礎(chǔ),希望能發(fā)揮點(diǎn)作用。

  一、基礎(chǔ)操作方式

  工欲善其事,必先利其器。

  利用參考線對(duì)齊。在Photoshop的【編輯】-【首選項(xiàng)】菜單中可以設(shè)置合適的網(wǎng)格尺寸。

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  在設(shè)計(jì)前期將界面進(jìn)行設(shè)置框架參考線,通過(guò)參考線將按鈕、文字、圖形對(duì)齊。

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  PS參考線小插件-GuideGuide

  這是一個(gè)非常便捷的畫(huà)參考線的工具,讓你節(jié)省了時(shí)間去算參考線。在插件你可以輸入一些數(shù)字,GuideGuide可以通過(guò)你設(shè)定的單位自動(dòng)劃分號(hào)好網(wǎng)格。這個(gè)軟件最強(qiáng)大的地方就是:可以通過(guò)畫(huà)布中選區(qū)的大小生成對(duì)應(yīng)的網(wǎng)格參考線。真是畫(huà)參考線的神器也!

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  界面中常用對(duì)齊形式

  對(duì)齊三大招:齊行、居左、居中。(貌似初一就學(xué)過(guò),干活卻老忘)

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  齊行式:運(yùn)用在閱讀性文本中,比較長(zhǎng)的文本段。一般用在詳情頁(yè)中。(圖:貓眼電議)

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  居左式:這種用的比較多,常常運(yùn)用在APP的設(shè)計(jì)中,列表信息展示等。這種對(duì)齊方式比較容易閱讀,能很好的區(qū)分主次文本的層次。(圖:淘寶)

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  居中式:主要使用在信息流式的文本表現(xiàn)方式中。(圖QQ音樂(lè))

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  二、解構(gòu)分析

  有對(duì)齊的意識(shí),也進(jìn)行對(duì)齊,但為什么不夠高大上呢?設(shè)計(jì)出來(lái)的效果怪怪的……

  一般設(shè)計(jì)師會(huì)這樣設(shè)計(jì),大感覺(jué)上也沒(méi)有什么問(wèn)題。(下圖)

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  其實(shí)對(duì)齊也是有規(guī)律的,善于發(fā)現(xiàn)設(shè)計(jì)中的聯(lián)系。

  我們來(lái)看一下其他幾個(gè)用戶體驗(yàn)不錯(cuò)的輸入框設(shè)計(jì),憑啥就這么舒服呢?和大家解構(gòu)一下它們的設(shè)計(jì)。

  小米的登錄頁(yè)。

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  在小米的登錄頁(yè)設(shè)計(jì)中,主標(biāo)題與副標(biāo)題進(jìn)行了左對(duì)齊。

  輸入框提示文字與輸入框基于中心線對(duì)齊,讓提示信息和輸入框看起來(lái)更為整體舒服。

  內(nèi)容劃分明確,明確了哪些是需要輸入的,哪些只是描述。

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  蘋(píng)果的登錄頁(yè)

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  在蘋(píng)果的登錄頁(yè)面中更為講究,標(biāo)題和輸入框利用了不同對(duì)齊方式拉開(kāi)了層次。

  請(qǐng)登錄標(biāo)題和取消按鈕是左對(duì)齊的,而輸入框與提示文字則是居中對(duì)齊的。

  將用戶的視線引入到了輸入框的上面,從而加強(qiáng)了提示文字與輸入框之間的關(guān)系,并用大間距拉開(kāi)了標(biāo)題和內(nèi)文的層次。

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)
基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  在對(duì)齊的方式里我們找到了規(guī)律,層級(jí)關(guān)系,框框框!

  通過(guò)對(duì)其方式來(lái)區(qū)分內(nèi)容的層級(jí)關(guān)系,這就是隱形對(duì)齊框的作用。將信息層級(jí)通過(guò)這種方式羅列在用戶眼前。讓用戶最近視角展示產(chǎn)品的核心信息。提煉出用戶在場(chǎng)景中最為關(guān)注的訴求,解決用戶的問(wèn)題。

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  對(duì)齊也是有層次的。有左對(duì)齊、右對(duì)齊、居中對(duì)齊。(都懂都懂,就是用不好)左對(duì)齊和右對(duì)齊主要是對(duì)屏幕內(nèi)容的規(guī)整性,居中對(duì)齊則是對(duì)內(nèi)容文本的劃分。

  三、常用間距

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  將框框框融入到APP界面中,將主要的,用戶想找的內(nèi)容突出出來(lái)。

  在設(shè)計(jì)中一般間距設(shè)定的大小單位10px,這樣更容易統(tǒng)一整個(gè)畫(huà)面的一致性。

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  在界面中常用間距來(lái)劃分內(nèi)容的層級(jí)關(guān)系,讓內(nèi)容與導(dǎo)航取分出來(lái)。

  在導(dǎo)航上的左右間距是20px,而在內(nèi)容列表信息程序時(shí)左右間距調(diào)整到了30px。

  通過(guò)這種方式區(qū)分了上下層級(jí)的關(guān)系。

  那么在主文本信息中還將上下間距統(tǒng)一一致都設(shè)定為30px,使整個(gè)內(nèi)容的邊框看起來(lái)更為整體舒服。

  我們常會(huì)設(shè)計(jì)到雙行文字的列表,QQ的設(shè)計(jì)是120px,隨著設(shè)備屏幕的變大,更加注重了頁(yè)面的留白。為了加強(qiáng)內(nèi)容的突出性。我在設(shè)計(jì)中高度設(shè)定為130px

基礎(chǔ)小科普!聊聊界面中常用的對(duì)齊形式,龍鼎網(wǎng)絡(luò)

  再往深的走,界面中還會(huì)有其他的信息。如時(shí)間、消息氣泡等。它們的對(duì)齊模式會(huì)根據(jù)字號(hào)大小進(jìn)行控制。

  為了保證內(nèi)容閱讀的舒適性,字號(hào)大小不一致的文本我們還會(huì)用到居中對(duì)齊的方式(比如,上圖中的主標(biāo)題和時(shí)間的對(duì)齊方式),讓內(nèi)容顯得更為規(guī)整。

  總之,以內(nèi)容為中心的設(shè)計(jì)能讓用戶快速找到想要的。使用正確的對(duì)齊和間距,能讓界面更為整齊,信息更為明確。

  今天就到這里,休息休息,休息一大會(huì)兒,然后多看多分析,多交流。

晉城龍鼎 - 晉城網(wǎng)站建設(shè)為您解答!

客戶評(píng)價(jià)

專業(yè)的網(wǎng)站建設(shè)、響應(yīng)式、手機(jī)站微信公眾號(hào)開(kāi)發(fā)

© 2010-2020 龍鼎網(wǎng)絡(luò) 版權(quán)所有 晉ICP備14008335號(hào)-1

注冊(cè)號(hào):140502200020561

公眾號(hào) 微信聯(lián)系

手機(jī)版 進(jìn)入手機(jī)版

主站蜘蛛池模板: 亚洲欧美不卡中文字幕| 成人免费观看在线视频| 日韩伊人| 日韩日b| 日本免费一区二区视频| 亚洲精品国产精品国自产网站| 普通话对白国产精品一级毛片| 亚洲欧美日韩高清中文在线| 网址在线观看| 久久国产福利| 亚洲一区二区视频| 91宅男| 四虎官网| 久久国产精品久久| 在线日韩欧美| 99爱在线| 天天综合网网欲色| 精品视频中文字幕| 亚洲精品中文字幕乱码三区| 91国内在线国内在线播放| 国产yw.8825.c免费| 色香影视| 日本www| 国产在线麻豆精品| 91在线欧美精品观看| 午夜狠狠操| 亚洲日本中文字幕在线| 青青青国产视频| 国产精品99| 欧美综合图片一区二区三区| 久草在线免费资源| 波多野结衣加勒比久久爱| 午夜浮力| 国产精品视频999| 日本高清色视影www日本| 国产精品美女视视频专区| 98k在线播放视频| 欧洲黄色小说| yy毛片| 日韩欧美视频| 免费一区二区三区|