Nội dung text G6S2 Session 05.pdf
Q) what do we have to consider when making a responsive design! - Breakpoints: o بتدي افضل تخطيط لشكل ال page علي حسب حجم الشاشة اللي بنعرض عليها ال app دلوقتي o Breakpoints are when the structure of your design changes to give the user the best possible layout in a given screen size. o Defining breakpoints helps you a lot in planning the layout when designing. It's best to start off with designing for three important breakpoints. o 3 important breakpoints • 1440 for Web • 768 for iPad • 375 for iPhone - Flexible Layout: o Layout: هو تخطيط شكل الصفحة .. :Layout Flexible هو ان تخطيط شكل الصفحة يتناسب تلقائيا مع اي تغيير حجم الشاشة ع حسب الجهاز اللي بعرض عليه .. بحيث ان كل المعلومات تفضل ظاهرة و واضحة o Content must adapt and fit as the screen size changes to accommodate all the necessary information. o Layout must stay responsive by decreasing the spacing, changing your layout from horizontal to vertical and changing the grid sizes. - Dynamic Type: هو حاجة بتسمح للمستخدمين انهم يتحكموا في حجم المحتوي اللي موجود علي الشاشة.. ألن في بعض o المستخدمين بيفضلو ان يكون العناصر بحجم اكبر وخصوصا النصوص عشان تكون اوضح بالنسبالهم - Toch Targets: o احنا كمستخدمين مش بندوس ب دقة ع ال icons /buttonsاللي محتاجين ندوس عليه )مش بندوس في المكان المظبوط يعني( .. ف عشان كدة الزم نوفر مساحة اكبر للنقر )Tap )عشان يقدرو يعملو ال action اللي محتاجينه o Having a larger touch target ensures a positive user experience - Constraints: o بنحدد بايدينا - Manually-ازاي كل العناصر هتستجيب او هتتغير في حالة ان حجم الشاشة / frame اتغير o This helps you control how your designs look on different screen sizes. - Auto layout o االعناصر بتغير حجمها بشكل تلقائي في حالة ان حجم frameاتغير ودة بيساعدنا بدل م نضطر نعملهم manullay o Allows elements to resize automatically according to the items inside it. o It automatically resizes the content according to the frame size. o This means you don't have to keep resizing the elements every time a change has been made or new items have been added.