Question

我计划有一个由6个矩形面板组成的网格（3 X 2）。每个面板都将作为一个按钮，在我的系统中打开一个不同的模块。我正在寻找鼠标悬停或悬停以应用于每个面板的一些效果，以便用户可以在实际单击面板之前告诉面板正在与之交互。（它会向他们显示它是可点击的而不仅仅是只读数据）。例如，某些内容可以让面板按下＆＃34;实际点击面板之前的效果会很好。（我对其他建议持开放态度）。

我目前正在使用角度引导版本0.13.4。

以下是我将应用它的面板代码：

<div
        data-ng-if="vb.isAuthorized('ROLE_STAFF','ROLE_SRPROFESSOR')">
        <div class="panel panel-default panelAttributes panel-snap"
            data-ng-click="vb.change('classmodule')">
            <div class="panel-body" id="content">
                <div class="row col-md-12">
                    <img src="/WebContent/img/Shape@3x.png" alt=""
                        class="img-responsive resize" /> <br> <span
                        class="classText Placement">Class Module</span>
                </div>
                <div class="col-md-6">
                    <p class="numericalText divContent">5</p>
                    <p class="infoText divContent">Community Colleges</p>
                </div>
                <div class="col-md-6">
                    <p class="numericalText divContent">28</p>
                    <p class="infoText divContent">Counties <br>Served</p>
                </div>
            </div>
        </div>
    </div>

请告诉我任何好的建议！我不确定设计惯例对于这样的事情有什么期望，所以我想看看这里的人有什么想法。

我目前正在使用阴影效果：

.panel-snap {
    background-image: -webkit-linear-gradient(top, #FF5A00, #FFAE00);
    background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
    background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
    background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
    background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
    box-shadow: 3px 3px 5px 6px #A9A9A9;
}

请随时告诉我任何问题，谢谢！

Answer 1

这纯粹是您的选择，当然您可以遵循一些模式。 Google Material非常受欢迎（有充分理由）也许您可以从here获取灵感作为起点。另一个在CodeDrops获得快速灵感的好资源。

对于悬停事件，我经常喜欢使用SASS或LESS来减轻/变暗10％。这样，您可以设置主色并以精确一致的方式对其进行操作。你甚至可以使用mixin。

就个人而言，我认为在交互性问题上更少，但实际上这取决于您打算为用户提供的体验。

这实际上归结为设计过程，选择这些设计模式可能是一个非常漫长且涉及的过程。设计师可以广泛地为这个过程而苦恼。

我可以继续列出设计建议，但谷歌真的是你的朋友，研究并获得灵感。或者，在codepen中隔离您的元素并使用它。尝试不同的风格和动画组合真的很有趣。

制作＆＃34;按下＆＃34;使用Angular bootstrap版本0.13.4对Panel的影响

1 个答案: