حتماً شما هم افکت های زیبای Material Design را دیده اید که چگونه با اسکرول دادن لیست، toolBar و عناصر دیگر با یک افکت زیبا جمع شده و به بالا می روند. چی؟! راجع بهش می دونید و ازش استفاده می کنید؟ باشه من می خوام در این مقاله  نحوه صحیح پیاده سازی CollapsingToolBar  را  باهم برسی کرده و ابهامات احتمالی موجود در گوشه ذهنمون رو بر طرف کنم. پس چه دوستانی که با این کتابخانه آشنا هستند و چه شمایی که تازه می خواهید شروع کنید، تا آخر این مقاله با من باشید. پیشنهاد من اینکه یکبار مقاله را کامل بخوانید و بعد بروید سراغ کد. ۹۰ درصد سوالات برطرف می شود و اگر دوباره مقاله را بخوانید ۱۰ درصد بقیه نیز اوکی میشود. انشاء الله

تعریف:

CollapsingToolBar یک wrapper یا غلاف برای ToolBar هست که خودش مشتق شده از AppBar است و طراحی شده تا فرزند AppBarLayout باشد. خود AppBarLayout یک LinearLayout است با این امکان که اکثر افکت ها و امکانات Material Design  در فرزند های آن قابل استفاده است و اجازه می دهد تا ToolBar و View های دیگر نسبت اسکرول شدن View های وابسته (NestedScrollView و یا RecyclerView) عکس العمل نشان بدهند و افکت های Material Design را اعمال کنند.حتماً می دانید که AppBarLayout باید والد یا parent آن CoordinatorLayout باشد. خود CoordinatoLayout نیز Super FrameLayout است که معمولا به عنوان والد اصلی لیوت ها بکار گرفته می شود. برای جلو گیری از پیچیده شدن مطلب به نمودار زیر توجه کنید:

خیلی خوب بیاید یکبار بالعکس دفعه قبل از بالا به پایین برسی کنیم:

CoordinatorLayout لازم است تا بتوانیم AppBarLayout داشته باشیم. AppBarLayout هم باید باشد تا بتوانیم CollapsingToolBarLayout داشته باشیم. درون CollapsingToolBarLayout هم یک ToolBar برای برنامه می گذاریم و یک ImageView. ما می خواهیم با اسکرول خوردن لایه محتوا، کل CollapsingToolBarLayout و کامپوننت های داخل آن به جز ToolBarجمع شود. در هر کدام از این کامپوننت ها هم باید Property های مخصوص را به درستی مقدار دهی کنیم. اول اینکه در CollapsingToolBarLayout باید فلگ اسکرول را بدهیم که مشخص می کند نسبت به اسکرول لایه محتوا چه عکس العملی نشان دهد. در ضمن می توان برای ToolBar یا کامپوننت های داخل CollapsingToolBarLayout نوع جمع شدن ان را مشخص کرد که می تواند بصورت Paralex یا pin باشد. استفاده از paralex برای ImageView بسیار جالب خواهد بود و با سرعتی کمتر از سرعت اسکرول از صفحه خارج خواهد شد. ( سایت های paralex رو حتماً دیده اید!) البته گزینه pin فقط روی ToolBar کار می کند و توسط آن بعد از جمع شدن کل CollapsingToolBarLayout فقط ToolBar بالای صفحه باقی می ماند و به اصطلاح Pin می شود. البته توجه کنید که نمی توان Pin را مثلا روی ImageView اعمال کرد.

بسیار خوب، از طرفی هم به لایه محتوی باید بگوییم که قرار است تغییرات اسکرولش به AppBarLayout اطلاع داده شود که این امر با ست کردن  layout_behavior محقق می شود.

همه اینها در تصویر پایین رسم کرده ام تا بسیار راحت جمع بندی کنیم.

حالا می تونید برگردید و تعریف رو دوباره بخونید. خیلی خوب! ببینیم چطور می تونیم این افکت ها را ایجاد و مدیریت کنیم. استفاده از Component های یاد شده به همراه چند Scroll_flags باعث ایجاد افکت های Scrolll می شود که بصورت زیر است:

Scroll
اگر از فلگ

scroll

enterAlways
با استفاده از فلگ

enterAlways

scroll

exitUntilCollapsed
با استفاده از این فلگ، لیست بصورتی عمل می کند که با اسکرول لیست به سمت بالا کم کم فضای آیتم را گرفته و آیتم از بالا به بیرون می رود و باید همه صفحه های اسکرول شده در

exitUntilCollapsed

کد نمودار بالا بصورت زیر است:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <!-- fitsSystemWindows: hen enabled, the AppBarLayout assumes that the status bar is not available and it has to occupy the entire real estate. -->

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolBar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <!-- * contentScrim: when collapsing the toolbar color change to this, if you want to use this feature do not set background color for toolBar -->

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:src="@drawable/ic_back"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:elevation="7dp"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"/>

            <!-- * layout_collapseMode: indicate how our tool bar act to collapsing pin on top or paralex -->

        </android.support.design.widget.CollapsingToolbarLayout>


    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|right"
        app:srcCompat="@android:drawable/ic_dialog_email"/>
    <!-- * layout_anchorGravity: layout_gravity should removed so the layout_anchorGravity works -->
    
</android.support.design.widget.CoordinatorLayout>

نکته۱:
گزینه

contentScrim

CollapsingToolbarLayout

toolBar

نکته۲:
گزینه

layout_anchor

CoordinatorLayout

floatingActionButton

appBarLayout

layout_anchorGravity

floatingActionButton

همانطور که می بینید با استفاده از کامپوننت های CollapsingToolBar  و AppBarLayout و CoordinatorLayout با دادن چند Property ساده تونستیم افکت زیبای Material Design را داشته باشیم. امیدوارم این مقاله براتون مفید بوده باشه.

کد کامل رو از اینجا بگیرید و خودتان تست کنید.

منبع: بایت کد

نوشته کار با CollapsingToolBar به همراه مثالی ساده اولین بار در Mahdi Tajik پدیدار شد.

HCI (human-computer interaction) is the study of how people interact with computers and to what extent computers are or are not developed for successful interaction with human beings.

در HCI یکی از مهمترین مفاهیم  Usability یا قابلیت استفاده است که شامل اجزاء زیر است:

1. یادگیری: کاربران باید بتوانند راحت کار با سیستم را بیاموزند و یاد بگیرند.
2. بهره وری: با بهترین روش بهترین نتیجه را بدست آورد و باعث رضایت کاربر شود.
3. به یادسپاری: کاربر به راحتی بتواند به خاطر بسپارد و در برخورد های بعدی نحوه ارتباط را به یاد آورد.
4. کاهش نرخ خطا: خطا نه تنها کرش و پیغام خطا در سیستم است بلکه رسیدن به یک وضعیتی که کاربر نداند در کجا قرار گرفته است نیز خطا محسوب می شود و باید تا جای ممکن نرخ خطا کاهش پیدا کند.
5. رضایت شخصی: بالابردن رضایت شخصی در حد اعلاء.

قوانین طلایی اشنایدرمن در طراحی رابط کاربری

قوانین که در زیر مشاهده می کنید به قوانین اشنایدرمن معروفند که اصول کلی برای طراحی UI را بصورت زیر تعریف می کند که ما عوامل یادشده Usability را در تک تک قوانین آن برسی خواهیم کرد.

1. یکپارچگی: در تمامی سیستم از یک روش برای نمایش و یا ارتباط کاربر استفاده نماییم. مثلا اگر در یک بخش از برنامه بازگشت توسط دکمه خاصی باشد در تمامی برنامه برای بازگشت از همان روش استفاده نماییم. این قضیه هم باعث یادگیری بهتر می شود، هم بهره وری بالا می رود و هم اینکه بهتر به خاطر کاربر می ماند.
2. میانبر: به فکر همه کاربر ها باشید. هم کاربران جدید تازه وارد و هم کاربران حرفه ای. همانگونه که رابط کاربری ما باید بسیار گویا برای کاربران جدید باشد باید کلیدهای میانبری برای کاربران قدیمی بگذاریم تا بعد از مدتی برنامه کسل کننده نشود و بتوانند سریع تر به اهداف خود برسند.
3. دادن فیدبک به کاربر: وقتی اتفاقی دارد می افتد کاربر ازآن مطلع کنیم. مثلا کاربر فرم  اطلاعات را پر می کند و دکمه ثبت را می زند.  وقتی برنامه  درحال ارسال اطلاعات به سرور و منتظر بازگشت اطلاعات است باید پیغام لطفاً “منتظر باشید، دستور شما در حال اجرا است!” را به کاربر بدهیم. این باعث می شود رضایت شخصی بالابرود.
4. تایید کاربر: وقتی اتفاقات مهمی دارد رخ می دهد حتماً  تایید  مربوطه را بگیریم. “آیا مایلید تمامی فایل ها حذف شوند؟” و این باعث ایجاد کاهش نرخ خطا و رضایت شخصی بیشتر می شود.
5. از خطا جلوگیری کنید: تا جای ممکن جلوی بروز هرگونه خطا را بگیرید. چه خطای سیستمی چه خطایی که ممکن از ناشی استفاده نادرست کاربر از برنامه باشد. مثلا اگر قرار است در جایی فقط عدد وارد شود نوع فیلد ورودی با کنترل کننده عدد بگذارید که فرضاً اگر کاربر در فیلد مربوط به سن  “۱۹ سال” را نتواند وارد کند. این قلانون باعث افزایش بهره وری و رضایت شخصی بیشتر می شود.
6. امکان بازگشت: دکمه پشیمان شدم را برای اتفاقات مهم بگذاریم تا کاربر بتواند بعد از انجام کاری حساس و در صورت پشیمانی بتواند به وضعیت قبلی برگردد.
7. حسن کنترل به کاربر: کاربر همیشه باید حس کنترل روی برنامه داشته باشد نه اینکه برنامه او را کنترل کند. قابلیت شخصی سازی های گوناگون، ابزارهای در دسترس، اطلاع رسانی های کامل و بی نقض باعث افزایش این حس می شود.
8. حساب نکردن روی حافظه کوتاه مدت کاربر: باید تمام تلاش خود را در جهت ساده سازی روند انجام دستورات توسط برنامه بکارگیریم تا کاربر به سهولت با برنامه ارتباط برقرار کند. به عنوان مثال اگر قرار است کدفعال سازی را بصورت دستی وارد کند کد ۸ رقمی به او ندهیم و اگر ناچاراً ۸ رقمی است روند وارد کردن آن را اتوماتیک کنیم.

قانون فیتسfitt’s law

Faster to hit larger Targets closer to you  than  smaller targets further from you

طبق قانون فیتس می توان شاخص سختی دسترسی به یک آیتم در صفحه را بدست آورد که به آن ID می گویند. ID متاثر از اندازه آیتم و فاصله ما تا آن آیتم می باشد. قانون فیتس به ما می گوید که انتخاب هدف بزرگتر که در نزدیک ماست سریع تر از انتخاب هدف کوچی است که در دور دست می باشد. البته شاید به نظر برسد که ایشان چشم بسته غیب گفته اند، لکن خواهید دید که همین امر بدیهی وقتی فرموله شود چقدر می تواند مفید واقع گردد.

قانون فیتس بصورت زیر است.  A همان فاصله یا d می باشد. طبق این قانون درجه سختی با اندازه ( عرض) آیتم رابطه معکوس و با فاصله مان تا آن رابطه مستقیمی دارد. هرچه درجه سختی (ID) بیشتر باشد دسترسی به آن آیتم سخت تر خواهد بود.

البته در کاربر نیازی به استفاده از فرمول نداریم بلکه باید بتوانیم این قانون را درست پیاده سازی کنیم. یعنی باید تعادلی بین سایز آیتم ها و فاصله بین آنها پیدا کنیم که بهینه باشد. در فاصله های بسیار دور اندازه بزرگ خیلی تاثیری ندارد و در فاصله های خیلی نزدیک آیتم ها، اندازه کوچک آن نیز انتخاب را بسیار سخت می کند. آزمایشی در اینجا قرار دادم تا با نصب آن برروی گوشی بتوانید بصورت عملی متوجه این قضیه شوید. فایل را از اینجا دانلود کنید. این فایل را توسط Fiddler تست کردم و امن است. می توانید از تنظیمات زیر استفاده کنید و یا با تنظیمات دلخواه آزمایش کنید:

نتیجه نهایی به این صورت تفسیر کنید:

ID = Index of difficulty

A | d = distance

W = width of object

MT = Movement time to hit Target

TP = throughput   توان عملیاتی

نتایج برایتان جذاب بود، نه؟ علاوه بر فاصله و اندازه ایتم تعداد آیتم ها نیز در زمان انتخاب تاثیر گذار هستند. هرچه تعداد آیتمی که جهت انتخاب موجودند بیشتر باشند زمان تصمیم گیری و در نتیجه انخاب نیز بیشتر می شود. به عنوان مثال فرض کنید می خواهیم یک پلت رنگی به کاربر بدهیم جهت انتخاب رنگ برای آیتم خاصی. دو پلت زیر قابل قبول هستند. اما زمان انتخاب بین آنها چندین برابر می باشد.

انتخاب بین رنگ های بالا برایتان ساده تر است یا انتخاب از پلت رنگی زیر:

کاربران چگونه گوشی خود را دردست می گیرند

حال می خواهیم رابط کاربری را با دید تخصصی تر موبایل مورد برسی قرار دهیم و با توجه به اطلاعات بدست آمده از نحوه دست گرفتن گوشی و راحتی کاربر، مکان و نقاط مناسب جهت قرار دادن آیتم ها را کشف کنیم! اول باید ببینیم اکثر کاربران گوشی را چگونه در دست می گیرند. سپس نقاط مناسب برای قرار دادن آیتم ها کدامند؟

همانطور که ملاحظه می کنید بیشتر آمار ما برای کاربران راست دست است. زیرا آنها بیشترین سهم کاربران ما را تشکیل می دهند. حال با توجه به نحوه در دست گرفتن نقاط  صفحه را باتوجه به راحتی دسترسی به سه قسمت  Easy و OK و forbidden تقسیم می کنیم که به ترتیب به رنگ های سبز و زرد و قرمز می باشد. آیتم های پرکاربرد که زیاد لمس می شوند باید در  بخش Easy قرار گیرد. آیتم هایی که خیلی پر استفاده نیستند در OK و یا Forbidden قرار گیرند. حتی المقدور نباید آیتم ها را در ناحیه قرمز قرار داد، زیرا لمس کردن آنها بسیار سخت است. البته گاهی پیش می آید که آیتم کم کاربردی را در این بخش قرار دهیم. مثلا آیکون تنظیمات اگر قرار است در صفحه اول قرار گیرد با توجه به ارجاعات کم به آن ( شاید روزی یک بار یا کمتر) بهتر است در ناحیه قرمز قرار گیرد. مثلا گوشه بالا سمت چپ.

امیدوارم بعد از دیدن تصاویر آتی متوجه سیاست های UI در اپ های معروف و موفق خواهید شد و که احتمالا برایتان جذاب خواهد بود.

و این آمار برا چپ دست ها بصورت زیر است:

در سایز های مختلف گوشی بدین شکل تغییر می کند:

در تبلت بصورت زیر است:

و در تبلت بصورت افقی:

همچنین در سه مدل آیفون به شکل زیر است:

پس ما باید با توجه به نوع کاربری برنامه و افقی یا عمودی بودن صفحه، در چینش آیتم های صفحه به نکات بالا توجه کنیم. البته توجه داشته باشید همانطور که قبلا اشاره کردم، اکثر آمارهای ارئه شده برای کاربران راست دست در نظر گرفته شده است. زیرا اکثریت آنها راست دست هستند.

امیدوارم مطالب فوق مفید واقع شده باشد. اگر سوال یا نکته نظری داشتید کامنت بگذارید.

منبع: بایت کد

نوشته مفاهیم مهندسی رابط کاربر اولین بار در Mahdi Tajik پدیدار شد.